bloggerarchive
247125322047940
تحميل

كيفية اضافة ازرار داخل التدوينيه في بلوجر - بتقنية CSS3



http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2010/02/css3button9.jpg

السلام عليكم!اقدم لكم اليوم درساً لكيفية عمل ازرار تضيفها يدوياً إلى التدوينية يمكنك 

استخدامها كزر تحميل او كزر معاينه لقالب , تحميل قالب كباقي المواقع المشهورة في نشر

قوالب بلوجر وهي بعدة الوان طبعاً جميع الحقوق محفوظة للمصدر الان اترككم لمعاينة هذه الإضافة:


-معاينة الاصافة:


 


-كيفية تركيب الاضافة:
  • اذهب للوحة تحكم مدونتك
  • اضغط على زر القالب
  • ثم تحرير html
  • اضغط متابعه
  •  الان اشر على توسيع القوالب
اضغط ctrl+f و ابحث عن الوسم التالي:

                      ]]></b:skin>                          

و انسخ فوقه مباشرة الكود التالي:

/* Standard Buttons */ a.standard { border: 1px solid rgba(0, 0, 0, .2); color: #fff; display: inline-block; padding: .5em .8em; text-decoration: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); } .standard.red { background: #c60000; background: linear-gradient(top, #c60000 0%, #b20000 100%); background: -moz-linear-gradient(top, #c60000 0%, #b20000 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c60000), color-stop(100%, #b20000)); background: -webkit-linear-gradient(top, #c60000 0%, #b20000 100%); } .standard.orange { background: #f99015; background: linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -moz-linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f99015), color-stop(100%,#f76c0f)); background: -webkit-linear-gradient(top, #f99015 0%,#f76c0f 100%); } .standard.green { background: #30a146; background: linear-gradient(top, #30a146 0%, #249334 100%); background: -moz-linear-gradient(top, #30a146 0%, #249334 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #30a146), color-stop(100%, #249334)); background: -webkit-linear-gradient(top, #30a146 0%, #249334 100%); } .standard.blue { background: #16a4c8; background: linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -moz-linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #16a4c8), color-stop(100%, #1086b6)); background: -webkit-linear-gradient(top, #16a4c8 0%, #1086b6 100%); } .standard.gray { background: #c2c2c2; background: linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -moz-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c2c2c2), color-stop(100%, #aeaeae)); background: -webkit-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); } .standard.dark { background: #464646; background: linear-gradient(top, #464646 0%, #343434 100%); background: -moz-linear-gradient(top, #464646 0%, #343434 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #464646), color-stop(100%, #343434)); background: -webkit-linear-gradient(top, #464646 0%, #343434 100%); } a.standard:hover { color: #fff; opacity: .5 }



  • اضغط حفظ.
الان عند كتابتك لمشاركة عند الوصول للمكان الذي تريد وضع الزر فيه

باعلى صندوق المشاركه تشاهد زر  ( تأليف ,, html ) أضغط على زر html وعد المكان المطلوب انسخ احد الاكواد التاليه:

 
<a href="استبدل هذه الكتبه برابط الزر" class="standard red">الزر الزر الاحمر</a>



<a href="استبدل هذه الكتبه برابط الزر" class="standard orange">الزر البرتقالي</a>



<a href="استبدل هذه الكتبه برابط الزر" class="standard green">الزر الاخضر</a>



<a href="استبدل هذه الكتبه برابط الزر" class="standard blue">الزر الازرق</a>



<a href="استبدل هذه الكتبه برابط الزر" class="standard gray">الزر الرمادي</a>



<a href="استبدل هذه الكتبه برابط الزر" class="standard dark">الزر الاسود</a>

 
استبدل ما بالون الازرق بالرابط الذي ترده ان يفتح عن نقر الشخص على الزر.

استبدل ما باللون الاحمر بالكتابه التي تريده ان تظهر في الزر.




-في الختام:


إذا اعجبك الموضوع و استفدت منه شاركني برأيك ولو بكلمة شكر و لا تنسى

الضغط على ازرار المواقع الاجتماعية ادناه كما يمكنك الاشتراك

في النشرة البريدية للمدونة ليصل لك كل جديد إلى ايميلك

او اشترك في قناتنا ع اليتيوب لتكون مطلعا على

جديد الشروحات ويمكنك متابعتنا 

على تويتر ايضا اما الان

فأستودعكم الله الذي لا تضيع ودائعه.



ما رأيك: 
ويب 4140775895653925418

إرسال تعليق تعليقات الموقع

  1. الف شكر يا غالى بجد اضافة روعة بارك الله فيك

    ردحذف

لاضافة صورة او فيديو في التعليق ضع رابط الفيديو بين الوسمين كالتالي:
[video] رابط الفيديو [/video]
[img ]ربط الصور [/img]
للتعليق اضغط على مربع التعليق ياسم و اختر : الاسم / عنوان URL ثم اكتب اسمك فقط اذا اردت واضغط الاستمرار.

emo-but-icon

الصفحة الرئيسية item

اشترك ليصلك جديد الموقع.

تابعنا على تويتر

أنضم للموقع!