[Jaabiriovic]

من صاحب مدونة الطريق إلى أحلى منتدى جلبت لكم اليوم طريقة لإضافة أزرار جذابة و جميلة بتقنية ال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() 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

برابط الزر


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

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