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

الكاتب بتاريخ عدد التعليقات : 0

زر بسيط وبتصميم إحترافي يتضمن المعاينة مع التحميل بإدراج حجم الملف ونص اخر ، أزرار بتصميم نقي بإستخدام Css فقط مما يجعلها جد خفيفة وأيضا لها منظر جد رائع تجذبك لضغط عليها :) ما يتبقى عليك إلى تركيبها وإستعمالها في موقعك نبدأ 
1. توجه لقالب >> تحرير 
2. ابحث بإستعمال Ctrl+F عن <head/>
3. ضع الكود التالي فوقه
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
4. ابحث عن ]]></b:skin أو تضعه فوق </head> بإضافة هذيين الوسميين <style> هنا الكود  </style>
5.  ضع الكود التالي فوقه 

/* CSS Simple Butn th3geekweb3 */.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);}

6. أضف الكود الأتي بداخل الموضوع في تبويب 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>

0 تعليق على موضوع " إضافة أزرار معاينة وتحميل لبلوجر بشكل إحترافي "

████ شروط التعليق ████
1- يجب على التعليق أن يكون بلا روابط إشهارية
2- أن يكون التعليق خاص بمحتوى التدوينة
3- لإضافة كود حوله أولاً بمحول الأكواد
4- لاستعمال خط عريض ضع الكود : <strong>النص هنا...</strong>
5- لاستعمال خط مائل ضع الكود : <em>النص هنا...</em>
6- لإضافة صورة ضعها بهذا الكود : <i rel="image"> ... رابط الصورة هنا ... </i>

الإبتسامات إخفاء