28 ديسمبر 2014

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

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

اضافة ازرار معاينة و تحميل بتقنية جديدة - و بمناسبة دخول علينا السنة الجديدة احببت ان اشارك معكم كيفية اضافة ازرار معاينة و تحميل بتأثير السلايدر

اضافة ازرار معاينة و تحميل بتقنية جديدة - و بمناسبة دخول علينا السنة الجديدة احببت ان اشارك معكم كيفية اضافة ازرار معاينة و تحميل بتأثير السلايدر يمكنك معاينة الاضافة عبر الازرار التالية و اضغط على result


طريقة التركيب


  1. الان قم بالدخول إلى لوحة تحكم المدونة
  2. اختر قالب 
  3. ثم انقر فوق تحرير HTML
 

اولا يجب تركيب كود font-awesome ابحث عن الوسم </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>
<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>


اهم الإعدادات


استبدل رمز # برابط المعاينة و الملف
استبدل كل من الكلمات العربية بالكلمات المناسبة لك

اي سؤال او استفسار لا تترد بوضعه في تعليق

مواضيع ذات صلة
اضافة ازرار معاينة و تحميل بتقنية جديدة
4 / 5
بواسطة

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

  1. الردود
    1. شكرا لك اخي بل مرورك هو الرائع

      =r

      حذف
  2. العفو يا غالي
    شكرا لمرورك =r

    ردحذف
  3. اخي اذا كان عندك حل
    أنا عندما أقوم بوضع الكود فوق ]]>
    تصبح خلفية مدونتي بيضاء

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

    بالتوفيق =r

    ردحذف
  5. شكرا . اضافة رائعة جدا
    لكن هل يمكن تغير الرمزية الصغيرة لأي صور اخرى ام لا ؟

    ردحذف
    الردود
    1. تستطيع تغيير الرمزيات لأي رمزية تريدها

      قم بالدخول إلى http://fortawesome.github.io/Font-Awesome/icons/

      بعد الدخول إلى الموقع سوف تجد ايقونات و بجانبها معرفات لها مثل fa-at هذه هي التي سوف نقوم باستخدامها

      الان طريقة التغيير استبدل هذه المعرفات الموجود في الكود فوق fa fa-rocket و fa fa-download بمعرفات الايقونات التي اخترتها من الموقع

      بالتوفيق =r

      حذف
    2. شكرااا لكم نجح الامر معي S=

      حذف
    3. من الجيد انها نجحت معك يا غالي بالتوفيق =r

      حذف
  6. لوسمحت كيف اغير لون الخط فـعـنـدمـا اظـلـل علي الخط لا تظهر كلمة "للتحميل اضغط هنا"

    ردحذف
    الردود
    1. اهلا اخي صراحة لم افهم سؤالك بالضبط او ما هي المشكلة
      لأن الخط له لونين البرتقالي و الأبيض و الازرق و الابيض
      فعند مرور مؤشر الماوس يصبح لون الخط ابيض و اللون الاساسي برتقالي
      ممكن صورة من المشكلة و ان شاء الله يتم حلها بالتوفيق =r

      حذف
  7. موضوع مميز، والتجربة كانت ناجعة لكن واجهتني مشكلة يا أستاذ منير.
    عند الضغط على زر المعاينة أو التحميل، يفتح الرابط في نفس الصفحة ولا يفتح في صفحة أخرى جديدة، وعند التحويل إلى وضع (تأليف) لتمكين هذه الخاصية يحدث خطأ في الكود!
    فهل هناك طريقة لإضافة خاصية فتح الرابط في صفحة جديدة ونحن في وضع HTML؟

    ردحذف
    الردود
    1. شكرا لتعليقك اخي أبو عبد الرحمن
      نعم تستطيع يا غالي فقط كل ما عليك فعله هو إضافة target="_blank"
      قم بإضافتها بعد الرابط و علامات التنصيص href="mudwnp"
      لتيصح هكذا href="mudwnp" target="_blank"

      حذف
    2. أزال أحد مشرفي المدونة هذا التعليق.

      حذف
    3. أزال أحد مشرفي المدونة هذا التعليق.

      حذف
  8. مبدع دائما شكرا لك

    ردحذف
  9. شكرا على الاضافة لكن عندما اضع هذا الكود تظهر الكلمة تحت الزر.. بمعنى اخر عندما اقوم بتحديث الصفحة يظهر الزر وكلمة اضغط هنا او حمل من هنا تحت الزر .... ارجو الرد

    ردحذف
    الردود
    1. تأكد من إضافة الروابط والكلمة بشكل صحيح

      حذف
  10. مرحبًا أخي، شكرًا لك على الإضافة الجميلة، لكن أليس بوسعي
    يا ترى جعل المعاينة أو التحميل تنفتح تلقائيًا بلسان آخر (new tab)؟
    وشكرًا

    ردحذف
    الردود
    1. يُمكنك ذلك من خلال إضافة هذه الوسم target='_blank'
      بعد وسم الرابط

      حذف
  11. غير معرف02 يونيو, 2016

    الأضافة لم تعمل

    ردحذف
    الردود
    1. أهلًا صديقي
      بما انها تعمل في المعاينة إذا لا يوجد مشاكل
      تأكد من تركيب الإضافة بشكل صحيح

      حذف

يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود. اولا تضع الـ = بعدها الحرف الخاص بالإبتسامة
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r