القائمة الرئيسية

الصفحات

أزرار 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 فى بلوجر

الذهب اللى لوحه التحكم ثم 

التخطيط 

ثم 

إضافة أداة 

:: خاتمة ::
إذا أعجبتكم الإضافة لا تبخلوا علينا من الضغط على زر لايك الفايسبوك و شكرا

تعليقات

التنقل السريع
    -->