القائمة الرئيسية

الصفحات

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

إضافة أزرار المعاينة والتحميل في BLOGGER 2018

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

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

  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>
الآن عليك القيام ببعض التخصيصات التي تتناسب مع منشورك
  • ضع رابط المعاينة مكان الرمز#
  • استبدل الكلمات  "بالعربية" الى ما يناسبك
ℹ️ حقوق الملكية الفكرية واخلاء المسؤولية ☟
ملاحظة مهمة جدا:
تبرئة للذمة أمام الله أولا ثم امام الجميع ثانيا ، فإننا نصرح بأننا قمنا بطرح هذا الموضوع ليستفيد منه الزوار الكرام من جانبه الايجابي فقط، لأننا لسنا على دراية بما تحتويه الملفات الاخرى من محتوى ضار او غير اخلاقي.
و لو تبين لنا الأمر فاننا سنقوم بحذف الموضوع و الاعتذار للجميع
كما نوصي أي شخص له دراية او ملاحظة بخصوص أي محتوى مسيئ بأن يقوم بتنبيهنا في صندوق التعليقات (كفاعل خير و ناصح جزاه الله)
كما أن موقع الجعبة التقنية غير مسؤول عن التطبيقات و لا على المحتوى الذي يتم عرضه داخلها و لا عن أي تغييرات قد تطرأ عليها مستقبلا بعد طرحها للزائر لتحميلها والإستفادة منها.
هدفنا هو نشر المعلومة لعامة الناس بالمجان ،كما حصلنا عليها بدورنا في مواقع أخرى
حقوق الملكية الفكرية للغير
نحن لم نقم بأي تعديل لهذا الملف وتم كتابة المقال
دون المساس بحقوق الآخرين

نحن لا نشجع على الترويج للمحتوى المهكر او المقرصن او ما يسيء للاخرين
نحن لا ندعي امتلاكنا للتطبيقات و البرامج المعروضة على الموقع و لا لحقوقها
نحن نقوم بكتابة مقال تقني عن التطبيقات و البرامج التي نراها ذات منفعة للمستخدم و نتيح له امكانية تحميلها من موقعها الرسمي.
المقالات المنشورة على الموقع هي ملك لمدونة الجعبة التقنية ✍
نطلب من كل من أسأنا له عن غير قصد أن يتصل بنا لتصحيح الخطأ مع تقديمنا اعتذارا له⁦ ❤️⁩
هل اعجبك الموضوع :

تعليقات