الرئيسية / البلوجر.blogger / أزرار التحميل والمعاينة بشكل رائع ومميز لمدونات بلوجر

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

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

السلام عليكم ورحمة الله تعالى وبركاته

مرحبا بمتابعي وزوار مدونة الشهادة مع موضوع جديد بعنوان أزرار التحميل والمعاينة بشكل رائع ومميز أزرار التحميل والمعاينة بشكل رائع ومميز لمدونات بلوجر

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

طريقه التركيب:

  1. ندخل الى لوحة تحكم بلوجر
  2. نختار المظهر
  3. تحرير html
  4. نقوم الان بالبحث عن الوسم <head/> ونضيف الكود التالي فوقة 

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

الان وبعد اضافة الكود السابق نقوم بالبحث عن الوسم]]></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;
}

  وبعد ذلك قم بحفظ المظهر ليتم حفظ الاكواد


طريقه اظهار الازرار داخل المواضيع:

عندما تقوم بكتابه موضوع وتريد إظهار الازرار ؛ فقط عليك الانتقال الى تحرير 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>
</div>
<div id=”wrap”>
<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>

والان قم بتغيير الكلمات “هنا ضع رابط التحميل” و “هنا ضع رابط المعاينه” برابط المعاينه والتحميل الخاص بك  

Your Website Title

شاهد أيضاً

تحميل قالب Perfect Mag لمدونة بلوجر المعرب

تحميل قالب Perfect Mag لمدونة بلوجر المعرب free-blogger-templates السلام عليكم ورحمك الله تعالى وبركاته مرحبا …

تحميل قالب GM لمدونة بلوجر blogger متعدد الاختصاصات اخر نسخة

تحميل قالب GM لمدونة بلوجر blogger متعدد الاختصاصات السلام عليكم ورحمك الله تعالى وبركاته مرحبا …

templates blogger Ravia قالب رافيا بلوجر اخر اصدار

تحميل قالب بلوجر Ravia لمدونات بلوجر اخر اصدار السلام عليكم ورحمك الله تعالى وبركاته مرحبا …

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

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

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *