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

ابحث فى جوجل

Custom Search

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

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

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 بدلا من نسخ الكودين
نلتقى سويا باذن الله فى مواضيع اخرى.
طابت اوقاتكم بالفائده
محبكم محمد دويدار موقع تكنولوجيا عربى

محمد دويدار

مدون مهتم بجديد التكنولوجيا واخبار التقنيه الحديثه وجديد البرامج واهتم بتطوير محتوى الانترنت

لمتابعتي أو التواصل معي:

يسعدنا رايك كما يسعدنا الرد عليكم
الإبتساماتإخفاء