| اضافة ازرار معاينة و تحميل احترافية الجزء الثانى |
شكل ازرار التحميل و المعاينة 2 :
1- ادخل لتحرير القالب و اضف الكود التالي فوق ]]></b:skin> :
* ====== Buttons ====== */
.ibtn{-webkit-border-radius:5px;border-radius:5px;display:inline-block;vertical-align:top;font-weight:700;margin:5px;border:1px solid rgba(0,0,0,0.05);-webkit-transition:.2s ease-out;-o-transition:.2s ease-out;transition:.3s ease;-webkit-box-shadow:0 -20px 75px 0 rgba(0,0,0,0.2) inset;box-shadow:0 -20px 75px 0 rgba(0,0,0,0.2) inset;text-shadow:1px 1px 0 rgba(0,0,0,0.1)}
.ibtn:hover{box-shadow: 300px 0 0 rgb(255, 0, 108) inset;}
.ibtn-1{padding:10px 15px;font-size:16px;box-shadow: 4px 0 0 #ff006c inset;}
.ibtn-2{padding:10px 25px;font-size:17px;box-shadow: 4px 0 0 #ff006c inset;}
.ibtn-3{padding:15px 30px;font-size:20px;box-shadow: 4px 0 0 #ff006c inset;}
.ibtn-4{padding:20px 35px;font-size:24px;box-shadow: 4px 0 0 #ff006c inset;}
.iDown:before{content:"\f0ed";font-family:fontawesome;display:inline-block;vertical-align:top;margin-left: 5px;}
.rtl .iDown:before{padding-left:10px}
.ltr .iDown:before{padding-right:10px}
.iDown.ibtn-1:before{font-size:24px}
.iDown.ibtn-2:before{font-size:25px}
.iDown.ibtn-3:before{font-size:28px;font-size:31px}
.iPrev:before{content:"\f002";font-family:fontawesome;display:inline-block;vertical-align:top}
.rtl .iPrev:before{padding-left:10px}
.ltr .iPrev:before{padding-right:10px}
.iPrev.ibtn-1:before{font-size:20px}
.iPrev.ibtn-2:before{font-size:25px}
.iPrev.ibtn-3:before{font-size:28px;font-size:31px}
2 - اضف الكو د التالي بداخل المشاركات بداخل كود html الخاص بالمشاركة :
<div style="text-align: center;">
<a class="ibtn1 iDown ibtn-1" href="#" rel="nofollow" style="background-color: #212669; color: white;" target="_blank">تحميل</a><a class="ibtn1 iPrev ibtn-1" href="#" rel="nofollow" style="background-color: #212669; color: white;" target="_blank">معاينة</a>
<a class="ibtn1 iDown ibtn-1" href="#" rel="nofollow" style="background-color: #212669; color: white;" target="_blank">تحميل</a>
<a class="ibtn1 iDown ibtn-1" href="#" rel="nofollow" style="background-color: #212669; color: white;" target="_blank">تحميل</a>
</div>
3 - تخصيص لون و شكل الازرار :
يمكنك التحكم في لون الازار و لن النص بداخل الازرار كما شئت من خلال تغيير قيمة :
4 -background-color: #212669 لتغيير لون الازرار
5 -color: white لون الخط على الازرار
3- لتغيير حجم الازرار ضع احد هذه القيم ibtn-1 = صغر , ibtn-2 = متوسط , ibtn-3 = كبير , ibtn-4 = كبير جدا
2- اتركه كما هو
2- اتركه كما هو
1- لتغيير شكل الزرار مقوسة الحواف او حادة و متسطيلة ibtn = ازرار مقوسة الحواف , ibtn-1 = ازرار حادة و مستطيلة مثل