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

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

المعــاينة

كــمـا يـمـكـنـك أيــضـا الإطـلاع عــلـى تـدويــنـة مـشـابــهـة لــمـا نـشــرحـه الآن: إضافة ازرار التحميل فى العمود الجانبى

نــبـدا فـي الــشـرح عــلـى بــركـة الله
مراحل تركيب الإضافة

1. ابحث على </b:skin> وضع هذا الكود فوقه :

/* CSS Store Style */
#store-style{background:#f6f8f9;display:block;overflow:hidden;padding:20px;margin:0 0 20px 0}
.rio-ss{overflow:hidden;line-height:normal;margin:0;background:#fff;display:block;padding:10px;width:100%;float:left;color:#888}
#store-style .storebutton{display:block;position:relative;background:#ff6550;color:#fff;text-align:left;font-size:1rem;margin:0;padding:16px 20px;border-radius:4px;overflow:hidden;box-shadow:0 1px rgba(0,0,0,.1);transition:all .3s}
#store-style .storebutton.but2{background:#3498db}
#store-style .storebutton:hover{background:#e55b48;color:#fff;box-shadow:0 10px 20px rgba(0,0,0,0.04), 0 6px 6px rgba(0,0,0,0.1);}
#store-style .storebutton.but2:hover{background:#2f89c5}
#store-style .storebutton:after,#store-style .storebutton.but2:after{content:'\f105';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;bottom:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:12px 20px;font-family:fontawesome;transition:all .3s;font-size:1.4rem}
#store-style .storebutton:hover:after,#store-style .storebutton.but2:hover:after{background:rgba(255,255,255,.15);-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}
.but1,.but2{padding:14px}
.storelist{background:#fff;display:flex;padding:10px 5px;width:100%;float:left;color:rgba(0,0,0,0.5);font-weight:700;border-bottom:1px dashed rgba(0,0,0,0.05);transition:all .6s}
.storelist:last-child{border-bottom:0}
.storelist:before{content:"\f00c";font-family:FontAwesome;font-size:13px;font-style:normal;font-weight:normal;padding:5px;margin:0 5px 0 0;transition:all .6s}
.storelist:hover:before{color:#e67e22;}



2. ابـحــث فــي الــقـالــب عـلــى مـعــرف الــسـايــد بــار وعــادة مــا يـكــون sidebar-wrapper او sidebar، وضع <a name="teqb4_box"/> اسفله مباشرة :
3. الان ابحث على </body> وضع هذا الكود فوقه مباشرة :

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

4. الان و اخيرا اذا اردت اضهار الروابط ما عليك سوى وضع هذه الاكواد مع وضع روابطك انت

<div style="display: none;">
    <div id="teqb4_92box">
        <div id="store-style">
<a class="storebutton but1" href="#" rel="nofollow" target="_blank">معاينة</a>
            <br />
            <a class="storebutton but1" href="#" rel="nofollow" target="_blank">تحميل من هنا</a>
            <br />
            <div class="rio-ss idb">
يمكنك تحميل و المعاينة من على الازرار الاعلى</div>
</div>
<div id="store-style">
<a class="storebutton but1 free" href="#" rel="nofollow" target="_blank">تحميل مجاني</a>
            <br />
            <a class="storebutton but2" href="#" target="_blank">$5 - إشتري الان</a>
            <br />
            <div class="rio-ss">
<span class="storelist">دعم فني</span>
                <br />
                <span class="storelist">مع تعليقات بلوجر</span>
                <br />
                <span class="storelist">خذف حقوق المصمم</span>
                <br />
                <span class="storelist">بالنسبة إلى النطاقات غير المحدودة</span>
                <br />
                <span class="storelist">لا النصوص البرمجية المشفرة</span>
                <br />
                <span class="storelist">و أكثر من ذلك بكثير...</span>
            </div>
</div>
</div>
</div>

إشترك في قناتنا على اليوتيوب لتتوصلو بجديد حلقاتنا التقنية
سبحان الله، والحمدلله، ولا إله إلا الله، والله أكبر
إذا أعجبك الموضوع فلماذا تبخل علينا بالردود المشجعة ؟!