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

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

بعد غياب طويل عن المدونة اليوم وكثرة الرسائل التي تصلنا عبر صفحتنا على الفيسبوك عدنا ببداية جديدة بإذن الله سوف نستمر في المدونة.


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

طريقة تركيب الإضافة :

1.توجه الى لوحة التحكم ثم قالب ثم تحرير html
اذا لاتتوفر على مكتبة أيقونات font awesome إبحث عن الوسم </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>
2.قم بإضافة  كود Css هذه أيضا فوق وسم </head> :
<style type='text/css'>/* Go Up and Down */
#scrollToTop{display:none;list-style:none;position:fixed;bottom:49%;left: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>
<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>


الاشتراك في: تعليقات الرسالة ( Atom )