EnglishFrenchGermanSpainItalianDutchRussianPortugueseArabic

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

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

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

لتركيب الشكل كل ما عليك هو تحرير القالب والبحث عن وسم  ]]></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 {
    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 ثم قم بالبحث عن الكلمة التي كتبتها في البداية وأٌقصد هذه الكلمة "أزررررررار" بعد أن تجدها ضع مكانها الكود التالي :

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

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

هناك 12 تعليقًا:

  1. مقالة نافعة
    شكرا جدا
    http://maktabana.blogspot.com/

    ردحذف


  2. Pretty! This has been a really wonderful post.

    http://prokr.com/pesticides-spraying-anti-insects-company-riyadh/

    ردحذف
  3. شكرا علي القالب المدفوع..............؟
    http://net-eg.blogspot.com/

    ردحذف
  4. اخي الكريم شكرا لهذا القالب الجميل انشئت مدرسة الكترونية مجانيه اسست الاقسام حسب المواد ولكل ماده فصولها كيف اجعل كل فصل ينشر في فصله راجيت تعاونكم معنا خدمتا للصالح العام

    ردحذف
  5. شكرا على المعلومات ، هل يمكنكم عمل تبادل اعلانى مع مدونة احمد طارق
    http://ahmedtarik.blogspot.com.eg

    ردحذف
  6. شكرا لك على الموضوع
    www.animeiat-hd.blogspot.com

    ردحذف
  7. شكرا لك على الموضوع

    Www.abdelmounaimpro.tk

    ردحذف
  8. شكرا لك على هذا الموضوع
    Www.abdelmounaimpro.tk

    ردحذف

التالي السابق الرئيسية