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

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

المعاينة من هنا

نبدا في الشرح على بركة الله

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

/* CSS Store Style by abdoutech.com */
#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;}

الان ابحث في القالب على معرف السايد بار و عادة ما يكون sidebar-wrapper او sidebar

وضع هذا <a name="abdoutech.com_box"/> اسفله مباشرة

<
/div>

الان ابحث على </body> وضع هذا الكود فوقه مباشرة

<div style="display: none;">
    <div id="abdoutech_23box">
        <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>

يسعدنا تفاعلكم بالتعليق ولكن نرجو منكم أن يكون خاص بالموضوع

admin star 29 يوليو 2018 في 6:24 م

السلام عليك اخي الكريم قمت بتركيب الاضافة ولكن واجهتني مشكلة بعض الاحيان تظهر و احينا اخرى لا - تعمل و تتوقع بمجرد تحديث الصفحة انت و حظك هل منحل
- عبدو تكنولوجي - Abdou Technologie 30 يوليو 2018 في 9:32 ص
  
  راسلني سوف احاول في حل المشكل

ورشه تصاميمك 1 مايو 2019 في 9:19 م

أخي الكريم الاضافه لا تعمل اتبعت الخطوات ولكن لم تظهر في السيد بار حتي بعد اعاده التحميل !!!!!
- عبدو تكنولوجي - Abdou Technologie 2 مايو 2019 في 2:23 م
  
  راسلني على صفحة اتصل بنا سوف احل لك المشكلة