= كيفية إضافة ازرار التحميل والمعاينة بشكل جديد واحترافي لمدونات بلوجر - سوق التطبيقات 3 | جديد عالم التقنية بالصوت والصورة

كيفية إضافة ازرار التحميل والمعاينة بشكل جديد واحترافي لمدونات بلوجر

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

    معاينه الاضافه:

    بالنسبه لشكل الازرار فسوف تكون على هذا الشكل الموضح بالصورة الاتيه :

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

    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>

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







    شارك المقال
    سوق التطبيقات 3
    نورالدين احمد العرشاني , عمري 17 سنه , خبير في السيو SEO واتقن لغه البرمجه html , اعمل في التدوين على ووردبرس منذ عام 2014 , وانتقلت الى بلوجر عام 2016 , اكثر شي اكره هو الاحتكار , احب دائما مشاركه كل شي يفيد جميع زوار موقعي , واهدف الى اثراء المحتوى العربي على الإنترنت.سوق التطبيقات 3 | جديد عالم التقنية بالصوت والصورة .

    مقالات متعلقة

    إرسال تعليق