طريقة إضافة أزرار المعاينة والتحميل بطريقة جديدة

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

معاينة اضغط للمعاينة

شرح طريقة تركيب هذه الإضافة

1. أدخل الى لوحة التحكم الخاصة بمدونتك في بلوجر
2. إختر المظهر
3. ثم تحرير HTML

الشيء المهم قبل تنفيذ أي شيء هو وجوب وجود هذا الكود font-awesome على مدونتك
لذلك عليك القيام بهذا:

• البحث عن هذا الكود

 <head/>

• إضافة هذا الكود

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/> 

• ثم نبحث عن هذا الوسم

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

طريقة إستخدام الإضافة

إنتقل الى وضع 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>

الآن عليك القيام ببعض التخصيصات التي تتناسب مع منشورك

• ضع رابط المعاينة مكان الرمز#
• استبدل الكلمات  "بالعربية" الى ما يناسبك

تعديل المقال