السبت، 17 فبراير 2018

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

ربما زرت بعض المدونات، او اردت تحميل اي شيء من مدونة ما، و لاحضت ان بعض المدونات تعرض روابط التحميل و المعاينة على شكل ازرار و بطريقة رائعة، وربما اردت اضافة هذه أزرار لمدونتك، كما ان هذه الاضافة تطفي لمسة جمالية للمدونة، لذى ففي هذه التدوينة سنقدم لكم نوعان للازرار الاضافة والمعاينة واختر ما يناسبك، الى الشرح كيفية تركيب ازرار المعاينة وتحميل لمدونات بلوجر.
يمكنك معاينة الاضافة من هنا
معاينة اضغط للمعاينة

طريقة تركيب الاضافة 

  1.  الان قم بالدخول الي لوحة تحكم بلوجر
  2. اختر المظهر
  3. ثم انقر علي تحرير HTML 
اولا يجب تركيب كود Font-Awesome ابحث عن <head/> ثم اضف الكود  التالي فوقه
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.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>

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

اهم الاعدادات

استبدل رمز # برابط المعاينة او الملف
استبدل كل من الكلمات العربية بالكلمات الذي تريدها


صلي علي رسول الله

لا تنسا ان تكن من أعضاء المدونة من هنا , إذا واجهتك اي مشكلة لا تترد فى ترك تعليق

اضف تعليقك