السلام عليكم!اقدم لكم اليوم درساً لكيفية عمل ازرار تضيفها يدوياً إلى التدوينية يمكنك
استخدامها كزر تحميل او كزر معاينه لقالب , تحميل قالب كباقي المواقع المشهورة في نشر
قوالب بلوجر وهي بعدة الوان طبعاً جميع الحقوق محفوظة للمصدر الان اترككم لمعاينة هذه الإضافة:
-معاينة الاصافة:
الزر الاحمر
الزر البرتقالي
الزر الاخضر
الزر الازرق
الزر الرمادي
الزر الاسود
-كيفية تركيب الاضافة:
- اذهب للوحة تحكم مدونتك
- اضغط على زر القالب
- ثم تحرير 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>
استبدل ما بالون الازرق بالرابط الذي ترده ان يفتح عن نقر الشخص على الزر.
استبدل ما باللون الاحمر بالكتابه التي تريده ان تظهر في الزر.
-في الختام:
إذا اعجبك الموضوع و استفدت منه شاركني برأيك ولو بكلمة شكر و لا تنسى
الضغط على ازرار المواقع الاجتماعية ادناه كما يمكنك الاشتراك
في النشرة البريدية للمدونة ليصل لك كل جديد إلى ايميلك
ايـــــــــة رايكم فى الموضوع
ردحذفمحدش بيرد لية هوه الموضوع وحش ولا ايـــــــــــــة
ردحذفلو فية اى تعليق على الموضوع ارجو ابلاغى فى التعليقات لكى نرتقى بمستوى المدونة