إضافة صندوق بأزرار في السيدبار

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

الآن يــمــكـنـكــم رؤيــة الــمــعـايـنــة قـبــل أن نـدخــل لـلـشــرح :

المعــاينة

مراحل تركيب الإضافة

1. ضع الكود التالي فوق ]]></b:skin> أو ضعه بين <style> </style> فوق </head>

/*تحميل  معاينة */
#store-style{overflow:hidden;font-family:Droid Arabic Naskh,sans-serif;background:#fff;border:1px solid #ddd;padding:25px 10px 10px;margin-bottom:20px}
#store-style .storebutton{background:#07ACEC;color:#fff;font-weight:bold;border-radius:3px;text-align:center;transition:all .4s ease-in-out;position:relative}.rio-ss{padding-top:15px;overflow:hidden}
a.storebutton.but3,a.storebutton.but2 { display: inherit; padding: 10px 0; margin: 20px auto; width: 97%; background: #4F4F52!important; }
a.storebutton.but2 {background: #F9A741!important;margin:0 auto!important}
#store-style .storebutton:hover,a.storebutton.but3:hover{background:#333!important;color:#fff}.but1{padding:10px 95px}.but2{padding:10px 84px}
.storelist{padding:12px 10px;border-bottom:1px solid #ddd;width:100%;float:right}
.storelist:last-child{border-bottom:none}
.storelist:before{content:"\f05d";font-family:FontAwesome;font-size:13px;font-style:normal;font-weight:400;padding:5px}

2. ضع الكود التالي فوق </head>

<script type='text/javascript'>
/*<![CDATA[*/
$(document).ready(function(){ 
$('a[name="details"]').before($('#Theme-details').html()); 
$('#Theme-details').html(''); 
}); 
/*]]>*/
</script>

3. ابحث عن كود السيدبار الخاص بك الكود يختلف من قالب لقالب وقد يكون هكذا : <aside id='sidebar-wrapper' أو هكذا : <div id='sidebar-wrapper' وإن كان عكس ذلك ولم تعرفه فقط ابحث عن اسم الأداة الأولى وسيوجهك اليه بعدها ضع الكود التالي أسفله

<a name='details'/> 
<div class='clear'/>




4. قم بحفظ النموذج

تركيب الأزرار

1. قم بتحرير موضوع ثم انتقل الى تبويب HTML وضع الكود التالي في أي مكان

<div style="display: none;">
<div id="Theme-details">
<div id="store-style">
<center>
<a class="storebutton but1" href="رابط المعاينة#" target="_blank">معاينة مباشرة</a>
<a class="storebutton but3" href="رابط التحميل#" target="_blank">تحميل القالب</a>
</center>
</div>
<div id="store-style">
<center>
<a class="storebutton but2" href="رابط الشراء#" target="_blank">$5 - النسخة المدفوعة</a></center>
<div class="rio-ss">
<span class="storelist">دعم دائم</span>
<span class="storelist">حذف حقوق التصميم</span>
<span class="storelist">يستخدم بأي مدونة</span>
<span class="storelist">لا وجود للسكربتات المشفرة</span>
<span class="storelist">تغيير ألوان القالب</span>
<span class="storelist">والمزيد...</span>
</div>
</div>
<div style="clear: both;">
</div>
</div>
</div>

2. غـيـر الـروابـط والــكـلـمـات ثـم انـشـر الـمـوضـوع.

المصدر : http://www.teqniweb.com/