إضافة ثلاث أدوات فى الشريط الجانبي السايدبار بشكل احترافي مثل عالم المدون ، الإضافة التى استخدمه فى مدونتى طلبها منى الكثيرون واليوم اضع هذا الموضوع لشرح كيفية الإضافة لهذه الأداة يمكنك معاينة الإضافة من على المدونة فى اى وقت.
هذا الإضافة تمكنك من إضافة ثلاث إضافات فى القائمة الجانبية بجانب بعض بشكل احترافي كما فى مدونتى حاليا وتمكنك من إضافة الكثير من الإضافات بدون جعل القائمة الجنابية طويله ، نمر الأن لموضوع اليوم كيفية إضافة ثلاث ادوات فى الشريط الجانبي السايدبار .
معاينة الإضافة
يمكنك معاينة الإضافة من اى موضوع على المدونة او من الصفحة الرئيسية او يمكنك مشاهد الصورة الخاصة بها من الإسفل.
كيفية إضافة ثلاث ادوات فى القائمة الجانبية السايدبار
شرح التركيب للأضافة سهل جدا اولا أبحث عن هذا الوسم]]></b:skin>وقم بوضع الكود التالى فوقه.
.wdbloogsidebartabs .sidebar{width:100%;float:right}
.wdbloogsidebartabs .widget-title{display:none}
.wdbloogsidebartabs{box-shadow:0 0 10px rgba(0,0,0,0.09);background:#fff;padding:0 10px 0 10px}
.wdbloogsidebartabs .widget{box-shadow:0 0 0 rgba(0,0,0,0.09);background:#fff;padding:0;margin-bottom:0}
.wdbloogsidebartabs .widget h2{display:none}
.tabs-widget{height:35px;list-style:outside none none;margin:0;padding:0}
.tabs-widget li{float:right;list-style:outside none none;padding:0;text-align:center;width:32.333%;margin-left: 1%;}
div#sidebar1 img {width: 100%;}
#wdbloogstab2 a{border-left:0 none}
.tabs-widget li a{border-bottom:3px solid #000;margin-top:10px;margin-bottom:10px;padding:10px;color:#000000;text-align:right;width:100%;display:block}
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{color:#E74C3C;border-bottom:3px solid #E74C3C}
الأن الكود الثانى الخاص بالإضافة وسوف تقوم بوضعه فوق كود الخاص بالقائمة الجانبية.
<div class='wdbloogsidebartabs'>
<script type='text/javascript'>
jQuery(document).ready(function($){
$(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();
$("ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a").addClass("tabs-widget-current").show();
$(".tabs-widget-content-widget-themater_tabs-1432447472-id:first").show();
$("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").click(function() {
$("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").removeClass("tabs-widget-current a");
$(this).addClass("tabs-widget-current");
$(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();
var activeTab = $(this).attr("href");
$(activeTab).fadeIn();
return false;
});
});
</script>
<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li id='wdbloogstab1'><a href='#widget-themater_tabs-1432447472-id1'>الشائعة</a></li>
<li id='wdbloogstab2'><a href='#widget-themater_tabs-1432447472-id2'>الأقسام</a></li>
<li id='wdbloogstab3'><a href='#widget-themater_tabs-1432447472-id3'>الصفحات</a></li>
</ul>
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
<b:section class='sidebar' id='sidebartab1' maxwidgets='1' preferred='yes'/>
</div>
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
<b:section class='sidebar' id='sidebartab2' maxwidgets='1' preferred='yes'/>
</div>
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>
<b:section class='sidebar' id='sidebartab3' maxwidgets='1' preferred='yes'/>
</div>
<div style='clear: both;'/>
</div>
صورة توضح كيفية وضع الكود فى المكان المناسب لك يمكنك وضع الكود فوق كود القائمة الجانبية لتظهر اعلها او العكس.
| كيفية إضافة ثلاث ادوات فى الشريط الجانبي السايدبار |
بعد ذلك قم بحفظ القالب ، او قبل ذلك يمكنك تغيير أسماء الأدوات كما فى الصورة التاليه وسوف يكون عليك تغيير بدون تبدل المكان الخاص بكل أداة.
بعد وضع الاكواد وحفظ القالب الأن أنتقل الى التخطيط وسوف تجد الثلاث أداوت فى القائمة الجانبية فى التخطيط.
بعد وضع الإضافات الخاصه بك سوف تكون الإضافات كما فى الصورة التالى فوقه وبذلك تكون مبروك عليك الإضافة.
هذا كل شئ فى موضوع اليوم بالتوفيق للجميع وأنتظرونا بكل جديد بأذن الله على المدونة ، لا تنس مشاركة الموضوع حتى يتسفيد غيرك وأى مشكلة تجدها تضعها فى تعليق .
هذا كل شئ فى موضوع اليوم بالتوفيق للجميع وأنتظرونا بكل جديد بأذن الله على المدونة ، لا تنس مشاركة الموضوع حتى يتسفيد غيرك وأى مشكلة تجدها تضعها فى تعليق .
0 تعليق