اضافة زر الصعود وزر الهبوط لمدونة بلوجر

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

معاينة

شرح تركيب الاضافة:

توجة الى لوحة التحكم<  المظهر < تحرير HTML

1- نبحث عن </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("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

ملاحظة هده هو رابط ايقونات موقع font-awesome اد كان موجود في مدونتك فلا تقم بتركيبه 

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

<style type='text/css'>
/* Go Up and Down */
#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}
</style>

2- نبحث عن </body> ونضع الكود التالي فوقه

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

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