شرح تركيب أزرار المعاينه والتحميل على بلوجر

 

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

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

 أيضا تجعل من السهل قراءة التدوينه ومعرفة مكان المعاينه والتحميل بدون تعقيدات

 المعاينه والتحميل إضافه  ضروريه لتحسين شكل مدونتك بهذا الشكل بالأسفل

 

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

 

 

 وهذا شرح لكيفية تركيب هذه الإضافه للأزرار

  من خيارات التصميم Html نبحث عن الكود :

</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 {
        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;
    }

👈 إحفظ القالب

الأن عند كتاية تدوينه جديده أضف  إليها

❶كود المعاينه

<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> 

💢 الان عند كتابتك لتدوينه جديده ضع هذه الكودين الاخيرين في المكان اللذي تريده