شرح كيفية تثبيت، اخفاء أو إظهار قائمة الروابط على مدونة بلوجر

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

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

الطريقة جد سهلة وبسيطة. كل ما عليك فعله هو اضافة كود CSS وكود JAVASCRIPT والقيام ببعض التعديلات في قالب مدونة بلوجر.

شرح كيفية وطريقة تثبيت قائمة الأقسام العلوية أو الاضافات أو أي اضافة مثل القائمة الجانبية في مدونة بلوجر.

شاهد أيضا: طريقة تغيير شكل تعليقات بلوجر الى تصميم انيق

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

• 1 - اتجه الى تعديل القالب عبر تعديل HTML.
• 2 - قم بالبحث عن الوسم </b:skin> 
• 3 - اضف فوقه هذا الكود.

/*------ CSS make sticky widget blogger by:www.techsoune.com ------*/ .sticky {position:fixed; top:10px;/* distance from the top*/ z-index: 100;}

نصيحة: عندما تقوم بتعديل أكواد HTML الخاص بقالب مدونتك، لا تنس الاحتفاظ بنسخة احتياطية من نموذج قالب بلوجر الحالي الخاص بك، بحيث إذا حدث خطأ ما، يمكنك استعادة النموذج.

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

• 1 - قم بالنزول الى اسفل صفحة تحرر قالب مدونتك تجد وسم </body>
• 2- اضف فوقه كود جافاسكريبت هذا.

<script type='text/javascript'> /* script make sticky widget blogger by:www.arabes1.com */ $(document).ready(function() { var stickyWidgetTop = $('add id or class').offset().top; var stickyWidget = function(){ var scrollTop = $(window).scrollTop(); if (scrollTop > stickyWidgetTop) { $('add id or class').addClass('sticky'); } else { $('add id or class').removeClass('sticky');}}; stickyWidget(); $(window).scroll(function() { stickyWidget();});}); </script>

• 3 - ستجد في هذا الكود كلمة َ"Add ID Or Class"، يجب تغييرها حسب اسم "ID" أو "CLASS" الخاص بالاضافة الذي تريد تثبيثه في صفحة بلوجر الخاصة بك.

الطريقة 2: إخفاء قائمة الروابط عند التمرير لأسفل وتظهر عند التمرير لأعلى

كيفية جعل شريط التنقل في Blogger (شريط القوائم) ثابتًا والذي سيتم إخفاؤه عند التمرير لأسفل ويظهر عند التمرير لأعلى.

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

بعد اتباع خطوات هذا المنشور، يصبح شريط التنقل أو شريط القوائم الحالي في Blogger ثابتًا وسيختفي أثناء التمرير لأسفل ويظهر عند التمرير لأعلى.

ملاحظة: لا تنس استبدال معرف القطعة (النص الأحمر بالكامل للرمز) بمعرف القائمة الخاص بك. تحقق من كيفية معرفة معرف القطعة.

blogger sticky navigation التي ستكون مخفية عند التمرير لأسفل وتظهر عند التمرير لأعلى

لذلك، ما عليك سوى اتباع الخطوات التالية:

الخطوة 1: قم بتسجيل الدخول إلى حساب Blogger الخاص بك ثم انتقل إلى Layout → Add a Gadget → HTML / Java Script والصق الكود التالي (يوصى بإعلان هذه الأداة في المنطقة السفلية من التخطيط الخاص بك):

<script>
//<![CDATA[
bs_makeSticky("header-navigation"); //widget ID here
function bs_makeSticky(elem) {
var bs_sticky = document.getElementById(elem);
var scrollee = document.createElement("div");
bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);
var width = bs_sticky.offsetWidth;
var iniClass = bs_sticky.className + ' bs_sticky';
window.addEventListener('scroll', bs_sticking, false);
function bs_sticking() {
var rect = scrollee.getBoundingClientRect();
if (rect.top < 0) {
bs_sticky.className = iniClass + ' bs_sticking';
bs_sticky.style.width = width + "px";
} else {
bs_sticky.className = iniClass;
}}}
//]]>
</script>
<style>.bs_sticking {background:#fff!important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative\9 !important;}</style>

الخطوة 2: الرمز أعلاه سيجعل شريط قائمة التنقل الخاص بك ثابتًا. الآن أسفل الكود أعلاه الصق الكود التالي لتأثير التمرير.

<script>

//<![CDATA[

$(function(){

var lastScrollTop = 0, delta = 5;

$(window).scroll(function(event){

var st = $(this).scrollTop();

if(Math.abs(lastScrollTop - st) <= delta)

return;

if (st > lastScrollTop){

// downscroll code

$("#header-navigation").css({top:'-50px'})

.hover(function(){$("#header").css({top: '0px'})})

} else {

// upscroll code

$("#header-navigation").css({top:'0px'});

}

lastScrollTop = st;

});});

//]]>

</script>

الخطوة 3: انقر الآن على زر حفظ ثم Save Arrangement of your Layout.

التخصيص: لا تنسَ استبدال معرف القطعة (النص الأحمر بالكامل للرمز أعلاه) بمعرف القائمة الخاص بك.

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

شاهد أيضا: تسريع ظهور مدونة بلوجر وتحسين سيو المدونة

في حال واجهتك أي مشكلة أثناء تركيب كود التثبيث في قالب مدونة بلوجر. المرجو وضع تعليق أسفل الموضوع.