دمج ثلاث اضافات في مكان واحد ضمن مدونة بلوجر

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

الخطوة الأولى: أخذ نسخة إحتياطية من قالبك لتفادى حدوث أى أخطاء وارد حدوثها.

الخطوة الثانية: اذهب الى قالب ثم تحرير 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> وضع اسفل منه أو بعده الكود التالى

اضافة كود

<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><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>                <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'><b:section class='sidebar' id='sidebartab3' preferred='yes'></b:section>                                        </div></div>

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

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

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

ولإضافة أداة رابعة يمكنك وضع الكود التالى فى نهاية كود الخطوة الثالثة

اضافة كود

تعديل ضمن الكود واذا اردت احذفه

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

هذا الشكل

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

هذا الشكل

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

هذه التدوينة منقولة من (أضغط هنا) للذهاب الى التدوينة الرئيسية

لقد جربتها على مدونتي ووجدت انها تعمل يمكنك مشاهدتها ضمن مدونتي ولكن المكان انا غيرته لذالك احببت ان اشارككم اياها

Share Share Tweet Share Share Share

EXE and APK

مدير الموقع :Sory Mohajer ⚡ تابع معنا أهم أخبار التقنية و مراجعة أهم هاتف و حاسوب متوفر وتعلم سيو الموقع https://www.exe-apk.com/موقع EXE and APK مجاني 100%

دمج ثلاث اضافات في مكان واحد ضمن مدونة بلوجر

جرب الآن إنشاء تحويل آمن للروابط عبر موقعنا

تعليقات

المشاركات الشائعة

دمج ثلاث اضافات في مكان واحد ضمن مدونة بلوجر

المزيد من المشاركات

جرب الآن إنشاء تحويل آمن للروابط عبر موقعنا

تعليقات

المشاركات الشائعة