كيف اضافة زر التحميل و زر المعاينة مع تأثير انزلاق على بلوجر

كثيرا الان نلاحظ بعض المواقع التقنية, او المواقع المتخصصة في قوالب بلوجر او الخلفيات نجد أنها تتستخدم أزرار التحميل أو أزرار المعاينة, بشكل جذاب ورائع والتي تجعلنا نستمتع كثيرا بتلك التدوينة, بسبب تلك الازرار التي تبسط كل شئ بضغطة زر واحدة, ونتساءل كيف فعلها؟

مرحبا بك على مدونة برو تقنية للمعلوميات في هذا الموضوع سنتعرف كيف اضافة زر التحميل و زر المعاينة مع تأثير انزلاق, على مدونة بلوجر أو قوالب بلوجر. بطريقة جذابة تجذب بها الزائر, يمكنك فقط تتبع الخطوات التالية:

لتركيب الإضافة يجب عليك الدخول الى الموقع البلوجر ثم تتجه الى لوحة التحكم بعدها تحرير HTML :

1- يجب تركيب كود font-awesome قم بالبحث عن وسم 

</head>

و قم بوضع الكود التالي فوقه

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

2- الان ابحث عن الوسم 

]]></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 {
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: .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: .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;
}

3- الان قم بحفظ القالب من التعديل الذي قمت به

وللاستخدام تلك الازرار المعاينة والتحميل في المواضيع, يمكنك عند كتابة موضوع الانتقال الى HTML ومنها تقوم بإضافة الكود التالي في المكان الذي تريده لتظهر معك الازرار

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

يمكنك استبدل رمز # برابط التحميل Download أو برابط المعاينة Demo وكذلك لديك الاختيار في استبدال الكل من الكلمات المعاينة و التحميل بأي من الكلمات المناسبة لك حسب لغة موقعك

4- لجعل الرابط المعاينة او التحميل في صفحة جديد يمكنك اضافة

target="_blank"
بين الرمز <a و href
مثل :

<div id="wrap">
<a target="_blank" 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 target="_blank" 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>

أتمنى ان اكون قد توفقت في تبسيط الخطوات على قدر المستطاع لاضافة ازرار التحميل و ازرار المعاينة على قوالب بلوجر اذا كان لديك اي استفسار او مشكلة فأخبرنا به في التعليقات