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


بسم الله الرحمن الرحيم 
السلام عليكم اعزائى متابعى المدونة الكرام اليوم جئت لكم بأضافة جديدة و بسيطة جداً فى التركيب
وستعطى لمدونتك تنسيقاً رائعاً و جديداً نتمنى من الله ان تنال اعجابكم  . 
والان كى لانطيل عليكم ندخل للشرح : 

اولا : نذهب: https://draft.blogger.com/home

ثانياً: نقوم بالدخول الى قالب/ تحرير HTML

ثالثاَ: نبحث عن الرمز  ]]></b:skin>  

ونضيف الكود التالى 
/*CsS ButtonS DabouR PhonE*/.demo::before,.download::before {background-color: #444;color:#fff;font: 30px/42px fontawesome;height: 0;overflow: hidden;position: absolute;right: 0;text-align: center;transition: all 0.7s ease 0s;width: 100%;}.demo::before {content: "\f06e";}.download::before {content: "\f019";}.demo:hover::before,.download:hover::before {height: 40px;}.demo,.download {border: 1px solid #fff;box-shadow: 0 1px 1px 1px #444;color: #fff;display: inline-block;font-weight: bold;height: 40px;line-height: 40px;position: relative;text-align: center;width: 200px;margin:10px 5px;}.demo {background-color: #fc5400;}.download {background-color: #0081E4;}


  • اللون  #0081E4   هو لون زر التحميل 
  • اللون #fc5400   هو لون زر المعاينة 
الان ناتى الى كيفية تطبيق الكود من داخل محرر المشاركات :
نقوم بتحويل المحرر من وضع تاليف الى HTML
ونضيف الكود التالى :(للمعاينة) 
<a class="demo" href="http://www.dabourphone.com/" target="_blank">معاينة</a>
ونضيف الكود التالى :(للتحميل) 
<a class="download" href="http://www.dabourphone.com/" target="_blank">تحميل</a>
نتمنى ان ينال الموضوع اعجابكم فى امان الله وحفظ الرحمن

دبور فون

M.H.I

هناك 8 تعليقات:

  1. الردود
    1. انت الاجمل شكرا لك على تعليقك المشجع

      حذف
  2. الردود
    1. الشكر لله اخى شكراً لك على تعليقك اللمشجع :)

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

    ردحذف
    الردود
    1. انت الاجمل :) وشكراً على تعليقك ولكن سيحذف لاحتوائه على روابط خارجية

      حذف
  4. الردود
    1. شكرأً لك انت الاجمل ;) و للاسف :( لانك اضفت رابطاً مباشراً خارجياً فلن يظهر تعليقك Db:

      حذف

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

أحدث الأخبار

10/recent