أخر الاخبار

ازرار المعاينة و التحميل لبلوجر متحركة بالوان جذابة

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


 ]]></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 #315270;
    margin: 10px;
    transition: .5s;
}
.btn-slide2 {
    border: 2px solid #ff8400;
}
.btn-slide:hover {
    background-color: #315270;
}
.btn-slide2:hover {
    background-color: #ff8400;
}
.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
    left: 100%;
    margin-left: -45px;
    background-color: #fdfdfd;
    color: #315270;
}
.btn-slide2:hover span.circle2 {
    color: #ff8400;
}
.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: #315270;
    color: #fff;
    position: absolute;
    float: left;
    margin: 3px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    left: 0;
    transition: .5s;
    border-radius: 50%;
}
.btn-slide2 span.circle2 {
    background-color: #ff8400;
}
.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: #315270;
    transition: .5s;
}
.btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    color: #ff8400;
    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;
}

اختياري

#ff8400  غير هذا اللون البرتقالي 
 . بالنسبة لرابط التحميل باللون الذي يتناسب مع مدونتك

#315270  غير هذا اللون الازرق 
 . بالنسبة لرابط المعاينة باللون الذي يتناسب مع مدونتك



html  ضع الكود التالي في صفحة المشاركات بعد الضغط 
  وانسخ والصق الرابط التالي في المكان الذي تريده


<div id="wrap">
<a href="#1" 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="#2" 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>


  ضع مكان هذه النجمة #1رابط الذي تريد عرضه في المعاينة و رابط نجمة #1    بالنسبة لرابط التحميل

تعليقات
ليست هناك تعليقات
إرسال تعليق



    وضع القراءة :
    حجم الخط
    +
    16
    -
    تباعد السطور
    +
    2
    -