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

شرح طريقة تركيب و اضافة زر الصعود "scroll to top" للانتقال الى اعلى المدونة و زر النزول  "scroll to bottom" للانتقال الى اسفل المدونة او المواضيع على مدونة بلوجر blogger

السلام عليكم احبتي متتبعي دورة بلوجر على مدونة علوم و تقنيات فى هذا الدرس الذي سنشرح فيه طريقة اضافة زر الصعود "scroll to top" للانتقال الى اعلى المدونة و زر النزول  "scroll to bottom" للانتقال الى اسفل المدونة او المواضيع على مدونة بلوجر , و ستكون هذه الازرار ظاهرة على بشكل ثابت على جانب الايمين للمدونة حتى تسهل على الزوار الانتقال صعودا و نزولا فى مدونتك .

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

طريقة تركيب زر الصعود "scroll to top" و زر النزول  "scroll to bottom" فى مدونة بلوجر

1 - تدخل الى قالب مدونتك و نبحث عن الوسم </b:skin>  و نضع كود CSS فوقه مباشرة

/* START CSS The "go to top" and "go to bottom" links.by:www.arabes1.com */ #toplink, #botlink { position: fixed; right: 7.5%; bottom: 50%; padding: 11px 9px 11px 11px; margin: 0 -20px 0 0; color: #666; font-size: 1.5em; background: #f0f0f0 url(images/Standard/catbg.gif) 0 5px repeat-x; border: 1px solid #b4b4b4; border-bottom: 1px solid #b8b8b8; border-radius: 6px 3px 0 0; z-index: 99; box-shadow: 1px 2px 3px rgba(0,0,0,0.25); } #botlink { top: 50%; padding: 10px 9px 11px 11px; bottom: auto; border: 1px solid #b4b4b4; border-top: 1px solid #ddd; border-radius: 0 0 3px 6px;} #toplink:hover, #botlink:hover { color: #a52311; background: #fcfcfc; text-decoration: none; } /* END CSS The "go to top" and "go to bottom" links.by:www.arabes1.com */

2- نبحث عن الوسم </head> و نضع هذا كود SCRIPT فوقه مباشرة

<script type='text/javascript'> // Begin jQuery section.BY www.arabes1.com $.fn.ready(function() { // Smooth scroll to top. $("a[href=#top]").live("click", function(e) { $("html,body").animate({scrollTop:0}, 1000); e.preventDefault(); }); // Smooth scroll to bottom. $("a[href=#bot]").live("click", function(e) { $("html,body").animate({scrollTop:$(document).height()}, 1000); e.preventDefault(); }); }); </script>

3 - نبحث عن الوسم </body> و نضع هذا كود HTML فوقه مباشرة

<!-- START HTML The "go to top" and "go to bottom" links.by:www.arabes1.com --> <a href="#top" id="toplink" title="Go to top">↑</a> <a href="#bot" id="botlink" title="Go to bottom">↓</a>';

و مبروك عليك ثمت اضافة ازرار الصعود و النزول على مدونتك
ملاحظة : يمكن تغيير الالوان و حجم ازرار الصعود و النزول على حسب رغبتك و يتم هذا فى اكواد CSS

شرح بالفيديو حول كيفية تركيب زر الصعود "scroll to top" و زر النزول  "scroll to bottom" فى مدونة بلوجر 

تعديل المقال