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

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

أحبائي في درسنا اليوم سوف نتعرف على طريقة تركيب زر المعاينة وزر التحميل لمدونات بلوجر بشكل أحترافي بحيث يضفي على مدونتك لمسة من الجمالية والإحترافية .

للمعاينة أنقر هنا

- طريقة التركيب :

1- ادخل إلى مدونتك ثم اختر لوحة التحكم .

2- بعد ذلك اختر قالب >> تحرير قالب .

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

4- ضع الكود التالي فوقه :

 #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 {
    left: 100%;
    margin-left: -45px;
    background-color: #fdfdfd;
    color: #0099cc;
}

.btn-slide2:hover span.circle2 {
    color: #efa666;
}

.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
    left: 40px;
    opacity: 0;
}

.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
    opacity: 1;
    left: 40px;
}

.btn-slide span.circle, .btn-slide2 span.circle2 {
    display: block;
    background-color: #0099cc;
    color: #fff;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    left: 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;
    left: 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;
    left: 80px;
}

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    left: 80px;
    opacity: 0;
}

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    color: #fff;
} 

5- احفظ القالب .

6-  طريقة اسخدام زر المعاينة  أو زر التحميل في مشاركاتك ،  استخدم  كود  زر المعاينة  أو كود  زر التحميل في وضعية  HTML :

كود المعاينة 

 <div id="wrap">
<a href="هنا ضع رابط توجيه المعاينة" class="btn-slide" target="_blank">
  <span class="circle"><i class="fa fa-rocket"></i></span>
  <span class="title">للمعاينة</span>
  <span class="title-hover">أنقر هنا</span>
</a> 

كود التحميل

 <a href="هنا ضع رابط توجيه التحميل" class="btn-slide2" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">للتحميل</span>
  <span class="title-hover2">أنقر هنا</span>
</a>
</div> 

وأخيراً أترككم برعاية الله وتوفيقه