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

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

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

معاينة الإضافة

معاينة

صورة من الإضافة

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

اولا سوف تبحث عن هذا الوسم</head>فى مدونتك وتقوم بوضع فوقه الكود التالى ، هذا الكود خاص بالايقونات اذا كان من قبل فى مدونتك فلا داعي لوضعه من جديد

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

الأن فوق نفس الوسم هذا</head>سوف تقوم بوضع الكود التالى فوقه.

<style type='text/css'>
#scrollToTop{display:none;list-style:none;position:fixed;bottom:49%;right:20px;cursor:pointer;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99}
#scrollToTop a{display:inline-block;background:#fff;color:#222;font-size:.8rem;margin:5px auto;padding:12px 14px;border-radius:99em;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#scrollToTop a:hover{color:#222;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)}
#top{position:absolute;top:0}
#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}
</style>

الأن سوف تبحث عن هذا الوسم</body>وتقوم بوضع الكود التالى فوقه.

<ul id='scrollToTop'>
  <li><a href='#top'><i class='fa fa-chevron-up' title='الصعود للاعلى'/></a></li>
  <li><a href='#bottom'><i class='fa fa-chevron-down' title='النزول للأسفل'/></a></li>
</ul>
<div id='top'/>
<div id='bottom'/>

ايضا فوق نفس الوسم</body>هذا سوف تقوم بوضع الكود هذا.

<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>

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

شارك المقال