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

السلام عليكم و رحمة الله تعالى زوار و متتبعي مدونة بصمة تقنية في هده التدوينة سوف نتعرف على كيفية اضافة ازرار المعاينة و التحميل بشكل انيق و احترافي و يمكنك معاينة هده الازرار قبل اضافتها الى مدونتك و قبل هدا و داك ادعوك عزيزي القارئ الى الانضام الى صفحتنا على الفيس بوك و هدا يسعدنا

صفتنا على الفيسبوك معاينة

طريقة اضافة الازرار الى المدونة

من لوحة تحكم المدونة قم بالتوجه الى قالب تم تحرير HTML

قم باخد نسخة احتياطية لقالب المدونة قبل القيام باي خطوة تفاديا لاي اخطاء قد تقوم بها 

الان قم بالبحت على الكود التالى عبر الظغط على Ctrl+F

]]></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 #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;
}

حسنا الان و بعد كتابتك لاي تدوينة يمكنك اضافة ازرار التحميل و المعاينة بعد الضغط على تبويب HTML و وضع الكود التالي

<link href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
<link href='//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css' rel='stylesheet'/>
<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>

ملاحظة قم بتغيير ما باللون الاحمر بروابط التحميل و المعاينة و ما باللون الازرق بما يناسبك من الكلام

شارك الموضوع

شاهد مواضيع قد تعجبك ايضا