كيفيه اضافه زر الصعود للاعلى فى مدونه بلوجر _ How to add a button to climb to the top in a blog Blogger

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

=================

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

scrolling back to top button.

scrolling back to top button.

scrolling back to top button.

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

_ How to add a button to climb to the top in a blog Blogger

تعتبر هذه الاضافه ايضا لسهوله الحركه وذات الصله داخل موقعك بسرعه

حيث تتيح للزائر سرعه العوده الى اعلى الصفحه اذا لم يجد ما يراه مناسبا له فى هذه الصفحه وتضع امامه خيارات عديده 

او اذا كانت الصفحه طويله بما يكفى بالاحساس بالملل سوف يضغط سريعا على هذا الزر ( العوده الى الاعلى ) 

حيث علامات التبويب المختلفه التى سوف يختار منها ما يريد 

والاضافه سهله وخفيفه ولا تجعل موقعك ثقيلا ابدا

====================

خطوات تنفيذ الاضافه

1- فتح مدونه بلوجر تحرير القالب

2- البحث عن هذا الكود 

]]></b:skin>

ثم نضع الكود التالى فوقه مباشره

 

<a href="#" id="toTop">^ Scroll to Top</a><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script><script type='text/javascript'>/*----------------------- * jQuery Plugin: Scroll to Top * by Craig Wilson, Ph.Creative (http://www.ph-creative.com) * Bring to you by Zen from http://zenplate.blogspot.com * Copyright (c) 2009 Ph.Creative Ltd. * Description: Adds an unobtrusive "Scroll to Top" link to your page with smooth scrolling. * For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx * Do not delete these infomation * Version: 1.0, 12/03/2009 -----------------------*/ $(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}}); $(function() { $("#toTop").scrollToTop(); }); </script>

ثم نبحث عن الكود 

 </body>  

ونضع الكود التالى فوقه مباشره 

<a href="#" id="toTop">^ Scroll to Top</a><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script><script type='text/javascript'>/*----------------------- * jQuery Plugin: Scroll to Top * by Craig Wilson, Ph.Creative (http://www.ph-creative.com) * Bring to you by Zen from http://zenplate.blogspot.com * Copyright (c) 2009 Ph.Creative Ltd. * Description: Adds an unobtrusive "Scroll to Top" link to your page with smooth scrolling. * For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx * Do not delete these infomation * Version: 1.0, 12/03/2009 -----------------------*/ $(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}}); $(function() { $("#toTop").scrollToTop(); }); </script>


والان قم بحفظ القالب

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

<!--BACK TO TOP STARTS--><a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1UZhsSLRadZeSIu1LP3eCgq-BXCOnmJ64laAPzRQGgeHZWJQvtQiXHvhNg3Hw0KxFVXYx3r7Pm_wUhf0T3dYVR0PwK4zBNP-gbA_8ExH_iW34DGiXCtqmCL1irhPclrKMjDt_lKvCUJw/s1600/back-to-top-button.png "/></a><!--mybloggersworld.com--><!--BACK TO ENDS-->- See more at: http://blogseofb.blogspot.com/2014/07/11.html#sthash.TqD3VKTa.dpuf

By mao

Similiar tagsاضافات بلوجردروس بلوجر