Uncategorized

طريقة إضافة زر تحميل إحترافي و متحرك لمدونة البلوجر

السلام عليكم في هذه التدوينة الجديد سوف نتعرف علي طريقة إضافة زر تحميل إحترافي و متحرك و هذا الزر سوف يفيدك خصوصا إن كان مدونتك متخصص بقوالب بلوجر.

إذا طريقة إضافة هذا الزر سهلة كل ما عليك فعله هو التوجه إلي مدونتك البلوجر و بعدها القالب و من ثم تحرير html و تقوم بالبحث عن الكود عبر الضغط علي Ctrl+f و تقوم بالبحث عن هذا الكود.

</head> 

و من ثم تقوم بلصق هذا الكود فوقه مباشر و بعدها تعمل حفط للقالب

<style>
/* Download Button */
.downloadbutton {margin:20px auto;padding:20px 0;width:200px;}
.downloadbutton a {background:#fff;;color:#666;display:block;font-size:17px;font-weight:700;
font-family:’Arial’,Verdana,sans-serif;height:50px;line-height:50px;text-align:center;
text-decoration:none;text-transform:uppercase;width:200px;position:relative;z-index:2;}
.downloadbutton a:hover {background:#ddd;}
.downloadbutton a:before {content:”f019″;font-family:FontAwesome;font-weight:normal;
padding:8px;margin-left:-12px;margin-right:6px;}
.downloadbutton span {background:#444;color:#fff;display:block;font-size:12px;font-family:’Arial’, Verdana,sans-serif;height:40px;line-height:40px;text-align:center;width:200px;z-index:1;text-transform:uppercase;
font-weight:bold;}
.downloadbutton .up {background:#8493A0;margin:-25px auto;opacity:0;border-radius:0 0 5px 5px;transform: translate(0,-50px);transition:350ms;}
.downloadbutton .down {margin:-30px auto;opacity:0;border-radius:5px 5px 0 0;transform: translate(0,-50px);transition:350ms;}
.downloadbutton .down:before {content:”f14a”;font-family:FontAwesome;font-weight:normal;
margin-right:6px;color:#aaa;}
.downloadbutton:hover .up {opacity:1;transform: translate(0,0);}
.downloadbutton:hover .down {opacity:1;transform: translate(0,-90px);}
.demobutton {margin:20px auto;padding:20px 0;width:200px;}
</style>

إذا بعد لصق الكود فوق وسم </head> كل ما عليك هو كتابة تدوينة و بعد الوصول إلي جزء الذي تريد وضع فيه رابط تحميل القالب أو أي تطبيق كتبت عنه تدوينة تتحول من مألف أو محرر الكتابة إلي html و تقوم بلصق هذا الكود في المكان الذي تريد أن يظهر فيه

<div class=”downloadbutton”>
<a href=”http://www.abdro.ga” rel=”nofollow” target=”_blank”>تحميل</a>
<br />
<span class=”up”>تحميل الملف</span>
<br />
<span class=”down”>أنقر هنا لتحميل الملف</span>
</div>

إذا طريقة التعديل عليه بسيط جدا يمكنك تغيير الكتابة الذي سوف يظهر عند وضع الماوس علي الزر عبر التعدبل علي هذه الكلمات

  1. تحميل
  2. تحميل الملف
  3. أنقر هنا لتحميل الملف

أما بالنسبة لطريقة التعديل علي الرابط إبحث عن هذا الرابط و قم بإسبداله برابط التحميل

  1. http//www.abdro.ga

و يمكنك عمل معاينة للزر من هنا

© copyright 2019 – جميع الحقوق محفوظة

مدونة أبدرويد

مقالات ذات صلة

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

زر الذهاب إلى الأعلى