28‏/07‏/2014

من الصورة توضح لك الأمر نعم عرفتها هي إضافة أصبحت شائعة بالقوال ، بحيث تجمع ثلاثة أشياء في واحد لذا اليوم سأتطرق لكيفية وضعها بأي قالب بلوجر طبعا إن لم تكن لديك من قبل، تتميز الإضافة الخاصة بالسيدبار بخفتها ومظهرها الجميل مصممة بأحدث التقنيات يمكن أن تضع فيها أي شيئ
شرح طريقة التركيب
1. نتوجه لقالب >> تحرير
2.ابحث بإستعمال CTRL+F عن <b:skin/><[[
3. ضع الكود التالي فوقه
body#layout #sidebartab1,body#layout #sidebartab2,body#layout #sidebartab3{width: 10%; float: right; margin-top: 35px;}

.tabviewsection {background: #FFFFFF; text-transform: uppercase; border: 1px solid #E7E8E8; float: right; width: 30.2%;margin-top: 10px; margin-bottom: 10px; margin-right: 6px;} .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; width: 102.6px; text-align: center;} .tabs-widget li a {color: #fff; display: block;font-size: 13px; padding-top: 15px; padding-bottom: 15px; text-decoration: none; font-family: droid arabic kufi;} .tabs-widget-content { }.tags_tab { width: 80px; text-align: center; } .about_tab { width: 96px; text-align: center; }  .blog-mobile-link { display: none; } .tabs-widget { height: 51px; } .tw-authors { width: 570px; } .tabviewsection h2 { display: none; } .tabs-widget li a.tabs-widget-current {background: #FFFFFF; font-weight: bold; color: #797777; text-decoration: none; border-top: none!important; font-size: 12px; font-family: droid arabic kufi; text-align: center;}.tabs-widget li a { background:#0FA4D2; }
* هذه الخطوة هي ما قبل الأخيرة بمجرد إدراج الكود وحفظ القالب سيدرج لك ثلاثة أدوات بالتخطيط
4. إبحث عن : <div id='sidebar-wrapper'>
5. ضع أسفله مباشرة الكود التالي
<div class='tabviewsection'>
<script type='text/javascript'>
  jQuery(document).ready(function($){
                $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
                $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show();
                $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show();
      
                $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function() {
                    $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;);
                    $(this).addClass(&quot;tabs-widget-current&quot;);
                    $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
                    var activeTab = $(this).attr(&quot;href&quot;);
                    $(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' maxwidgets='1' preferred='yes'/>                                     
</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' maxwidgets='1' preferred='yes'/>                                       
</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' maxwidgets='1' preferred='yes'/>                                       
</div>
</div>
* بعد وضعك للأكواد نكون قد إنتهينا من القالب بإمكانك حفظ العمل والتوجه لتخطيط وسترى 3 أدوات مضافة بالجانب كل على حدة كما بالصورة:

من الصورة توضح لك الأمر نعم عرفتها هي إضافة أصبحت شائعة بالقوال ، بحيث تجمع ثلاثة أشياء في واحد لذا اليوم سأتطرق لكيفية وضعها بأي قالب بلوجر طبعا إن لم تكن لديك من قبل، تتميز الإضافة الخاصة بالسيدبار بخفتها ومظهرها الجميل مصممة بأحدث التقنيات يمكن أن تضع فيها أي شيئ
شرح طريقة التركيب
1. نتوجه لقالب >> تحرير
2.ابحث بإستعمال CTRL+F عن <b:skin/><[[
3. ضع الكود التالي فوقه
body#layout #sidebartab1,body#layout #sidebartab2,body#layout #sidebartab3{width: 10%; float: right; margin-top: 35px;}

.tabviewsection {background: #FFFFFF; text-transform: uppercase; border: 1px solid #E7E8E8; float: right; width: 30.2%;margin-top: 10px; margin-bottom: 10px; margin-right: 6px;} .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; width: 102.6px; text-align: center;} .tabs-widget li a {color: #fff; display: block;font-size: 13px; padding-top: 15px; padding-bottom: 15px; text-decoration: none; font-family: droid arabic kufi;} .tabs-widget-content { }.tags_tab { width: 80px; text-align: center; } .about_tab { width: 96px; text-align: center; }  .blog-mobile-link { display: none; } .tabs-widget { height: 51px; } .tw-authors { width: 570px; } .tabviewsection h2 { display: none; } .tabs-widget li a.tabs-widget-current {background: #FFFFFF; font-weight: bold; color: #797777; text-decoration: none; border-top: none!important; font-size: 12px; font-family: droid arabic kufi; text-align: center;}.tabs-widget li a { background:#0FA4D2; }
* هذه الخطوة هي ما قبل الأخيرة بمجرد إدراج الكود وحفظ القالب سيدرج لك ثلاثة أدوات بالتخطيط
4. إبحث عن : <div id='sidebar-wrapper'>
5. ضع أسفله مباشرة الكود التالي
<div class='tabviewsection'>
<script type='text/javascript'>
  jQuery(document).ready(function($){
                $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
                $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show();
                $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show();
      
                $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function() {
                    $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;);
                    $(this).addClass(&quot;tabs-widget-current&quot;);
                    $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
                    var activeTab = $(this).attr(&quot;href&quot;);
                    $(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' maxwidgets='1' preferred='yes'/>                                     
</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' maxwidgets='1' preferred='yes'/>                                       
</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' maxwidgets='1' preferred='yes'/>                                       
</div>
</div>
* بعد وضعك للأكواد نكون قد إنتهينا من القالب بإمكانك حفظ العمل والتوجه لتخطيط وسترى 3 أدوات مضافة بالجانب كل على حدة كما بالصورة:

7 Blogger تعليقات
Disqus
7 التعليقات
المشرف
avatar

تم التركيب بنجاح شكرا

المشرف
avatar

لا تظهر عندي كلمة div id='sidebar-wrapperلماذا انتطر الرد

المشرف
avatar

ابحث عن نصفها sidebar-wrapper

المشرف
avatar

حسام شلونك حبي كل عام وانت بخير الكودين لايضهرو انا استخدم قالب افتراضي من قوالب بلوجر عدلت عليك بقة هاذهي الاضافة مهمة وانت تعرف شكرأ انتظر الرد

المشرف
avatar

جرب وضعه فوق هذا الكود : <div id='sidebar-wrapper'>

المشرف
avatar

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

المشرف
avatar

إذ لم يظهر فقالبك يحتوي على كود tab يتعارض مع هذا وليس لدي حل له الآن
أو أرسل القالب عبر نموذج الإتصال لأجرب

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