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

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

hes at 1:42 PM

تطور التدوين منذ أول مرة بدأ و تطورت أساليب استخدام المدونات و تطورت معها العديد من الاضافات التي مع مرور الزمن أصبح من الصعب الاستغناء عنها . حيث قد تحتاج الى استخدام 5 اضافات أو ربما أكثر في الشريط الجانبي الموجود يسار مقالاتك . و لكن وضع كومة من الاضافات و رسها الواحدة أسفل الأخرى قد يشوه منظر مدونتك و يعطيها لمسة غير احترافية كما قد يكون الأمر مزعجا لدرجة يدفع زوار موقعك للمغادرة بأسرع وقت ممكن و عدم الاستفادة من معلوماتك القيمة التي تنشرها .

و هذا ما دفع المبرمجين الى تصميم لوحة جيكيوري جانبية متعددة النوافذ تسمح لك و لزوار موقعك بمعاينة ثلاث اضافات في نفس الوقت و في نفس المكان و تمكنهم من الانتقال بينها بسهولة . اقل ما يقال عن هذه الاضافة انها عبقرية ، احترافية و جد عملية حيث تساعدك على استغلال المساحات أفضل استغلال ممكن و لفعاليتها تعتبر موضة سنة 2015 اذ يكاد لا يوجد موقع الا ويستخدمها .

ماذا يميز هذه الاضافة :

استعمال هذه الاضافة يصبح يوما بعد يوم أكثر انتشارا لما تقدمه من مزايا و حلول رائعة ، اذكر أهمها :

• تمنحك افضل استغلال للمساحة - تساعدك على توفير و تقليص الكثير من المساحة في السايد بار بفضل نوافذها المتعددة
• لن تبطئ سرعة تحميل موقعك – الاضافة مصممة باستعمال smooth jQuery code أكواد خفيفة لن تؤثر على سرعة تحميل موقعك
• سهولة تنصيبها واستعمالها - يمكنك اضافة أي اضافة في أي نافذة شئت و بسهولة تامة من خلال لوحة التحكم الخاصة ببلوجر في صفحة التخطيط
• سهولة تعديلها - الاضافة مصممة باستعمال أكواد بسيطة غير معقدة مما سيمكنك من تعديلها بسهولة لتصبح مطابقة لألوان مدونتك و مقاييس السايد بار خاصتك
• تعطي لمسة احترافية لموقعك - الاضافة جميلة و تجعل من زيارة موقعك تجربة فريدة من نوعها قد تدفع الزائر للعودة مرة أخرى

كيف تضيف هذه الأدات لموقعك :

<ملاحظة> دائما قبل البداية في تجريب الطريقة الصحيحة لزرع هذه الاضافة في قالب موقعك عليك ان لا تنسى حفظ قالبك الحالي في مكان آمن تحسبا لاي خطأ قد يحدث . تذكر دائما : الوقاية خير من العلاج . </ملاحظة>

لن أطيل عليك أكثر من هذا لنبدأ الشرح :

أولا : عليك التحقق من أن قالبك يدعم الـ jQuery و اضافتها في حالة عدم دعمه لها . لان هذه الاضافة مبرمجة بلغة الـ jQuery و لن تظهر على موقعك الا اذا كان موقعك يدعمها .

ان لم تكن تعرف الطريقة الصحيحة لفعل ذلك انصحك بقراءة هذه المقالة 

ثانيا : افتح حسابك على بلوجر >> اذهب الى لوحة التحكم في موقعك >> اختر قالب >> ثم اضغط على تغيير HTML

ثالثا : اضغط على CTRL+F لتفتح لك علبة البحث المخفية ثم ابحث عن : 

]]></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: left;
border-right: 2px solid #fff;
}
.tabs-widget li a {
color: #fff;
display: block;
padding-right: 16.5px;
padding-left: 16px;
font-size: 10px;
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;

}

رابعا : عليك ايجاد الـ div tag الخاص بالـ sidebar لموقعك لأن كل مصمم يستعمل ديف تاج خاص به و لا يوجد ديف تاج موحد يجب ان يلتزم به كل المبرمجين.

عادة يستخدم المبرمجين الديف تاج التالي : <div id='sidebar-wrapper'> ان وجدته في قالبك فهنيئا لك و ان لم تجده فابحث عن sidebar أو side أو قم باستخراج الكود كما يفعل المحترفون من خلال الدخول للصفحة الرئيسية لموقعك و النقر باليمين على الـسايد بار و اختيار inspecter l’element ... ان كنت لا تعرف كيف تجد الديف تاج الخاص بالسايد البار الخاص بموقعك لا تحزن فأبو معاذ موجود دائما اطلب ذلك باستخدام التعليقات و سأقوم باستخراجه لك .

نعود لشرحنا ، بعد ان تجد الـ div tag الخاص بالـ 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:last a").addClass("tabs-widget-current").show();
                $(".tabs-widget-content-widget-themater_tabs-1432447472-id:last").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"  style="
    padding-right: 10px;
    padding-left: 10px;
">الأرشيف</a></li>
 <li class="tags_tab"><a href="#widget-themater_tabs-1432447472-id2" style="
    padding-right: 10px;
    margin-right: -;
    width: 73px;
    padding-left: 10px;
" >أقسام الموقع</a></li>
  <li class="laster"><a  href="#widget-themater_tabs-1432447472-id3" style="float:right;     width: 88px; padding-right: 10px;padding-left: 10px;">الأكثر زيارة</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] -->

خامسا : اضغط على حفظ التغييرات.

سادسا : اذهب الى تخطيط و ستظهر لك تظهر لك ثلاثة أماكن جديدة لتقوم باضافة الأدوات بها ، اضف الأدوات (المشاركات الأكثر زيارة ، أقسام الموقع و الأرشيف) كما هو مبين على الشكل الموالي :

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

• مواضوع قد يساعدك أثناء تغيير ألوان الاضافة : مكتبة أكواد الألوان الخاصة بالمدون المحترف

أتمنى أن تكون أفادتكم تدوينة نهار اليوم ،

ان واجهتك أي مشكلة مع الاضافة لا تتردد في استعمال صندوق التعليقات لطرح مشكلتك و سأجيبك في أقرب الآجال ، بالنسبة لمن لم يستطع ايجاد الـ ديف تاج أنا في الخدمة و في انتظار تعليقك اعطني رابط موقعك و يأعطيك الديف تاج الخاص بالسايد بار .

لا تنسى أن تشارك هذه التدوينة مع معارفك من المدونين ان وجدتها مفيدة عن طريق أزرار المشاركة أسفل التدوينة.

 لم يبقى لي الا أن أقول لكم بالتوفيق للجميع ،

مع تحيات أبو معاذ ،

سلام .

فيسبوك

جوجل+

تويتر

لينكدان

واتساب

صاحب المدونة : هشام العروجي

مواضيع مشابهة قد تعجبك :

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

تطور التدوين منذ أول مرة بدأ و تطورت أساليب استخدام المدونات و تطورت معها العديد من الاضافات التي مع مرور الزمن أصبح من الصعب الاستغناء عنها...

hes at 1:42 PM اقراء المزيد