اضافة أزرار بداخل التدوينة بتقنية ثري دي 3D من ويب لايت

اضافة أزرار بداخل التدوينة بتقنية ثري دي 3D من ويب لايت

السلام عليكم ورحمة الله وبركاته

اليوم نقدم لكم طريقة إضافة أزرار بداخل التدوينة سواء كنت تريدها ( لمعاينة قالب أو تحميله أو الذهاب إلى رابط معين )

الآن نأتي لطريقة التركيب ، تابع معي :

• ابحث عن

]]></b:skin>

• وضع هذا الكود فوقها

/* CSS button */
.webli9ht-btn {background-color: #3498DB;box-shadow: 0px 6px #2980B9;-moz-box-shadow: 0px 6px #2980B9;-webkit-box-shadow: 0px 6px #2980B9;-webkit-transition: none;-moz-transition: none;transition: none;display: inline-block;padding:10px 40px;margin: 0 0 10px 0;vertical-align: middle;font-size: 16px;border:none !important;color: #fff !important;text-decoration: none !important;}
.webli9ht-btn:hover{top:4px;position:relative;box-shadow: 0px 2px #2980B9;-moz-box-shadow: 0px 2px #2980B9;-webkit-box-shadow: 0px 2px #2980B9;}
.webli9ht-btn-red{background-color: #E74C3C;box-shadow: 0px 6px #BD3E31;-moz-box-shadow: 0px 6px #BD3E31;-webkit-box-shadow: 0px 6px #BD3E31;}
.webli9ht-btn-red:hover{box-shadow: 0px 2px #BD3E31;-moz-box-shadow: 0px 2px #BD3E31;-webkit-box-shadow: 0px 2px #BD3E31;}
.webli9ht-btn-green{background-color: #82BF56;box-shadow: 0px 6px #669644;-moz-box-shadow: 0px 6px #669644;-webkit-box-shadow: 0px 6px #669644;}
.webli9ht-btn-green:hover{box-shadow: 0px 2px #669644;-moz-box-shadow: 0px 2px #669644;-webkit-box-shadow: 0px 2px #669644;}
.webli9ht-btn-yellow{background-color: #F2CF66;box-shadow: 0px 6px #D1B358;-moz-box-shadow: 0px 6px #D1B358;-webkit-box-shadow: 0px 6px #D1B358;}
.webli9ht-btn-yellow:hover{box-shadow: 0px 2px #D1B358;-moz-box-shadow: 0px 2px #D1B358;-webkit-box-shadow: 0px 2px #D1B358;}
.webli9ht-btn-gray{background-color: #95a5a6;box-shadow: 0px 6px #7f8c8d;-webkit-box-shadow: 0px 6px #7f8c8d;-moz-box-shadow: 0px 6px #7f8c8d;}
.webli9ht-btn-gray:hover{box-shadow: 0px 2px #7f8c8d;-moz-box-shadow: 0px 2px #7f8c8d;-webkit-box-shadow: 0px 2px #7f8c8d;}
.webli9ht-btn-purple{background-color: #9b59b6;box-shadow: 0px 6px #8e44ad;-moz-box-shadow: 0px 6px #8e44ad;-webkit-box-shadow: 0px 6px #8e44ad;}
.webli9ht-btn-purple:hover{box-shadow: 0px 2px #8e44ad;-moz-box-shadow: 0px 2px #8e44ad;-webkit-box-shadow: 0px 2px #8e44ad;}
.webli9ht-btn-orange{background-color: #e67e22;box-shadow: 0px 6px #d35400;-moz-box-shadow: 0px 6px #d35400;-webkit-box-shadow: 0px 6px #d35400;}
.webli9ht-btn-orange:hover{box-shadow: 0px 2px #d35400;-moz-box-shadow: 0px 2px #d35400;-webkit-box-shadow: 0px 2px #d35400}
.webli9ht-btn-dark{background-color: #34495e;box-shadow: 0px 6px #2c3e50;-moz-box-shadow: 0px 6px #2c3e50;-webkit-box-shadow: 0px 6px #2c3e50;}
.webli9ht-btn-dark:hover{box-shadow: 0px 2px #2c3e50;-moz-box-shadow: 0px 2px #2c3e50;-webkit-box-shadow: 0px 2px #2c3e50;}
.webli9ht-btn-block{width:100%;position:relative;display:block;text-align:center;}
.webli9ht-btn:active{top:6px;position:relative;box-shadow: none;-moz-box-shadow: none;-webkit-box-shadow: none;}

وهكذا انتهينا من الاضافة 

لإضافة الأزرار بداخل الموضوع

قم بالاتجاه الى التدوينة >>تبويب HTML >> وضع الكود في المكان الذي تريد

الكود

<a class="webli9ht-btn" href="#" target="_black" title="زر 1" rel="nofollow">أزرق</a>
<a class="webli9ht-btn webli9ht-btn-red" href="#" target="_black" title="زر 2" rel="nofollow">أحمر</a><br />
<a class="webli9ht-btn webli9ht-btn-green" href="#" target="_black" title="زر 3" rel="nofollow">أخضر</a>
<a class="webli9ht-btn webli9ht-btn-yellow" href="#" target="_black" title="زر 4" rel="nofollow">أصفر</a><br />
<a class="webli9ht-btn webli9ht-btn-gray" href="#" target="_black" title="زر 5" rel="nofollow">فضي</a>
<a class="webli9ht-btn webli9ht-btn-purple" href="#" target="_black" title="زر 6" rel="nofollow">بنفسجي</a><br />
<a class="webli9ht-btn webli9ht-btn-orange" href="#" target="_black" title="زر 7" rel="nofollow">برتقالي</a>
<a class="webli9ht-btn webli9ht-btn-dark" href="#" target="_black" title="زر 8" rel="nofollow">أسود</a><br />
<a class="webli9ht-btn webli9ht-btn-dark webli9ht-btn-block" href="#" target="_black" title="زر 9" rel="nofollow">أسود طويل</a>

اليوم انتهى درسنا تابعنا في المواضيع القادمة 

• شارك
• شارك
• شارك
• شارك
• شارك