02-11-2013, 11:55 AM
|
#1
|
مدون نشيط
تاريخ التسجيل: Jan 2013
المشاركات: 176
|
أضف أزرار جميلة لمدونتك بتقنية الcss
من صاحب مدونة الطريق إلى أحلى منتدى جلبت لكم اليوم طريقة لإضافة أزرار جذابة و جميلة بتقنية الcss لمدونة البلوجر. توجد 6 ألوان مختلفة و هي (الوردي والأخضر والأزرق والأحمر والبرتقالي والأصفر) و بحجمين (كبيرة ومتوسطة). يمكنك إضافة هذه الأزرار في 2 خطوات إلى مدوتنك كما أن إستخدامها سهل للغاية.
معاينة :
Pink Button
Green Button Blue Button
Red Button Orange Button
Yellow Button
طريقة التركيب :
أولا سنضيف كود CSS إلى القالب
كود:
.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 برابط الزر
آمل أن تكون قد إستفدت من هذا الشرح :) :) نهارك سعيد
المصدر : مدونة الطريق
__________________
مدونة الطريق ~ موقع يهتم بكل ما هو جديد في عالم الحاسوب و البرامج و البلوجر و الشبكات الإجتماعية و كل ما في الإنترنات حيث نقدم دروس حصرية تساعدك على الإحتراف
http://al-tari9.blogspot.com/
ملاحظة : التدوين هيا هواية فإذ كنت ممن يدونون من أجل كسب الأموال فستكون مدونتك فاشلة
|
|
|