الاثنين، 15 أغسطس 2016

100 100 100

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


إضافة اكثر من جميلة لاصحاب مدونات بلوجر حيث تكون جميلة و من خلالها يظهر روابط التحميل و المعاينة او اي ما تريد في السايدبار و يكون كل واحد خاص بموضوع معين .

معاينة الاضافة : من هنا .


طريقة التركيب :

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


إرسال تعليق

مواضيع حصرية

...
لن تجد مثلها على أي موقع اَخر

Whatsapp Button works on Mobile Device only