كلنا يستخدم الروابط فى تدويناتنا على بلوجر , وهناك روابط لها خصوصيه ولها أهميه كبيره , ويبحث الكثير منا عن وسيله ليجعل هذه الروابط متميزه , وذلك مثل إقرا المزيد والتعليق والمعاينات وما إلى غير ذلك .
تستطيع عمل هذه الروابط على شكل أزرار جميلة المظهر بتأثير CSS رائع وبأشكال متعدده لتختار ما يناسبك منها
والآن عندما ترغب بإظهار أى رابط على شكل زر فقط عدل فى كود الرابط
فالرابط فى الأساس عند التعديل على HTML الخاص بالتدوينه نجده بالشكل التالى
تستطيع عمل هذه الروابط على شكل أزرار جميلة المظهر بتأثير CSS رائع وبأشكال متعدده لتختار ما يناسبك منها
كيف تحصل على هذه الأزرار
إذهب إلى أكواد HTML الخاصه بقالب مدونتك وفقط قم بالبحث عن الكود التالىوقبله مباشرة ضع الكود التالى]]></b:skin>
ثم قم بحفظ القالب/*Gzero Buttons*/
.nw-btn {
border-image: none;
border-radius: 4px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
display: inline-block;
font-size: 13px;
font-family: Arial;
line-height: 20px;
margin: 0;
padding: 4px 12px;
text-align: center;
vertical-align: middle;
cursor:pointer;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-style: solid;
border-width: 1px;
color: #FFF !important;
text-decoration: none !important;
transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
-moz-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
-webkit-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
-o-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
}
.nw-btn:hover {
text-decoration: none !important;
}
.nw-btn:active {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
}
/*Blanco*/
.nw-btn.white {
background: #F5F5F5 ;
background-image: linear-gradient(bottom, #E6E6E6 0%, #FFFFFF 100%) ;
background-image: -o-linear-gradient(bottom, #E6E6E6 0%, #FFFFFF 100%) ;
background-image: -moz-linear-gradient(bottom, #E6E6E6 0%, #FFFFFF 100%) ;
background-image: -webkit-linear-gradient(bottom, #E6E6E6 0%, #FFFFFF 100%) ;
background-image: -ms-linear-gradient(bottom, #E6E6E6 0%, #FFFFFF 100%) ;
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #E6E6E6),color-stop(1, #FFFFFF)) ;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) #B3B3B3 !important;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75) !important;
color: #333 !important;
}
.nw-btn.white:hover {background: #E6E6E6 ;}
/*Azul*/
.nw-btn.blue {
background: #49AFCD;
background-image: linear-gradient(bottom, #2F95B4 0%, #5BC0DE 100%);
background-image: -o-linear-gradient(bottom, #2F95B4 0%, #5BC0DE 100%);
background-image: -moz-linear-gradient(bottom, #2F95B4 0%, #5BC0DE 100%);
background-image: -webkit-linear-gradient(bottom, #2F95B4 0%, #5BC0DE 100%);
background-image: -ms-linear-gradient(bottom, #2F95B4 0%, #5BC0DE 100%);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #2F95B4),color-stop(1, #5BC0DE));
}
.nw-btn.blue:hover {background:#2F96B4;}
/*Verde*/
.nw-btn.green {
background: #5BB75B;
background-image: linear-gradient(bottom, #51A351 0%, #62C462 100%);
background-image: -o-linear-gradient(bottom, #51A351 0%, #62C462 100%);
background-image: -moz-linear-gradient(bottom, #51A351 0%, #62C462 100%);
background-image: -webkit-linear-gradient(bottom, #51A351 0%, #62C462 100%);
background-image: -ms-linear-gradient(bottom, #51A351 0%, #62C462 100%);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #51A351),color-stop(1, #62C462));
}
.nw-btn.green:hover {background:#51A351;}
/*Naranja*/
.nw-btn.orange {
background: #FAA732 ;
background-image: linear-gradient(bottom, #F89306 0%, #FBB450 100%) ;
background-image: -o-linear-gradient(bottom, #F89306 0%, #FBB450 100%) ;
background-image: -moz-linear-gradient(bottom, #F89306 0%, #FBB450 100%) ;
background-image: -webkit-linear-gradient(bottom, #F89306 0%, #FBB450 100%) ;
background-image: -ms-linear-gradient(bottom, #F89306 0%, #FBB450 100%) ;
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #F89306),color-stop(1, #FBB450)) ;
}
.nw-btn.orange:hover {background: #F89406 ;}
/*Rojo*/
.nw-btn.red {
background: #DA4F49 ;
background-image: linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%) ;
background-image: -o-linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%) ;
background-image: -moz-linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%) ;
background-image: -webkit-linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%) ;
background-image: -ms-linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%) ;
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #BD362F),color-stop(1, #EE5F5B)) ;
}
.nw-btn.red:hover {background: #BD362F ;}
/*Finish Gzero Buttons*/
والآن عندما ترغب بإظهار أى رابط على شكل زر فقط عدل فى كود الرابط
فالرابط فى الأساس عند التعديل على HTML الخاص بالتدوينه نجده بالشكل التالى
وعن رغبتنا فى جعله على شكل الزر نجعله بالشكل التالى<a href="#">كلمات الرابط</a>
أى أننا أضفنا الكود التالى إلى الكود الأصلى<a class="nw-btn white" href="#">كلمات الرابط</a>
وها هى أكواد الأزرار بألونها تستطيع أن تختار من بينها اللون المفضل لديكclass="nw-btn white"
<a class="nw-btn white" href="#">زر أبيض</a>
<a class="nw-btn red" href="#">زر أحمر</a>
<a class="nw-btn blue" href="#">زر أزرق</a>
<a class="nw-btn orange" href="#">زر برتقالى</a>
<a class="nw-btn Green" href="#">زر أخضر</a>
وبذلك تكون قد حصلت على أزرار رائعة المظهر وبكل سهوله عن طريق أكواد CSS البسيطه والرائعه .
من يومك وانت مبدع يا ياسو
ردحذفعرب سوفت وير
شكرا
ردحذفhttp://recherchergoogle.blogspot.com/
مشكور على الشرح اخي الكريم ..........
ردحذفhttp://adonia2.blogspot.com/
رائع جداً
ردحذف________________
http://aplaticos.blogspot.com
رائع
ردحذفhttp://mynewfiles.blogspot.com/
http://myebd3at.blogspot.com/
ردحذفمدونة ابداعاتى
إضافة جميلة شكرا لك
ردحذفأحلى برامج
إضافة رائعة شكرا لك
ردحذفأحلى برامج
شكر اخي هل تستطيع اضافة ايقونة للزر
ردحذف