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

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

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

لمعاينة هذه الاداة قبل تركيبها

👈معاينة👉

شرح اضافة اداة اعلى واسفل في مدونات بلوجر

توجة الى لوحة التحكم> المظهر> تحرير 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>

3- نبحث عن </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> <br /> <div id='top'/> <br /> <div id='bottom'/> <br /> <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><br /> <br /> <br /> <br />

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

قد يهمك ايضاً:

👇👇👇👇

اضف تاثير الالوان على الروابط في بلوجر

برنامج Manything لتحويل الهاتف لكاميرا مراقبة تستشعر اي حركة