طريقة إضافة أزرار بتقنيةِ ِCss ِإلى مدونات البلوجر

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

و هذا مثال مباشر للإضافة :

تحميل

لإضافة هذه الأزرار إلى مدونتك يرجى تتبع المراحل التالية :

» اذهب إلى لوحة التحكم الخاصة بمدونتك ثم => اختر قالب ثم => تحرير HTML ثم => اضغط على متابعة.

» قم بتوسيع عناصر واجهة المستخدم.

» و لا تنسى أن تقوم بتحميل نسخة احتياطية من القالب تحسبا لأي خطأ.

» من لوحة المفاتيح اضغط على (Ctrl+F) و ابحث عن الوسم التالي : ]]></b:skin>

» بعد إيجاد الوسم ]]></b:skin> قم بوضع الكود التالي فوقه مباشرة.

a.expand-button:link { color: #6E6E6E;
font: bold 16px Helvetica, Arial, sans-serif;
text-decoration: none; padding: 7px 12px;
position: relative; display: inline-block;
text-shadow: 0 1px 0 white; -webkit-transition: border-color .218s; -moz-transition: border .218s; -o-transition:
border-color .218s; transition:
border-color .218s; background: #F3F3F3;
background: -webkit-gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1));
background: -moz-linear-gradient(linear,0% 40%,0% 70%,
from(whiteSmoke),to(#F1F1F1));
border: solid 1px gainsboro;
border-radius: 2px; -webkit-border-radius: 2px;
-moz-border-radius: 2px; margin-right: 10px; text-align: center;
width: 80px; transition: width 1s; -moz-transition: width 1s; -webkit-transition: width 1s; -o-transition: width 1s; }
a.expand-button:hover
{ color: #333; border-color: #999;
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2)
-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); width: 80px;