إضافة وتركيب زر الصعود والنزول لمدونات بلوجر

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

إضافة وتركيب زر الصعود والنزول لمدونات بلوجر

طريقة اضافت و تركيب زر صعود و نزويل الى مدونات بلوجر :


  1. قم بالتوجه الى مدونة بلوجر.
  2. اختر القالب ثم احتفض بنسخ احتياطية لتفادي اخطاء.
  3. ثم تحرير HTML.
  4. ابحث عن ]]></b:skin>  و اضف الكود التالي فوقه :

/* Go Up and Down */
#scrollToTop{display:none;list-style:none;position:fixed;bottom:49%;right:10px;cursor:pointer;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99}
#scrollToTop a{color:rgba(0,0,0,0.2);font-size:16px}
#scrollToTop a:hover{color:rgba(0,0,0,0.5)}
#top{position:absolute;top:0}

ابحث عن </head>  و اضف الكود التالي فوقه :

<ul id='scrollToTop'>
  <li><a href='#top'><i class='fa fa-chevron-up' title='Go up'/></a></li>
  <li><a href='#bottom'><i class='fa fa-chevron-down' title='Go down'/></a></li>
</ul>
<div id='top'/>
<div id='bottom'/>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(){var o=220,r=600;jQuery(window).scroll(function(){jQuery(this).scrollTop() > o?jQuery("#scrollToTop").fadeIn(r):jQuery("#scrollToTop").fadeOut(r)})});
$(function(){$("a[href*=#]:not([href=#])").click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var t=$(this.hash);if(t=t.length?t:$("[name="+this.hash.slice(1)+"]"),t.length)return $("html,body").animate({scrollTop:t.offset().top},600),!1}})});
//]]>
</script>

ثم قم بحفض القالب. وهنيئا لك لاتنسى انضام الينا حتا تصلك كل الاضافات بلوجر الحصرية وشكرا.

انضم الى فريق العمل و احصل على ميزات خاصة انضمام

احمد العربي

مدون معلوماتي متخصص في امن و حماية

اسمك هنا

معلومات عنك بعد انضمام الى فريق العمل

اسمك هنا

معلومات عنك بعد انضمام الى فريق العمل

صديقي. إذا أعجبك الموضوع رجاءً قم بإضافة تعليق لتشجيعنا علي إضافة المزيد ..

عدد التعليقات : 0