أزرار CSS3 لمدونمرحبا الأصدقاء، واليوم لدي للافراج عن أزرار DIY حزمة مدون التي يتم تحويلها من أزرار DIY. تم إنشاء نسخة وورد هذا الزر اليكس من kolakube.com. إن الشيء العظيم حول هذه الأزرار (إلى جانب مظهرهم) هو أنها تم إنشاؤها مع CSS3، أحدث التكرار من لغة CSS الترميز. وهذا يعني، أي من هذه الأزرار سهلة لتخصيص. حتى إذا كان لديك فهم محدود لكيفية عمل CSS، وتغيير الألوان والأساليب في أي من هذه الأزرار هو نسيم. الأزرار وورد لديها 30 أزرار ولكن هنا لدينا فقط 24 أزرار لأن الأزرار الستة الأخيرة تعمل مع الرموز على شبكة الإنترنت الخط العادي الذي لا يعتمد مدون لذلك، وهنا يمكنك إضافة 24 أزرار DIY لبلوق الخاص بك مدون. دعونا نرى كيفية إضافة هذه الأزرار لبلوق الخاص بك.
شاهد
كود css
/* 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 }
لاضافة كود css ابحث فى القالب عن ]]></b:skin> ثم اضف فوقه مباشر
كود html
<a href="http://www.YOUR-LINK-HERE.com/" class="standard red">Red Button</a>
<a href="http://www.YOUR-LINK-HERE.com/" class="standard orange">Orange Button</a>
<a href="http://www.YOUR-LINK-HERE.com/" class="standard green">Green Button</a>
<a href="http://www.YOUR-LINK-HERE.com/" class="standard blue">Blue Button</a>
<a href="http://www.YOUR-LINK-HERE.com/" class="standard gray">Gray Button</a>
<a href="http://www.YOUR-LINK-HERE.com/" class="standard dark">Dark Button</a>
اضافة كود html فى بلوجر
الذهب اللى لوحه التحكم ثم
التخطيط
ثم
إضافة أداة
:: خاتمة ::
إذا أعجبتكم الإضافة لا تبخلوا علينا من الضغط على زر لايك الفايسبوك و شكرا
Comments
Post a Comment
يمنع نشر التعليقات ذات الروابط الدعائية أو تعليقات بإسلوب غير لائق أو التى تحتوى على معلومات شخصية كالبريد الإلكترونى
أعتذر عن الرد على طلبات التوزيع لضيق الوقت أو التبادل الإعلانى
لتصلك إشعارات ردود هذا الموضوع على البريد الإلكترونى أضف علامة بالمربع بجوار كلمة "إعلامى"