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

المتابعون!

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

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