كود التنقل "زر الصعود والهبوط "في الصفحات لمدونات بلوجر 2020

         بسم الله الرحمن الرحيم

من المعروف أن مدونات بلوجر Blogger تفتقر إلي العديد من الأضافات ، وعند دخولك

إلي عالم بلوجرBlogger World تجد التصميم الكلاسيكي القديم ،الذي ينقصه عديد من المميزات والاكواد التي تسهل علي زائري مدونتك الأجراءات وتجعل الزائر يتصفح موقعك ويقضي أطول فترة

ممكنه، علي عكس خدمة ووردبريس، التي تمتلك الكثيرمن المميزات والاضافات ،لكن لا تقلق

بأذن الله أخواتي الكرام سأحاول أن أجلب لكم أهم الاضافات التي تساعدك في رفع مستوي

جودة الموقع خاصتك، وتكون متوافقة تماما مع مدونات البلوجر الجديدة،وأيضا طريقة أصافة أكواد

جافا سكريبت لمدونات بلوجر للمبتدئين علي قالب المدونة ، واضافة أكواد الميتاتاج الجديدة،

وأيضا سنقوم بشرح تفصيلي لإنشاء مدونة بلوجر عربي أو باللغة الإنجليزية وأي لغة تريد

أيقونة رمز الهبوط لأسفل الصفحة

سنبدأ بوضع لكم اكواد بلوجر جاهزة للتركيب، أول أضافة هي التنقل أو مايعرف بـ

"زرالصعود والهبوط "

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

إلي أسفلها بضغطة واحدة ، وستفيد هذه الإضافة أصحاب التدوينات والمقالات الكبيرة،

كذلك تستخدمها مواقع كثيرة لفائدتها لكثير من المستخدمين محبي القراءة.

أولا

ستقوم بالدخول إلي مصدر مدونتك وبعدها تضغط علي المظهر ثم تختار تحرير HTML

بعد ذلك تضغط Ctrl +F ليفتح لك خانة البحث ثم تبحث عن [<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>

ثانيا

تقوم نسخ ووضع الكود التالي فوق نفس الكلمة [<head/> ] أحرص علي ترك مسافة بين الاكواد بالضغط علي Enter

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

ثالثا

تقوم بالبحث في نفس المربع عن رمز  [<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>

وبذلك تكون أنتهت العملية قم بحفظ المظهروأرجع إلي مدونتك ستجدها مفعلة بإذن الله

نتمني أن تكونوا أستفدتم من الشرح وإذا واجهت مشكلة أكتب لنا في التعليقات 

والسلام عليكم ورحمة الله