اثراء

2

طريقة دمج ثلاث أدوات فى مكان واحد لمدونات بلوجر

محمد جلال 29 ديسمبر,2014
 

tabbed-sidbar-widget

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

ads

الخطوة الثانية: اذهب الى قالب ثم تحرير HTML وقم بالبحث عن  ]]></b:skin> واضافة الكود التالى قبله أو فوقه وهو كود CSS

/* 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: 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;
}

الخطوة الثالثة هى البحث عن <div id=’sidebar-wrapper’> واذا لم تجد ابحث عن <aside> وضع اسفل منه أو بعده الكود التالى

ad

<!– 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′>About</a></li>
<li class=’tags_tab’><a href=’#widget-themater_tabs-1432447472-id2′>Tags</a></li>
<li class=’laster’><a href=’#widget-themater_tabs-1432447472-id3′>Popular</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] –>

الخطوة الرابعة هى حفظ القالب.

الخطوة الخامسة هى التوجه الى تخطيط مدونتك Layout لتنفيذ بعض الخطوات الهامة وستجد أنك قد قمت بانشاء 3 أماكن جديدة تمكنك من إضافة أدوات. ستقوم بإضافة أداة واحدة لكل مكان. ليكون العدد 3 أدوات وليكن كما بالصورة التالية

tabbed-sidbar-widget-layout

قد قمنا باضافة أداة واحدة أسفل كل مكان جديد قمنا بإنشائه من الخطوات السابقة. قم بعد ذلك بمعاينة مدونتك وستجد أن النتيجة إيجابية إن شاء الله وهى دمج الثلاث أدوات فى شكل تبويبات بجانب بعضها وبالتالى قد قمنا بتجميع 3 أدوات فى مكان واحد وتوفير أماكن أخرى بالمدونة لأى أداة أخرى.
لاحظ إن كنت تريد إضافة أداة التسميات ضمن الثلاث أدوات يجب عليك إضافة بعض أكواد الـ CSS التى تعطى لها بعض من الشكل الجمالى وسنعطيكم بعض الأكواد بالأسفل ويجب التنويه على أن يتم وضعها فوق أو أعلى ]]></b:skin>
1- هذا الشكل

style01

الكود المستخدم يمكنك الحصول عليه من هنا
2- هذا الشكل

style02

الكود المستخدم يمكنك الحصول عليه من هنا

3- هذا الشكل

style03

الكود المستخدم يمكنك الحصول عليه من هنا
4- هذا الشكل

style04

الكود المستخدم يمكنك الحصول عليه من هنا

الاوسمة:
 

About Author

محمد جلال

محمد جلال، مهندس مصري ومتابع جيد للأخبار والمستجدات التقنية والاعلام الاجتماعى ومهتم بالاعلان عن الشركات الناشئة عبر مدونتى الشخصية. أحب القراءة والترجمة. مطور مدونات بلوجر. شعارى: الإفادة فكرة والاستفادة أفكار. صاحب مدونة أبو إياد عرض جميع التدوينات بواسطة محمد جلال →

التعليقات (2)

    •  

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

      رد

اترك ردا


*

سجل دخول لحسابك

لا يمكن تذكرككلمة المرور ?

التسجيل بهذا الموقع