السلام عليكم ورحمة الله وبركاته مرحبا بكم مساهدوا موقع بيكو تك اليوم سنقدم لكم كيفية اضافة رز التحميل والمعاينة بطريقة احترافية
نبذة عن الاضافة
كل منا يقدم محتوي عن التقنية يلزمه ازرار المعاينة والتحميل لتجعل المواضيع اكثر توافق ويتصدر في نتائج البحث ويجعل شكل المواضيع الخاصة به مميزة
مميزات الإضافة
- تحسين شكل المواضيع
- شكل احترافي عند وضع زر الفارة
- تزيد من مستوي الارشفة
- تحسن من تواجد الموضوع غي البحث
- سهولة الحصول علي الروابط
طريقة تركيب الاضافة في بلوجر
الجزء الاول:-
- الذهاب الي وحدة التحكم في بلوجر
- ثم تذهب تلي المظهر
- ثم تضغط علي تعديل html
- ثم تقوم بالبحث عن
]]></b:skin>
الصق فوقه هذا الكود
#wrap {margin: 10px 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 #1495bb;margin: 10px;transition: .5s;}
.btn-slide2 {border: 2px solid #1495bb;}
.btn-slide:hover {background-color: #1495bb;}
.btn-slide2:hover {background-color: #a8c93d; border-color: #a8c93d;}
.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {left: 100%;margin-left: -45px;background-color: #fdfdfd;color: #1495bb;}
.btn-slide2:hover span.circle2 {color: #a8c93d;}
.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: #1495bb;color: #fff;position: absolute;float: left;margin: 5px;line-height: 42px;height: 40px;width: 40px;top: -2px;left: 0;transition: .5s;border-radius: 50%;}
.btn-slide2 span.circle2 {background-color: #1495bb;}
.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: #1495bb;transition: .5s;top:-2px}
.btn-slide2 span.title2,
.btn-slide2 span.title-hover2 {color: #1495bb;left: 72px;}
.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;}
span.title{left: 70px!important}-:الجزء الثاني
نأتي الي المشاركة التي نريد وضع بها الازرار ونضع الكود الاتي
<div id="wrap"> <a class="btn-slide" href="#" target="_blank"> <span class="circle"><i class="fa fa-eye"></i></span> <span class="title">معاينة القالب</span> <span class="title-hover">اضغط هنا</span> </a> <a class="btn-slide2" href="#" rel="nofollow" target="_blank"> <span class="circle2"><i class="fa fa-download"></i></span> <span class="title2">تحميل مباشر</span> <span class="title-hover2">اضغط هنا</span> </a> </div>والان تمت اضافة الاضافة بنجاح والان يمكنك معاينتهاوشكرا
تعليقات: (0) (يمكنك التعليق برابط صورة او فيديو) إضافة تعليق