رئيسية المعهد
رئيسية المعهد  تواصل معنا  حقوق الملكية الفكرية  اربط مدونتك بنا  محول أكواد أدسنس

 
قديم 02-11-2013, 11:55 AM   #1
Jaabiriovic
مدون نشيط
 
تاريخ التسجيل: Jan 2013
المشاركات: 176
افتراضي أضف أزرار جميلة لمدونتك بتقنية الcss

أنا : 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
برابط الزر


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

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


__________________
مدونة الطريق ~ موقع يهتم بكل ما هو جديد في عالم الحاسوب و البرامج و البلوجر و الشبكات الإجتماعية و كل ما في الإنترنات حيث نقدم دروس حصرية تساعدك على الإحتراف

http://al-tari9.blogspot.com/

ملاحظة : التدوين هيا هواية فإذ كنت ممن يدونون من أجل كسب الأموال فستكون مدونتك فاشلة
من مواضيع Jaabiriovic

الدعم العربي

Jaabiriovic غير متواجد حالياً   رد مع اقتباس

مركز رفع موسوعة العربية
قديم 02-12-2013, 09:33 PM   #2
mint12
مدون جديد
 
تاريخ التسجيل: Jul 2012
المشاركات: 67
افتراضي رد: أضف أزرار جميلة لمدونتك بتقنية الcss

أنا : mint12




اكثر من رائع اخى

الدعم العربي

mint12 غير متواجد حالياً   رد مع اقتباس
قديم 02-13-2013, 12:38 PM   #3
Mr.Dawly
مدون جديد
 
تاريخ التسجيل: Dec 2012
المشاركات: 54
افتراضي رد: أضف أزرار جميلة لمدونتك بتقنية الcss

أنا : Mr.Dawly




الموضوع مش منسق والاكواد داخله فى بعضها ..

واعذرنى ع النقد بس الموضوع نرفزنى

الدعم العربي

Mr.Dawly غير متواجد حالياً   رد مع اقتباس
إضافة رد

مواقع النشر (المفضلة)

الكلمات الدليلية (Tags)
لمدونتك, أزرار, الcss, بتقنية, جميلة


 
أدوات الموضوع
انواع عرض الموضوع

ضوابط المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

كود [IMG]متاحة
كود HTML معطلة



المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
أزرار المواقع الإجتماعية روعة أعجبتني,,,, 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





لتصفح أفضل وللاستفادة القصوى من خصائص المعهد ننصحكم باستعمال :

Powered by vBulletin™ Version 3.8.7
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved. منتديات
new notification by 9adq_ala7sas
Developed By Marco Mamdouh
معهد خبراء بلوجر - 2012 Google
أعلن على المعهد : اتصل بنا - منتدي كنوز - الدعم العربي - قوالب بلوجر - او او انيمي
رئيسية المعهد
الساعة الآن 07:20 PM - بتوقيت جرينتش
المعهد غير مسؤول عن أي اتفاق تجاري أو تعاوني بين الأعضاء
فعلى كل شخص تحمل مسؤولية نفسه تجاه ما يقوم به من بيع وشراء وإتفاق وإعطاء معلومات مدونته
التعليقات المنشورة لا تعبر عن رأي معهد خبراء البلوجر ولا نتحمل أي مسؤولية قانونية حيال ذلك
(ويتحمل كاتبها مسؤولية النشر)