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

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

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

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


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



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




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


اولا سوف تبحث عن هذا الوسم</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>

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

هناك 14 تعليقًا :

لماذا لا تظهر الاعلانات على مدونتي في معاينة الموبايل

كيف اضع الاكود في التدوينة مثل هذا

https://wdbloog.blogspot.com/2016/04/blog-post.html

ممكن هذه الاضافة في اقري وقت من فضلك
https://b.top4top.net/p_854kjnvt1.png

يوجد مثلها على المدونة فى قسم
إضافات بلوجر


او ايض افى قسم
جافا سكريبت


لم أجدها !!!
أريد هذه الاضافة بالضبط .

احصل على الإضافة المقاربه لها
وقم بتنسيقها كما تريد

شكرا لك كيف يظهر تاريخ انشاء التدوينة أسفل عنوانها عند البحث في جوجل لانه لا يظهر عند البحث على مواضيع مدونتي ارجو الرد

عليك وضعه داخل مدونتك وسوف يظهر مع الوقت

بارك الله فيك من رأي انك أفضل مدونة عن بلوجر وفقك الله

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