معهد خبراء بلوجر - أضف أزرار جميلة لمدونتك بتقنية الcss

http://3.bp.blogspot.com/-Law8cAr6h5...tons-thumb.pngمن صاحب مدونة الطريق إلى أحلى منتدى جلبت لكم اليوم طريقة لإضافة أزرار جذابة و جميلة بتقنية الcss لمدونة البلوجر. توجد 6 ألوان مختلفة و هي (الوردي والأخضر والأزرق والأحمر والبرتقالي والأصفر) و بحجمين (كبيرة ومتوسطة). يمكنك إضافة هذه الأزرار في 2 خطوات إلى مدوتنك كما أن إستخدامها سهل للغاية.

معاينة :

Pink Button

Green Button Blue Button

Red Button Orange Button

Yellow Button

طريقة التركيب :

أولا سنضيف كود CSS إلى القالب

نتوجه إلى لوحة تحرير الHtml الخاصة بالقالب المدونة
نقوم بتوسيع القالب ثم نبحث عن
]]></b:skin>
قم بإضافة الكود التالي فوق الرمز ]]></b:skin>

كود:
.button, .button:visited { background: #222 url(http://helperblogger.googlecode.com/svn/overlay.png) repeat-x; display: inline-block; padding: 5px 10px 6px; color: #fff; text-decoration: none; -moz-border-radius: 6px; -webkit-border-radius: 6px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); border-bottom: 1px solid rgba(0,0,0,0.25); position: relative; cursor: pointer; font-family: calibri; } .button:hover { background-color: #111; color: #fff; } .button:active { top: 1px; } .small.button, .small.button:visited { font-size: 11px } .button, .button:visited, .medium.button, .medium.button:visited { font-size: 13px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); } .medium.button, .medium.button:visited { font-size: 14px; padding: 8px 14px 9px; } .large.button, .large.button:visited { font-size: 34px; padding: 8px 14px 9px; } .pink.button, .magenta.button:visited { background-color: #e22092; } .pink.button:hover { background-color: #c81e82; } .green.button, .green.button:visited { background-color: #91bd09; } .green.button:hover { background-color: #749a02; } .red.button, .red.button:visited { background-color: #e62727; } .red.button:hover { background-color: #cf2525; } .orange.button, .orange.button:visited { background-color: #ff5c00; } .orange.button:hover { background-color: #d45500; } .blue.button, .blue.button:visited { background-color: #2981e4; } .blue.button:hover { background-color: #2575cf; } .yellow.button, .yellow.button:visited { background-color: #ffb515; } .yellow.button:hover { background-color: #fc9200; }

ثم قم بتسجيل القالب

الآن قمت بإضافة عدد من الأزرار في المدونة الخاص بك، دعونا نرى كيفية استخدامها.

طريقة الإستخدام :

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

أثناء تحرير التدوينة انقر فوق علامة التبويب HTML
إختر الزر الذي تود إضافته إلى تدوينتك و ضعه في الHtml
إستبدل
LINK TEXT HERE
بإسم الزر و
LINK HERE
برابط الزر

الكود الخاص بالأزرار ذات الحجم الكبير :

كود:
<center><a href="LINK HERE" class="large button pink" >LINK TEXT HERE</a></center> <center><a href="LINK HERE" class="large button blue" >LINK TEXT HERE</a></center> <center><a href="LINK HERE" class="large button green" >LINK TEXT HERE</a></center> <center><a href="LINK HERE" class="large button orange" >LINK TEXT HERE</a></center> <center><a href="LINK HERE" class="large button red" >LINK TEXT HERE</a></center> <center><a href="LINK HERE" class="large button yellow" >LINK TEXT HERE</a></center>

الكود الخاص بالأزرار ذات الحجم المتوسط :

كود:
<center><a href="LINK HERE" class="medium button pink" >LINK TEXT HERE</a></center> <center><a href="LINK HERE" class="medium button blue" >LINK TEXT HERE</a></center> <center><a href="LINK HERE" class="medium button green" >LINK TEXT HERE</a></center> <center><a href="LINK HERE" class="medium button orange" >LINK TEXT HERE</a></center> <center><a href="LINK HERE" class="medium button red" >LINK TEXT HERE</a></center> <center><a href="LINK HERE" class="medium button yellow" >LINK TEXT HERE</a></center>

لا تنسى إستبدال ال

LINK TEXT HERE

بإسم الزر و

LINK HERE

برابط الزر

آمل أن تكون قد إستفدت من هذا الشرح :) :) نهارك سعيد

المصدر : مدونة الطريق