اضافة ازرار الصعود والنزول لمدونات بلوجر

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

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

اقرأ ايضا : كود جعل فيديوهات يوتيوب أي قالب بلوجر متجاوب مع جميع الشاشات.

كيفية تثبيت زر "التمرير إلى أعلى" وزر "التمرير إلى الأسفل" في مدونة Blogger:

أدخل نموذج مدونتك ، وابحث عن العلامة </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 */

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

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

نبحث عن الوسم و نضع هذا كود head فوقه مباشرة.

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

شكرا لكم لتطبيق المقال ونتمنى اضافة الاستفسار للرد عليكم وشكرا.