إضافة أزرار التحميل و المعاينة لمواضيع بلوجر

نقدم لكم اليوم درس حول كيفية إضافة أزرار التحميل و المعاينة أو أي شيءتحب أن تجعله على شكل زر منسق.
بحيث أن هذا التنسيق يُعطي للموضوع و للمدونة جمالية أكثر إحترافية
و ذلك لأن زوار المدونة دائما ما يعشقوم ما هو جميع بصفة عامة.

و هذه هي معاينة للنتيجة النهائية التي سوف نحصل عليها إن شاء الله:

أولا و قبل كل شيء ننصح دائما بأخذ نسخة احتياطية لقالب المدونة لتفاذي الوقوع في أي خطأ.

قم بالدخول إلى لوحة تحكم المدونة.
ثم المظهر.
ثم انقر على تحرير الــHTML.

نبحث عن الوسم ]]></b:skin> و نضيف أكواد الــCSS التالية فوقه مباشرة.

/* -- Début bouton démo et télécharger --*/
.button{float:right;list-style:none;text-align:center;width: 100%;margin:5px 0;padding:0;font-size:15px;clear:both;}
.button ul {margin:0;padding:0}
.button li{display:inline;margin:0;padding:0}
.button li a {color:#fff}
.download {
cursor:pointer;
margin:10px 0px;
background:#479ECD;
padding:10px 15px;
margin:4px 2px;
font:bold 17px Arial,Sans-Serif;
color:#fff;
text-decoration:none;
outline:none;
text-shadow:0px -1px 0px #297EB9;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
inset 0px -1px 0px rgba(255,255,255,0.3),
0px 3px 0px #297EB9,
0px 5px 8px rgba(0,0,0,0.4);
-moz-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
inset 0px -1px 0px rgba(255,255,255,0.3),
0px 3px 0px #297EB9,
0px 5px 8px rgba(0,0,0,0.4);
box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
inset 0px -1px 0px rgba(255,255,255,0.3),
0px 3px 0px #297EB9, 0px 5px 8px rgba(0,0,0,0.4); }
.download:hover { -webkit-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.4), inset 0px -1px 0px rgba(255,255,255,0.3), 0px 3px 0px #297EB9, 0px 5px 8px rgba(0,0,0,0.4); -moz-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.4), inset 0px -1px 0px rgba(255,255,255,0.3), 0px 3px 0px #297EB9, 0px 5px 8px rgba(0,0,0,0.4); box-shadow:inset 0px 0px 20px rgba(255,255,255,0.4), inset 0px -1px 0px rgba(255,255,255,0.3), 0px 3px 0px #297EB9, 0px 5px 8px rgba(0,0,0,0.4); }
.download:active { position:relative; top:2px; -webkit-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3), inset 0px -1px 0px rgba(255,255,255,0.3), 0px 1px 0px #297EB9, 0px 3px 3px rgba(0,0,0,0.4); -moz-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3), inset 0px -1px 0px rgba(255,255,255,0.3), 0px 1px 0px #297EB9, 0px 3px 3px rgba(0,0,0,0.4); box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3), inset 0px -1px 0px rgba(255,255,255,0.3), 0px 1px 0px #297EB9, 0px 3px 3px rgba(0,0,0,0.4); }
.demo { cursor:pointer; margin:10px 0px; background:#A90606; padding:10px 15px; margin:4px 2px; font:bold 17px Arial,Sans-Serif; color:#fff; text-decoration:none; outline:none; text-shadow:0px -1px 0px #770101; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; -webkit-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3), inset 0px -1px 0px rgba(255,255,255,0.3), 0px 3px 0px #770101, 0px 5px 8px rgba(0,0,0,0.4); -moz-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3), inset 0px -1px 0px rgba(255,255,255,0.3), 0px 3px 0px #770101, 0px 5px 8px rgba(0,0,0,0.4); box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3), inset 0px -1px 0px rgba(255,255,255,0.3), 0px 3px 0px #770101, 0px 5px 8px rgba(0,0,0,0.4); }
.demo:hover { -webkit-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.4), inset 0px -1px 0px rgba(255,255,255,0.3), 0px 3px 0px #770101, 0px 5px 8px rgba(0,0,0,0.4); -moz-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.4), inset 0px -1px 0px rgba(255,255,255,0.3), 0px 3px 0px #770101, 0px 5px 8px rgba(0,0,0,0.4); box-shadow:inset 0px 0px 20px rgba(255,255,255,0.4), inset 0px -1px 0px rgba(255,255,255,0.3), 0px 3px 0px #770101, 0px 5px 8px rgba(0,0,0,0.4); }
.demo:active { position:relative; top:2px; -webkit-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3), inset 0px -1px 0px rgba(255,255,255,0.3), 0px 1px 0px #770101, 0px 3px 3px rgba(0,0,0,0.4); -moz-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3), inset 0px -1px 0px rgba(255,255,255,0.3), 0px 1px 0px #770101, 0px 3px 3px rgba(0,0,0,0.4); box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3), inset 0px -1px 0px rgba(255,255,255,0.3), 0px 1px 0px #770101, 0px 3px 3px rgba(0,0,0,0.4); }
/* -- Fin bouton démo et télécharger --*/

الآن كيفية إضافة الأزرار إلى الموضوع:
عند كتابة الموضوع، يجب الإنتقال إلى من تأليف إلى الــHTML.

ثم نضع الكود التالي:

<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="#" target="_blank">معاينة</a></li>
<li><a class="download" href="#" target="_blank">تحميل</a></li>
</ul>
</div>
<div class="clear"></div>

ثم يمكنك أن تغير العلامة # في الكود بالرابط الذي تريد أن ينتقل إليه عند الضغط
و تغير الكلميتن "معانية" و "تحميل" بما يناسبك.

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

في الأخير، نقدم لكم موقعين لتخصيص الــCSS للأزرار. و هذه المواقع هي مجانية:
As Button Generator
هذا الموقع جميل بشكل خاص. لأنه يعطيك لديك العديد من الخيارات لتخصيص الأزرار الخاصة بكو هذه الخيارات مرتبة في علامات التبويب. بحيث يمكنك اختيار الألوان والتدرجات والأحجام والشرائط الأخرى قبل حفظ النتيجة على جهاز الكمبيوتر الخاص بك.
my cool button
بصرف النظر عن كلما هو كلاسيكي، يقدم هذا الموقع عدة خيارات أصيلة تمكنك من إدراج شعار أو أيقونة على زرّك. و على سبيل المثال، يمكنك استخدام هذا الموقع لتخصيص أزرار الرابط الخاص بك على Facebook، twitter ...
و هناك مميزات أخرى و عديدة: أكثر من 50 خط، الألوان...