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

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

شرح طريقة التركيب
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. غير الروابط والكلمات ثم انشر الموضوع

Share

Like

G+

Tweet

Tweet