اليوم اقدم لكم ازرار بسيطة لمدونات بلوجر وهي ازرار مهمة جدا لمدونة بلوجر وهي تضفي جمالية لمدونتك
طريقة تركيب الازرار
توجه الى بلوجر > تم تحرير html
2- ابحث عن <head> و اضف الكود التالي تحته مباشرة
<link href='http://fonts.googleapis.com/earlyaccess/droidarabickufi.css' rel='stylesheet' type='text/css'/>
<link href='https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
3- بعد ذالك ابحث عن ]]></b:skin> و اضف اكود التالي فوقه مباشرة
/*--------anamudwn-buttons-----------*/
.button {
float: right;
list-style: none;
text-align: center;
width: 95%;
margin: 10px;
padding: 2px;
font-size: 14px;
clear: both;
-webkit-box-reflect: below -3px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(75%,transparent),to(rgba(255,255,255,0.4)));
}
.button li {
display: inline;
margin: 0;
padding: 0;
}
.download-button {
color: #fff;
background-color: #3498db;
border-left: solid 1px #6fbaec;
box-shadow: inset 0px 1px 0px #73b0d8, 0px 6px 0px #2980b9;
}
.demo-button {
color: #fff;
background-color: #2ecc71;
border-left: solid 1px #78e0a4;
box-shadow: inset 0px 1px 0px #6ccc95, 0px 6px 0px #27ae60;
}
.eror-button {
color: #fff;
background-color: #e74c3c;
border-left: solid 1px #ee897f;
box-shadow: inset 0px 1px 0px #e98a80, 0px 5px 0px #c0392b;
}
.warning-button {
color: #fff;
background-color: #e67e22;
border-left: solid 1px #f0ab6e;
box-shadow: inset 0px 1px 0px #e3a36a, 0px 6px 0px #d35400;
}
.files-button {
color: #fff;
background-color: #3A4247;
border-left: solid 1px #2C3235;
box-shadow: inset 0px 1px 0px #3A4247, 0px 6px 0px #292E32;
}
.demo-button,.download-button,.warning-button,.files-button,.eror-button {
padding: 10px 20px;
border-radius: 3px;
font-size: 13px;
text-decoration: none;
position: relative;
font-family: Droid Arabic Kufi;
}
.demo-button:hover,.download-button:hover,.warning-button:hover,.files-button:hover,.eror-button:hover{
top:7px;color:#fff;background-image:linear-gradient(rgb(44,160,202) 0%, rgb(62,184,229) 100%);box-shadow:inset 0px 1px 0px #ecf0f1, 0px 1px 0px 0px #7f8c8d;text-shadow:0px 1px 1px rgba(255,255,255,0.3);
text-decoration: none;
}
.demo-button:visited,.download-button:visited,.warning-button:visited,.files-button:visited,.eror-button:visited {color:#fff;}
.demo-button:before {
content: '\f06e';
display: inline-block;
margin-left: 5px;
line-height: 24px;
color: #FFFFFF;
font-family: fontawesome;
padding-left: 10px;
border-left: 2px solid #aaa;
}
.download-button:before {
content: '\f019';
display: inline-block;
margin-left: 5px;
line-height: 24px;
color: #FFFFFF;
font-family: fontawesome;
padding-left: 10px;
border-left: 2px solid #bbb;
}
.warning-button:before {
content: '\f12a';
display: inline-block;
margin-left: 5px;
line-height: 24px;
color: #FFFFFF;
font-family: fontawesome;
padding-left: 10px;
border-left: 2px solid #bbb;
}
.files-button:before {
content: '\f016';
display: inline-block;
margin-left: 5px;
line-height: 24px;
color: #FFFFFF;
font-family: fontawesome;
padding-left: 10px;
border-left: 2px solid #bbb;
}
.eror-button:before {
content: '\f119';
display: inline-block;
margin-left: 5px;
line-height: 24px;
color: #FFFFFF;
font-family: fontawesome;
padding-left: 10px;
border-left: 2px solid #bbb;
}
طريقة استعمال الازرار
4- اثناء كتابتك للتدونة انتقل الى وضع HTML و اضف الكود التالي
<ul class="button">
<li><a class="download-button" href="#">تحميل </a></li>
<li><a class="demo-button" href="#">معاينة</a></li>
<li><a class="files-button" href="#">رفع الملف</a></li>
<li><a class="eror-button" href="#">خطأ</a></li>
<li><a class="warning-button" href="#">تنبيه</a></li>
</ul>
ادا كنت تريد ان تستعمل زر واحد فقط احدف باقي الاكواد مثلا اريد استعمال زر التحميل يصبح الكود كالتالي :
<ul class="button">اتمنى ان يكون الموضوع قد نال اعجابكم
<li><a class="download-button" href="#">تحميل </a></li>
</ul>
شكلها جميل جدا مشكور
ردحذفشكرا على مرورك
ردحذف