اضافات بلوجر تعديل أزرار التحميل والمعاينة بشكل جميل واحترافى

السلام عليكم 

اليوم نضع إضافة مميزة وهي تعديل أزرار التحميل والمعاينة

التي تستعمل بكثرة في المدونات لعرض معاينة وتحميل

طريقة اضافة تاثير على الازرار لتصبح اكثر جادبية على شكل زر جميل واحترافي ، ولكن هل تسالت كيف تقوم بذلك على مدونتك وبطريقه بسيطه جدا ؛ بازن الله فى هذا الشرح سوف نقدم لكطريقة عمل هذة الأزرار على مدونتك بسهولة تامه فقط تابع الشرح وطبق جميع الخطوات التالية :

طريقه التركيب:

1. ندخل الى لوحة تحكم بلوجر
2. نختار المظهر
3. ثم تحرير html
4. نبحث عن الوسم <head/> ونضيف الكود التالي فوقة :

<link href=’//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css’ rel=’stylesheet’/>

الان وبعد اضافة الكود السابق

نقوم بالبحث عن الوسم]]></b:skin>

ونضيف الكود التالي فوقة مباشرة:

#wrap {
    margin: 20px auto;
    text-align: center;
}
#wrap br {
    display: none;
}
.btn-slide, .btn-slide2 {
    position: relative;
    display: inline-block;
    height: 50px;
    width: 200px;
    line-height: 50px;
    padding: 0;
    border-radius: 50px;
    background: #fdfdfd;
    border: 2px solid #0099cc;
    margin: 10px;
    transition: .5s;
}
.btn-slide2 {
    border: 2px solid #efa666;
}
.btn-slide:hover {
    background-color: #0099cc;
}
.btn-slide2:hover {
    background-color: #efa666;
}
.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
    right: 100%;
    margin-right: -45px;
    background-color: #fdfdfd;
    color: #0099cc;
}
.btn-slide2:hover span.circle2 {
    color: #efa666;
}
.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
    right: 40px;
    opacity: 0;
}
.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
    opacity: 1;
    right: 40px;
}
.btn-slide span.circle, .btn-slide2 span.circle2 {
    display: block;
    background-color: #0099cc;
    color: #fff;
    position: absolute;
    float: right;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    right: 0;
    transition: .5s;
    border-radius: 50%;
}
.btn-slide2 span.circle2 {
    background-color: #efa666;
}
.btn-slide span.title,
  .btn-slide span.title-hover, .btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    position: absolute;
    right: 90px;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    font-weight: bold;
    color: #30abd5;
    transition: .5s;
}
.btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    color: #efa666;
    right: 80px;
  }
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    right: 80px;
    opacity: 0;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    color: #fff;
}

وبعد ذلك قم بحفظ المظهر ليتم حفظ الاكواد

طريقه اظهار الازرار داخل المواضيع:

عندما تقوم بكتابه موضوع وتريد إظهار الازرار ؛ فقط عليك الانتقال الى تحرير html داخل الموضوع ومن ثم لصق الكود التالي تحت النص الذي تريد عرض الازرار تحته

 <div id=”wrap”>
<a href=”هنا ضع رابط المعاينه” class=”btn-slide”>
  <span class=”circle”><i class=”fa fa-rocket”></i></span>
  <span class=”title”>معاينة </span>
  <span class=”title-hover”>اضغط هنا</span>
</a>
</div>
<div id=”wrap”>
<a href=”هنا ضع رابط التحميل” class=”btn-slide2″>
  <span class=”circle2″><i class=”fa fa-download”></i></span>
  <span class=”title2″>تحميل</span>
  <span class=”title-hover2″>اضغط هنا</span>
</a>
</div>