20‏/11‏/2014

أزرار بسيطة تحميل معاينة التحديث الثاني بتأثير جميل كالعادة الأناقة كل شيئ بالنسبة للأزرار، لمن فاته الإصدار الأول فهو على هذا الرابط
شرح طريقة التركيب
1. توجه لقالب >> تحرير
2. ابحث بإستعمال Ctrl+F عن <head/> ثم ضع الكود التالي فوقه
* الكود هو فقط لإظهار الأيقونات إذا كنت تتوفر عليه فلا داعي لإضافته
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
3.ابحث عن ]]></b:skin> وضع الكود التالي فوقه أو ضعه بين <style> </style> فوق </head>
/* CSS BUTTON V2 */
.ar1web-button2 {margin:20px auto;padding:0;width:auto;text-align:center;}
.ar1web-button {height:40px;display:inline-block;border:3px solid #f57360;font-family:Electrolize,ge_ss_tvbold;font-size:20px;font-weight:400;text-align:center;text-decoration:none;
color:#f56954;overflow:hidden;border-radius:5px;}
a.ar1web-button {padding:0;margin:0;line-height:0;}
.ar1web-button .icon {margin-right:6px;}
.ar1web-button .ar1web-button-depan,.ar1web-button .ar1web-button-belakang {display:block;
padding:0 20px;line-height:40px;transition:margin .4s;}
.ar1web-button .ar1web-button-depan {background-color:#f56954;color:#fff;}
.ar1web-button .ar1web-button-belakang {background-color:#fff;color:#f56954;}
.ar1web-button:hover .ar1web-button-depan {margin-top:-40px;}
.ar1web-button3 {margin:20px auto;padding:0;width:auto;text-align:center;}
.ar1web-buttondemo {height:40px;display:inline-block;border:3px solid #0ea9dc;font-family:Electrolize,ge_ss_tvbold;font-size:20px;font-weight:400;text-align:center;text-decoration:none;color:#00a1d6;overflow:hidden;border-radius:5px;}
a.ar1web-buttondemo {padding:0;margin:0;line-height:0;}
.ar1web-buttondemo .icon {margin-right:6px;}
.ar1web-buttondemo .ar1web-button-depan,.ar1web-buttondemo .ar1web-button-belakang {display:block;padding:0 20px;line-height:40px;transition:margin .4s;}
.ar1web-buttondemo .ar1web-button-depan {background-color:#00a1d6;color:#fff;}
.ar1web-buttondemo .ar1web-button-belakang {background-color:#fff;color:#00a1d6;}
.ar1web-buttondemo:hover .ar1web-button-depan {margin-top:-40px;}
4. أضف الكود الآتي بداخل الموضوع في تبويب HTML
كود المعاينة
<div class="ar1web-button3"><a class="ar1web-buttondemo" href="#" target="_blank"><br>
<div class="ar1web-button-depan"><span class="icon fa fa-eye"></span> مشاهدة الحلقة<br>
</div><div class="ar1web-button-belakang"><span class="icon fa fa-arrow-circle-left"></span> ماذا تفعل<br>
</div></a><br>
</div>
كود التحميل
<div class="ar1web-button2"><a class="ar1web-button" href="#" target="_blank"><br>
<div class="ar1web-button-depan"><span class="icon fa fa-cloud-download"></span> تحميل مباشر<br>
</div><div class="ar1web-button-belakang"><span class="icon fa fa-hdd-o"></span> 20MB :الحجم<br>
</div></a><br>
</div>
أزرار بسيطة تحميل معاينة التحديث الثاني بتأثير جميل كالعادة الأناقة كل شيئ بالنسبة للأزرار، لمن فاته الإصدار الأول فهو على هذا الرابط
شرح طريقة التركيب
1. توجه لقالب >> تحرير
2. ابحث بإستعمال Ctrl+F عن <head/> ثم ضع الكود التالي فوقه
* الكود هو فقط لإظهار الأيقونات إذا كنت تتوفر عليه فلا داعي لإضافته
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
3.ابحث عن ]]></b:skin> وضع الكود التالي فوقه أو ضعه بين <style> </style> فوق </head>
/* CSS BUTTON V2 */
.ar1web-button2 {margin:20px auto;padding:0;width:auto;text-align:center;}
.ar1web-button {height:40px;display:inline-block;border:3px solid #f57360;font-family:Electrolize,ge_ss_tvbold;font-size:20px;font-weight:400;text-align:center;text-decoration:none;
color:#f56954;overflow:hidden;border-radius:5px;}
a.ar1web-button {padding:0;margin:0;line-height:0;}
.ar1web-button .icon {margin-right:6px;}
.ar1web-button .ar1web-button-depan,.ar1web-button .ar1web-button-belakang {display:block;
padding:0 20px;line-height:40px;transition:margin .4s;}
.ar1web-button .ar1web-button-depan {background-color:#f56954;color:#fff;}
.ar1web-button .ar1web-button-belakang {background-color:#fff;color:#f56954;}
.ar1web-button:hover .ar1web-button-depan {margin-top:-40px;}
.ar1web-button3 {margin:20px auto;padding:0;width:auto;text-align:center;}
.ar1web-buttondemo {height:40px;display:inline-block;border:3px solid #0ea9dc;font-family:Electrolize,ge_ss_tvbold;font-size:20px;font-weight:400;text-align:center;text-decoration:none;color:#00a1d6;overflow:hidden;border-radius:5px;}
a.ar1web-buttondemo {padding:0;margin:0;line-height:0;}
.ar1web-buttondemo .icon {margin-right:6px;}
.ar1web-buttondemo .ar1web-button-depan,.ar1web-buttondemo .ar1web-button-belakang {display:block;padding:0 20px;line-height:40px;transition:margin .4s;}
.ar1web-buttondemo .ar1web-button-depan {background-color:#00a1d6;color:#fff;}
.ar1web-buttondemo .ar1web-button-belakang {background-color:#fff;color:#00a1d6;}
.ar1web-buttondemo:hover .ar1web-button-depan {margin-top:-40px;}
4. أضف الكود الآتي بداخل الموضوع في تبويب HTML
كود المعاينة
<div class="ar1web-button3"><a class="ar1web-buttondemo" href="#" target="_blank"><br>
<div class="ar1web-button-depan"><span class="icon fa fa-eye"></span> مشاهدة الحلقة<br>
</div><div class="ar1web-button-belakang"><span class="icon fa fa-arrow-circle-left"></span> ماذا تفعل<br>
</div></a><br>
</div>
كود التحميل
<div class="ar1web-button2"><a class="ar1web-button" href="#" target="_blank"><br>
<div class="ar1web-button-depan"><span class="icon fa fa-cloud-download"></span> تحميل مباشر<br>
</div><div class="ar1web-button-belakang"><span class="icon fa fa-hdd-o"></span> 20MB :الحجم<br>
</div></a><br>
</div>
1 Blogger تعليقات
Disqus
1 تعليق
المشرف
avatar

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة