تبادل اعلاني جديد من الوليد نت مجانا

أدخل كلمات بحثك

كود اضافة ثلاثة اقسام في السايدبار بشكل احترافي
،،،،،،،،، لقد تم تغير اسم الموقع من موقع الوليد نت الي موقع الوليد نت 2 ,والرابط من alwalednet.blogspot.com الى alwalednet2.blogspot.com , , اتمنى ان ينال اعجابكم ×

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





اليوم وبعد طول غياب عن التدوين اقدم لكم طريقة اضافة ثلاثة اقسام في السايدبار في العامود  الجانبي في اداة واحد يعني اداة واحدة مقسمة الى ثلاثة اقسام وهي اضافة رائعة واحترافية متوفرة في القوالب الاحترافية






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


1- من لوحة التحكم >> قالب >> تحرير HTML
2- خذ نسخة احتياطية لقالب المدونة قبل اجراء اي تغير
3- قم بالبحث عن الكود التالي بالاستعانة بلوحة التحكم (CTRL+F)
4- قم بالبحث عن الكود 
]]></b:skin> 
 واضف فوقه مباشراً الكود التالي
 /* Tab Widget */
.tabviewsection {
background: #f8f8f8;
text-transform: uppercase;
border-bottom: 5px solid #f34246;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
float: left;
width: 100%;
}
.tabs-widget {
list-style: none;
list-style-type: none;
margin: 0 0 10px 0;
padding: 0;
}
.tabs-widget li {
list-style: none;
list-style-type: none;
padding: 0;
float: right;
border-right: 2px solid #fff;
}
.tabs-widget li a {
color: #fff;
display: block;
padding-right: 16.5px;
padding-left: 16px;
font-size: 13px;
padding-top: 15px;
padding-bottom: 15px;
text-decoration: none;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.tabs-widget-content {
}
.tabviewsection {
margin-top: 10px;
margin-bottom: 10px;
}
.tags_tab {
width: 80px;
text-align: center;
}
.about_tab {
width: 96px;
text-align: center;
}
li.laster {
border: 0px;
width: 120px;
text-align: center;
}
.blog-mobile-link {
display: none;
}
.tabs-widget li a {
padding-right: 20px;
padding-left: 20px;
}
.tabs-widget {
height: 51px;
}
.tw-authors {
width: 570px;
}
.tabviewsection h2 {
display: none;
}
.tabs-widget li a.tabs-widget-current {
padding-bottom: 20px;
margin-top: -10px;
background: #f8f8f8;
color: #444;
text-decoration: none;
border-top: 5px solid #f34246;
font-size: 14px;
text-transform: capitalize;
}
.tabs-widget li a {
background: #f34246;
}

 
5- قم بالبحث عن الكود 


<div id='sidebar-wrapper'> او <div id='sidebar'>

  واضف اسفله الكود التالي
 <!-- Tab Widget [start] -->
<div class='tabviewsection'>
<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 class='about_tab'><a href='#widget-themater_tabs-1432447472-id1'>المشاركات</a></li>
<li class='tags_tab'><a href='#widget-themater_tabs-1432447472-id2'>الاقسام</a></li>
<li class='laster'><a href='#widget-themater_tabs-1432447472-id3'>التعليقات</a></li>
</ul>
<!-- Tab Widget 1 -->
<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' preferred='yes'>
 </b:section>                                     
</div>
<!-- Tab Widget 2 -->               
<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' preferred='yes'>
  
 </b:section>                                       
</div>
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>
<!-- Tab Widget 3 -->
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>                                       
</div>
</div>
<!-- Tab Widget [endt] -->
 
واخيراً اضغط على حفظ القالب ومبروك عليك الاضافة الرائعة
ثم انتقل الى التخطيط لكي تقوم باضافة الادوات التي تناسبك الى الاقسام
الى هنا ينتهي الموضوع نلتقي في مواضيع اخرى انشاء الله
في امان الله

كود اضافة ثلاثة اقسام في السايدبار بشكل احترافي كود اضافة ثلاثة اقسام في السايدبار بشكل احترافي Reviewed by walid al Bana on 12:13:00 ص Rating: 5
اظهار التعليقات
اخفاء التعليقات

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

   
تجدونا هنا

إنضم إلينا


Join on this site

للحصول على كل جديد المدونة

Mohon Aktifkan Javascript!Enable JavaScript