القائمة الرئيسية

الصفحات

إضاف زر تحميل ومعاينة لبلوجر لها منظر رائع تجذبك لضغط عليه

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

شرح طريقة التركيب:

  1. إذهب إلى قالب بلوجر .
  2. ابحث عن ]]></b:skin أو تضعه فوق </head> بإضافة هذيين الوسميين <style> هنا الكود </style>.
  3. ضع الكود التالي فوقه.
/* CSS Simple Butn Nini06.tk */
.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: Electrolize,ge_ss_tvbold;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-right: 6px;}
.whitebutton span {background: #444;color: #fff;display: block;font-size: 12px;font-family: Electrolize,ge_ss_threeregular;height: 40px;line-height: 40px;text-align: center;width: 200px;z-index: 1;text-transform: uppercase;font-weight: bold;}
.whitebutton .up {background: #34B4E2;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-right: 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: #34B4E2;color: #fff;display: block;font-size: 17px;font-weight: 700;font-family:Electrolize,ge_ss_tvbold;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-right: 6px;}
.whitebuttondemo a:hover {color:#fff;}
.whitebuttondemo span {background: #444;color: #fff;display: block;font-size: 12px;font-family: Electrolize,ge_ss_threeregular;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);}


  1. ابحث بإستعمال Ctrl+F عن <head/>
  2. ضع الكود التالي فوقه

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
هذا الكود هو فقط لإظهار الأيقونات إذا كنت تتوفر عليه فلا داعي لإضافته

  1. اضف الكود الأتي بداخل الموضوع في تبويب HTML

<div class="whitebuttondemo">
<a href="#" target="_blank">معاينة</a><br>
<span class="up">إضغط للمشاهدة</span></div>
<br>
<div class="whitebutton">
<a href="#" target="_blank">تحميل مباشر</a><br>
<span class="up">إضغط للبدء</span><br>
<span class="down">2.3MB .rar</span></div>

و هكذا نكون إنتهينا ، السلام عليكم .



author-img
هيثم شاب في العشرينات ، يهتم بمراجعة جديد التقنية و توصيل أفضل صورة للزائر ، بحيث نختصر عليك الكثير من عمليات البحث ، و لذك بتوفير المعلومات الكاملة .

تعليقات