القائمة الرئيسية

الصفحات

تعديل المشاركة

مدونة خبير المعلوميات

tuto
(0)

مدونة خبير المعلوميات

Link to خبير المعلوميات

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

Posted: 13 Sep 2018 01:45 PM PDT

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

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

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


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- استبدل رمز # برابط المعاينة و نفس الشيئ في التحميل كما يمكنك استبدال كل من الكلمات العربية بالكلمات المناسبة لك حسب لغة موقعك.

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

تعليقات

إرسال تعليق