|
|
|
|
أدوات الموضوع | انواع عرض الموضوع |
02-11-2013, 11:55 AM | #1 |
مدون نشيط
تاريخ التسجيل: Jan 2013
المشاركات: 176
|
أضف أزرار جميلة لمدونتك بتقنية الcss
من صاحب مدونة الطريق إلى أحلى منتدى جلبت لكم اليوم طريقة لإضافة أزرار جذابة و جميلة بتقنية الcss لمدونة البلوجر. توجد 6 ألوان مختلفة و هي (الوردي والأخضر والأزرق والأحمر والبرتقالي والأصفر) و بحجمين (كبيرة ومتوسطة). يمكنك إضافة هذه الأزرار في 2 خطوات إلى مدوتنك كما أن إستخدامها سهل للغاية. معاينة : Pink ButtonGreen 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 في الأسفل يحتوي على جميع الأزرار فقط اتبع الخطوات التالية لاستخدامها أثناء التدوين
الكود الخاص بالأزرار ذات الحجم الكبير : كود:<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/ ملاحظة : التدوين هيا هواية فإذ كنت ممن يدونون من أجل كسب الأموال فستكون مدونتك فاشلة |
مواقع النشر (المفضلة) |
الكلمات الدلالية (Tags) |
لمدونتك, أزرار, الcss, بتقنية, جميلة |
الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1) | |
أدوات الموضوع | |
انواع عرض الموضوع | |
|
|
المواضيع المتشابهه | ||||
الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
أزرار المواقع الإجتماعية روعة أعجبتني,,,, | cheb-bilal | إضافات وأدوات بلوجر | 5 | 05-11-2013 05:02 PM |
أزرار المشاركة : زر أعجبني، tweeter + التوصية على جوجل | admin | إضافات وأدوات بلوجر | 4 | 12-25-2012 10:38 AM |
قائمة اضافات جميلة جدا ! | بنت دجلة | إضافات وأدوات بلوجر | 14 | 09-13-2012 11:14 AM |
أزرار دات فقاقيع متحركة وبتقنية css لمدونات بلوجر | shoubed | إضافات وأدوات بلوجر | 13 | 09-07-2012 12:48 AM |
أزرار تابعني على يوتوب،فيسبوك،تويتر و الخلاصة | youness017 | إضافات وأدوات بلوجر | 2 | 09-01-2012 02:37 PM |
الساعة الآن 04:44 AM - بتوقيت جرينتش
المعهد غير مسؤول عن أي اتفاق تجاري أو
تعاوني بين الأعضاء فعلى كل شخص تحمل مسؤولية نفسه تجاه ما يقوم به من بيع وشراء وإتفاق وإعطاء معلومات مدونته التعليقات المنشورة لا تعبر عن رأي معهد خبراء البلوجر ولا نتحمل أي مسؤولية قانونية حيال ذلك (ويتحمل كاتبها مسؤولية النشر) |