بسم الله الرحمن الرحيم
والصلاة والسلام على اشرف المرسلين
تحية طيبة عطرة وبعد
إضافة أزرار المعاينة والتحميل بشكل متحرك
نلتقي اليوم وموضوع جميل ومميزوهو عبارة عن اضافة جميلة ومميزة الى مدونة بلوجر ازرار المعاينة والتحميل يشكل متحرك جميلة ومميزة
معاينة الاضافة
طريقة تركيب الاضافة
- اذهب الى لوحة تحكم مدونتك
- اعمل نسخة احتياطية لقالب مدونتك
- قالب
- بالاستعانة ب Ctri+f ابحث عن التالي
]]></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 { left: 100%; margin-left: -45px; background-color: #fdfdfd; color: #0099cc;}
.btn-slide2:hover span.circle2 { color: #efa666;}
.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: #0099cc; color: #fff; position: absolute; float: left; margin: 5px; line-height: 42px; height: 40px; width: 40px; top: 0; left: 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; left: 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; 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;}
هذا الكود هو المسؤول عن شكل الاداة ناتي الان الى كيفية وضع الازار داخل التدوينة
01 - اولا نكتب التدوينة عادي
02 - ثم نعلم المكان المراد وضع الازرار به باي جملة مثلا هنا او اي جملة
03 - نذهب الى الوضع HTML ثم نبحث عن الجملة التي وضعناها ونعلمها ونضع مكانها الكود التالي بعدما نضع مكان الجملتين رابط التحميل و رابط المعاينة الروابط المراد وضعها
<div id="wrap">
<a href="رابط المعاينة" class="btn-slide" target="_blank">
<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" target="_blank">
<span class="circle2"><i class="fa fa-download"></i></span>
<span class="title2">تحميل</span>
<span class="title-hover2">إضغط هنا</span>
</a>
</div>
بالتوفيق للجميع