إضافة أداة Back to Top بشكل رائع في مدونة بلوجر

يعد زر الرجوع الي أعلي Back to Top أحد أهم العناصر الواجب توافرها في أي مدونة الكترونية ناجحة حيث تساعد جميع القراء علي الرجوع الي اعلي المدونة  الالكترونية الخاصة بك بضغة زر واحدة ..

فأحيانا قد يكون الموضوع المنشور طويلا للغاية أو قد يكون هناك الكثير من التعليقات أسفل الموضوع والقارئ أخذ يقرأ هذه التعليقات الي ان وصل الي الاسفل ولكنه بحاجة الي الرجوع الي اعلي بسرعة بدلا من التمرير الذي قد يأخذ وقتا طويلا.. لذلك هنا تأتي أهمية زر الرجوع الي أعلي Back to top .

إقرأ أيضاً: كيفية اضافة أداة موضوعات ذات صلة في قالب بلوجر

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

كيفية اضافة أداة Back to Top ؟

يمكنك اضافة هذه الاضافة عن طريق تطبيق الخطوين التاليتين بطريقة صحيحة..

الخطوة الاولي ( أخذ نسخة احتياطية للقالب)

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

الخطوة الثانية ( اضافة أكواد الاضافة )

تقوم بالتوجه الي المظهر ثم تعديل HTML ثم تقوم بالبحث عن الوسم </body> من خلاال الضغط علي CTRL + F وتقوم نسخ هذا الكود ولصقه أعلي الوسم …

<style>
#sbtbacktotop{
background: url(//1.bp.blogspot.com/-CH03QlSNpBY/UnCY1gMhmXI/AAAAAAAACaM/qZaVYNrP0-s/s1600/back-to-top-sprite-30224d9b.png) 0 0 no-repeat;
height: 130px;
width: 72px;
padding:5px;
position:fixed;
bottom: 5px;
right: 5px;
cursor:pointer;
transition:none;
z-index:15;
}
#sbtbacktotop:hover{
background:url(//1.bp.blogspot.com/-CH03QlSNpBY/UnCY1gMhmXI/AAAAAAAACaM/qZaVYNrP0-s/s1600/back-to-top-sprite-30224d9b.png)no-repeat;
background-position: 0 -142px;
}
</style>
<!-- Back to top button by SBT -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js'/>
<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function(){if($(this).scrollTop()>100)
{$("#sbtbacktotop").removeAttr("href");$("#sbtbacktotop").stop().animate(
{bottom:"0"},{duration:100,queue:false})}
else{$("#sbtbacktotop").stop().animate({bottom:"30000"},
{duration:8000,queue:false})}});$(function()
{$("#sbtbacktotop").click(function()
{$("html, body").animate({scrollTop:0},"slow");
return false})});
//]]>
</script>
<!-- Code provided to you by sbt -->
<a href='#' id='sbtbacktotop'></a>

الخلاصة

لقد تعلمت الآن كيفية إضافة أداة الرجوع  الي أعلي Back To Top الي مدونتك . قم بزيارة مدونتك وتحقق من الأداة الرائعة المفعمة بالحيوية في العمل ، آمل أن تكون قد أعجبك هذا الدرس ، وإذا كنت قد استفدت ؛ فيرجى مشاركتها مع أصدقائك ، فأنا أعمل بجد لتطوير المزيد من هذه الأدوات المصغرة الرائعة.