5 نوفمبر 2014

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

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

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

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



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


  1. قم بالدخول إلى لوحة تحكم المدونة
  2. اختر قالب 
  3. ثم انقر فوق تحرير HTML
ابحث عن الوسم </head> و اضف الكود التالي فوقه
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
ابحث عن الوسم ]]></b:skin> و اضف الكود التالي فوقه
/* Custom Button */
.whitebutton {
    margin: 20px auto;
    padding: 20px 0;
    width: 200px;
}

.whitebutton a {
    background: #fff;
    color: #666;
    display: block;
    font-size: 17px;
    font-weight: 700;
    font-family: 'Droid Arabic Kufi',Verdana,sans-serif;
    height: 50px;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 200px;
    position: relative;
    z-index: 2;
}

.whitebutton a:before {
    content: '\f019';
    font-family: FontAwesome;
    font-weight: normal;
    padding: 8px;
    margin-left: -90px;
    margin-right: 30px;
}

.whitebutton span {
    background: #444;
    color: #fff;
    display: block;
    font-size: 12px;
    font-family: 'Droid Arabic Kufi', Verdana,sans-serif;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 200px;
    z-index: 1;
    text-transform: uppercase;
    font-weight: bold;
}

.whitebutton .up {
    background: #e25734;
    margin: -25px auto;
    opacity: 0;
    border-radius: 0 0 5px 5px;
    transform: translate(0,-50px);
    transition: 350ms;
}

.whitebutton .down {
    margin: -30px auto;
    opacity: 0;
    border-radius: 5px 5px 0 0;
    transform: translate(0,-50px);
    transition: 350ms;
}

.whitebutton .down:before {
    content:'\f14a';
    font-family: FontAwesome;
    font-weight: normal;
    margin-left: -6px;
    color: #aaa;
}

.whitebutton:hover .up {
    opacity: 1;
    transform: translate(0,0);
}

.whitebutton:hover .down {
    opacity: 1;
    transform: translate(0,-90px);
}

.whitebuttondemo {
    margin: 20px auto;
    padding: 20px 0;
    width: 200px;
}

.whitebuttondemo a {
    background: #e25734;
    color: #fff;
    display: block;
    font-size: 17px;
    font-weight: 700;
    font-family:'Droid Arabic Kufi',Verdana,sans-serif;
    height: 50px;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 200px;
    position: relative;
    z-index: 2;
    transition: 350ms;
}

.whitebuttondemo a:before {
    content:'\f002';
    font-family: FontAwesome;
    font-weight: normal;
    padding: 8px;
    margin-left: -90px;
    margin-right: 30px;
}

.whitebuttondemo a:hover {
    color: #fff;
}

.whitebuttondemo span {
    background: #444;
    color: #fff;
    display: block;
    font-size: 12px;
    font-family: 'Droid Arabic Kufi', Verdana,sans-serif;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 200px;
    z-index: 1;
    text-transform: uppercase;
    font-weight: bold;
}

.whitebuttondemo .up {
    background: #444;
    margin: -25px auto;
    opacity: 0;
    border-radius: 0 0 5px 5px;
    transform: translate(0,-50px);
    transition: 350ms;
}

.whitebuttondemo:hover .up {
    opacity: 1;
    transform: translate(0,0);
}

كيفية اضافة الازرار في الموضوع

عند كتابة موضوع ننتقل من تأليف إلى HTML و وضع الكود التالي صورة توضيحية


<div class="whitebuttondemo">
<a href="http://mudwnp.blogspot.com/">معاينة</a>
<span class="up">انقر للعرض</span></div>

<div class="whitebutton">
<a href="http://mudwnp.blogspot.com/">تحميل</a>
<span class="up">انقر للعرض</span>
<span class="down"> 1.6MB .rar </span></div>
</div>

 الإستخدام

 استبدل رابط مدونتي  بالرابط الذي تريده ان ينتقل إليه عند الضغط
 استبدل كلمة معاينة بالكمة التي تريدها
استبدل كلمة انقر للعرض بالكلمة التي تريدها
استبدل 1.6MB .rar  بحجم الملف

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

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

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

  1. موضوع جميل حقيقة شكراَ لك =q

    ردحذف
    الردود
    1. شكرا لك اخي بل مرورك الجميل =r

      حذف
    2. اخي الكريم عند الاضافة تمت بحمداالله ولكن عند المعاينة كانت النتيجة سلبية فلا ينسدل الزر كامل

      حذف
    3. واجهتني المشكله واستطعت حلها بكل سهولة كل ما عليك هو البحث عن -25px auto وغير الرقم 25 الي 2 وسوف تنجح معك ان شاء الله انا حللتها بهذه الطريقة

      حذف
    4. شكرًا لك صديقي
      صراحًة لم انتبه للتعليق الخاص بالأخ MSAM
      احترامي وتقديري لشخصك الكريم

      حذف
  2. اولا احب ان اشكرك على مجهودك الرائع و لكن لا تعمل عندى

    ردحذف
    الردود
    1. لا شكر على واجب اخي الكريم و اعتذر كان هناك خطأ بالاكواد يمكنك الان إعادة تركيب الاضافة و تجربتها من جديد =r

      احترامي لشخصك الكريم

      حذف
  3. مشكووووووووور يا عمa=a=a=a=a=a=

    ردحذف
  4. يا اخي الصراحه ايش اقلك الله يخليك

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

    ردحذف
  6. الموضوع رائع جدا جدا ونجح في مدونتي وشكر لك انتا تستحق مليون تعليق =s

    ردحذف
    الردود
    1. مرورك الرائع يا غالي
      شكراً لك
      و تعليقك بالنسبة لي يُعتبر مليون تعليق صديقي

      =e

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

    ردحذف
    الردود
    1. اعتذر منك لمسح التعليق لا ننشر روابط إشهار

      حذف
  8. بحثت عن الوسم الثاني ما لقيتة <[[
    =x

    ردحذف
    الردود
    1. هذا الوسم موجود في كل المدونات
      جرب أبحث عن <style واضف الكود ضمن اكواد css

      حذف
  9. السلام عليكم اخي لما بجرب الطريقة واحط الكود
    بيجيب لي هالرسالة : ‏لا يمكن قبول HTML خاصتك: ليست هناك علامة فتح مقابلة لعلامة الإغلاق.: DIV رفض

    افيدني جزاك الله خير

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

      حذف

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