29‏/01‏/2016

كيف تجعل الأزرار في السيدبار، عادة هذه الاضافة تجدونها في المواقع التي تقدم القوالب بصفة عامة واليوم سنتكلم عن طريقة اضافتها، لن أشارككم فقط السكربت الذي يجعل الصندوق في اليسار بل ايضا ترافقه صناديق وأزرار فنحن أيضا نستخدمها في تحميل القوالب والملحقات وبناء على طلباتكم وضعنا تدوينة لها وأظنها لمسة جميلة لأصحاب المواقع الذين لديهم روابط للتحميل بكثرة.
الآن يمكنكم رؤية المعاينة قبل أن ندخل للشرح
شرح طريقة التركيب
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. غير الروابط والكلمات ثم انشر الموضوع
كيف تجعل الأزرار في السيدبار، عادة هذه الاضافة تجدونها في المواقع التي تقدم القوالب بصفة عامة واليوم سنتكلم عن طريقة اضافتها، لن أشارككم فقط السكربت الذي يجعل الصندوق في اليسار بل ايضا ترافقه صناديق وأزرار فنحن أيضا نستخدمها في تحميل القوالب والملحقات وبناء على طلباتكم وضعنا تدوينة لها وأظنها لمسة جميلة لأصحاب المواقع الذين لديهم روابط للتحميل بكثرة.
الآن يمكنكم رؤية المعاينة قبل أن ندخل للشرح
شرح طريقة التركيب
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. غير الروابط والكلمات ثم انشر الموضوع
28 Blogger تعليقات
Disqus
28 التعليقات
المشرف
avatar

جميل جدا

شكرا ليك

المشرف
avatar

لم اجد كد سايدبار وانا لدي قالب الخاص بك نقطة بداية

المشرف
avatar

لم تشتغل معي

المشرف
avatar

اخي اضف موضوع وضع خلفية الموقع نفس صورة الموضوع عند دخوله

المشرف
avatar

شكرا ياغالي..

بس ياريت تشرح لنا كيفية اضافة معلومات عن التدوينة في السيدبار

المشرف
avatar

طب انا عاوز اضافة معلومات عن التدوينة

المشرف
avatar

السلام عليكم اهلا اخي حسام انا بس كان عندي استفسار عن كيف اضع اعلانات في السيدبار ك اعلانات (مواقع ندعمها) في السيدبار الخاص بكم وشكرا مقدماً

المشرف
avatar

ابحث عن هذا <div id="sidebar-wrap">

المشرف
avatar

عليكم السلام عليك بوضع الكود بالتخطيط هذا هو :
https://goo.gl/tiiPmV

المشرف
avatar

انا معى تصميم قالب psd لسه مصصمه فعايز اكوده مفيش محترف يكوده
او برنامج سريع لتكويده
اوطريقة لتكويده وشكرا

المشرف
avatar

اخي حسام حضرتك لم ترد علي..

اريد اضافة معلومات عن التدوينة بعد ازنك

المشرف
avatar

إن شاء الله سأضعها بتدوينة

المشرف
avatar

اخي حسام ممكن شرح الغاء القايمه في الموضيع وحط صور الموضوع كما كنت عامله برجاء الرد فى اسرع وقت

المشرف
avatar

أخي حسام لم تشتغل معي في قالب الخاص بك قالب تواصل

المشرف
avatar

السلام عليكم اخي حسام ممكن لينك تحميل هاد القالب world-morocco.blogspot.co

المشرف
avatar

اخي حسام دي المرة تالته بسالك لم تشتغل معي في ققالب تواصل

المشرف
avatar

لقد قمت بتجربتها وهي شغالة! أين تضع الكود في الخطوة 3؟ ضع صورة

المشرف
avatar

بحثت عن كود السبايدر في قالبي لايوجد

المشرف
avatar

ابحث عن هذا :
<div class='sidebar-wrapper'

المشرف
avatar

انتا معلم واللهي العظيم
انا بخود من الموقع بتاعك وبستفيد منة
وانا اعمل مصمم موقع للمحلات التوجارية وبعملة مجانى
وانا عندي طلب عشان يبقا الموقع متكامل
تضع زر تحميل الموضوع

المشرف
avatar

شكرا على ثنائك اخي الكريم لكني لست سوى مبتدئ أشارك واتعلم ... شرفتنا بهذا المرور تقبل تحياتي

المشرف
avatar

انا مش لاقى الاكواد واستخدم القالب الخاص بمدونتك

المشرف
avatar

لم اجد
<div id='sidebar-wrapper'
و
<aside id='sidebar-wrapper'

المشرف
avatar

ابحث عن هذا side-bar ستجده هكذا id="side-bar">

المشرف
avatar

فقط قول لي متى تنشر الازار التحميل في سبايدر مدونتك !

المشرف
avatar

إضافات الخاصة بالقالب لن يتم نشرها اخي
ستكون هناك اضافات اخرى وأحسن

المشرف
avatar

السلام عليكم اريد اضافة زر المعاينة فقط على قالب سيو الوان اتمنى الرد في اسرع وقت

المشرف
avatar

السلام عيليك : اخي حساب انا لدي قالب psd هل يمكنك تنزيل لنا تدونيه كيف نكوده

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة