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

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

اضافة ازرار المعاينة والتحميل

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

شاهد أيضاً :-

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

شرح طريقة التركيب

1. توجه لقالب >> تحرير
2. ابحث بإستعمال Ctrl+F عن <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: 0.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: 0.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: 0.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. أضف الكود الآتي بداخل الموضوع في تبويب

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

كل ما عليك بنسخ الكود الاعلى وتغيير # بالرابط المشاهدة او المعاينة