تحميل تطبيق استعادة الصور والفيديو DiskDigger Pro اصدار كامل مجانا للاندرويد

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

السلام عليكم ورحمة الله وبركاته 
الساده اصدقاء موقعكم تكنولوجيا عربى 
تحدثنا سويا فى مواضيع سابقه عن بداية مشروع خاص بك وتحقيق ربح مادى منه وهو التدوين على منصة بلوجر . ويمكنك الاطلاع على المواضيع التاليه لتكتمل السلسه لديك.

1 - انشاء مدونة بلوجر

2 - هديه مجانيه دومين com.  مجانى

3 - كتابة اول موضوع فى مدونة بلوجر

واليوم ان شاء الله سنضيف ازرار التحميل والمعاينه للبلوجر بشكل احترافى جدا كى تكون متميز بين المدونين 
فضلا تابع معى : 

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

1- من لوحة التحكم >> قالب >> تحرير HTML

2- خذ نسخة احتياطية لقالب المدونة قبل اجراء اي تغير

3- قم بالبحث عن الكود التالي بالاستعانة بلوحة التحكم (CTRL+F)

4- قم بالبحث عن الكود ]]></b:skin> واضف فوقه مباشراً الكود التالي

 #wrap {
    margin: 20px auto;
    text-align: center;
}

.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- اضف الكود التالي بداخل الموضوع في تبويب 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>

يمكن استخدام زر واحد فقط بنسخ كود واحد داخل HTML بدلا من نسخ الكودين

نلتقى سويا باذن الله فى مواضيع اخرى.

طابت اوقاتكم بالفائده

محبكم محمد دويدار موقع تكنولوجيا عربى

تعديل المقال