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

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

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

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


1- لتركيب الإضافة الدخول للبلوجر ولوحة تحكم بالمدونة ومن ثم تحرير HTML :
2- ومن ثم يجب تركيب كود font-awesome قم بالبحث عن وسم </head> و ضف الكود التالي فوقه
       <link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

3- الان ابحث عن الوسم ]]></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;
}
4- الان قم بحفض تعديل الذي قمت به ولكي تتمكن من استخدام الازرار في المواضيع عند كتابة موضوع انتقل الى وضع 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>
5- استبدل رمز # برابط المعاينة و نفس الشيئ في التحميل كما يمكنك استبدال كل من الكلمات العربية بالكلمات المناسبة لك حسب لغة موقعك.

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

تعليقات