كيفية اضافة ازرار داخل التدوينيه في بلوجر - بتقنية CSS3
https://www.techpointblog.com/2012/09/Buttons-Pack-Free-CSS3-Buttons-For-Blogger.html
السلام عليكم!اقدم لكم اليوم درساً لكيفية عمل ازرار تضيفها يدوياً إلى التدوينية يمكنك
استخدامها كزر تحميل او كزر معاينه لقالب , تحميل قالب كباقي المواقع المشهورة في نشر
قوالب بلوجر وهي بعدة الوان طبعاً جميع الحقوق محفوظة للمصدر الان اترككم لمعاينة هذه الإضافة:
-معاينة الاصافة:
-كيفية تركيب الاضافة:
- اذهب للوحة تحكم مدونتك
- اضغط على زر القالب
- ثم تحرير 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>
استبدل ما بالون الازرق بالرابط الذي ترده ان يفتح عن نقر الشخص على الزر.
استبدل ما باللون الاحمر بالكتابه التي تريده ان تظهر في الزر.
-في الختام:
إذا اعجبك الموضوع و استفدت منه شاركني برأيك ولو بكلمة شكر و لا تنسى
الضغط على ازرار المواقع الاجتماعية ادناه كما يمكنك الاشتراك
في النشرة البريدية للمدونة ليصل لك كل جديد إلى ايميلك
او اشترك في قناتنا ع اليتيوب لتكون مطلعا على
جديد الشروحات ويمكنك متابعتنا
على تويتر ايضا اما الان
فأستودعكم الله الذي لا تضيع ودائعه.
الف شكر يا غالى بجد اضافة روعة بارك الله فيك
ردحذف