بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
أضع لكم اليوم مجموعة جميلة جدا من أزرار css التي يمكنك أستخدامها في مواضيع مدونتك وكذلك في الصفحات html
هذه الأيقونات أو الازرار تضيف جمالية وأحترافية للموضوع فمثلا عند أضافة موضوع عن برنامج معينة فبمكنك جعل كلمة
أو عبارة تحميل البرنامج داخل زر
أضافة اليوم متوفرة بعدة ألوان منها أصفر وأزرق وأخضر و بنفسجي وبرتقالي و الأحمر
كذلك متوفرة بحجمين
مقاس كبير
ومقاس بحجم متوسط
هذه بعض الصورة للمعاينة شكل الأيقونات
أيقونات بحجم الكبير
أيقونات بحجم متوسط
طريقة التركيب الأضافة في مدونة البلوجر
توجه للوحة التحكم
تصميم
تحريرhtml
أعمل توسيع للقالب
أبحث عن الكود التالي
]]></b:skin>
وأضف قبله مباشرة
.button, .button:visited {
background: #222 url(http://helperblogger.googlecode.com/svn/overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
font-family: calibri;
}
.button:hover {
background-color: #111;
color: #fff;
}
.button:active {
top: 1px;
}
.small.button, .small.button:visited {
font-size: 11px
}
.button, .button:visited,
.medium.button, .medium.button:visited {
font-size: 15px;
font-weight: bold;
line-height: 1;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}
.medium.button, .medium.button:visited {
font-size: 15px;
padding: 8px 14px 9px;
}
.large.button, .large.button:visited {
font-size: 34px;
padding: 8px 14px 9px;
}
.pink.button, .magenta.button:visited {
background-color: #e22092;
}
.pink.button:hover {
background-color: #c81e82;
}
.green.button, .green.button:visited {
background-color: #91bd09;
}
.green.button:hover {
background-color: #749a02;
}
.red.button, .red.button:visited {
background-color: #e62727;
}
.red.button:hover {
background-color: #cf2525;
}
.orange.button, .orange.button:visited {
background-color: #ff5c00;
}
.orange.button:hover {
background-color: #d45500;
}
.blue.button, .blue.button:visited {
background-color: #2981e4;
}
.blue.button:hover {
background-color: #2575cf;
}
.yellow.button, .yellow.button:visited {
background-color: #ffb515;
}
.yellow.button:hover {
background-color: #fc9200;
}
وأعمل حفظ للقالب
ولأن عند أضافة موضوع معين أو أردت أضافة أيقونة في القائمة الجانبية للمدونة البلوجر
أختر أحد الألون التالية
أكواد الحجم الكبير
<center><a href="ضع هنا الرابط" class="large button pink" >ضع هنا النص</a></center>
<center><a href="ضع هنا الرابط" class="large button blue" >ضع هنا النص</a></center>
<center><a href="ضع هنا الرابط" class="large button green" >ضع هنا النص</a></center>
<center><a href="ضع هنا الرابط" class="large button orange" >ضع هنا النص</a></center>
<center><a href="ضع هانا الرابط" class="large button red" >ضع هنا النص</a></center>
أكواد بحجم المتوسط
<center><a href="ضع هنا الرابط" class="medium button pink" >ضع هنا النص</a></center>
<center><a href="ضع هنا الرابط" class="medium button blue" >ضع هنا النص</a></center>
<center><a href="ضع هنا الرابط" class="medium button green" >ضع هنا النص</a></center>
<center><a href="ضع هنا الرابط" class="medium button orange" >ضع هنا النص</a></center>
<center><a href="ضع هنا الرابط" class="medium button red" >ضع هنا النص</a></center>
أستبدل عبارة ضع النص هنا (بنص تريده أن يظهر على الزر)
أذا أردت أضفتها في الموضوع أستخدم تحريرhtml
بدلا من تأليف
وسلام عليكم ورحمة الله وبركاته
