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

السلام عليكم ورحمة الله تعالى وبركاته

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

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

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

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>

والان قم بتغيير الكلمات “هنا ضع رابط التحميل” و “هنا ضع رابط المعاينه” برابط المعاينه والتحميل الخاص بك