إضافة زر الصعود لأعلي في بلوجر بشكل جديد ومميز

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

شرح تركيب الإضافة

انتقل الي التخطيط في بلوجر

ثم اضف أداة في أي مكان في التخطيط 

ثم انقر علي HTML 

ثم ضع بداخلها الكود التالي : 

<style type='text/css'> /* CSS Top Down Hm */ #BounceToTop {background:#fff;text-align:center;position:fixed;bottom:10px;right:10px;cursor:pointer;width:30px;height:20px;padding:5px;display:none;border-radius:2px;} #BounceToTop:before {content:"";position:absolute;bottom:5px;right:5px;width:0; height:0;border-style:solid;border-width:0 15px 20px 15px;border-color:transparent transparent #00acd6 transparent;line-height:0;transition:all 0.3s ease-out;} #BounceToTop:hover:before {content:"";position:absolute;bottom:5px;right:5px; width:0;height:0;border-style:solid;border-width:0 15px 20px 15px;border-color:transparent transparent #00c0ef transparent;line-height:0} #BounceToTop:after {content:""; position:absolute;bottom:5px;right:11px;width:0; height:0;border-style:solid;border-width:0 9px 12px 9px;border-color:transparent transparent #fff transparent;line-height:0;} #GoToDown {background:#fff;text-align:center;position:fixed;bottom:10px;right:60px;z-index:999;cursor:pointer;width:30px;height:20px;padding:5px;border-radius:2px;} #GoToDown:before {content:"";position:absolute; bottom:5px;right:5px; width:0;height:0;border-style:solid;border-width:20px 15px 0 15px;border-color:#E74C3C transparent transparent transparent;line-height:0;transition:all 0.3s ease-out;} #GoToDown:hover:before {content:"";position:absolute; bottom:5px; right:5px;width:0;height:0;border-style:solid;border-width:20px 15px 0 15px;border-color:#C0392B transparent transparent transparent;line-height:0} #GoToDown:after {content:"";position:absolute;top:5px;right:11px;width:0; height:0;border-style:solid;border-width:12px 9px 0 9px;border-color:#fff transparent transparent transparent;line-height:0;} </style> <script type='text/javascript'> $(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').fadeIn(); } else { $('#BounceToTop').fadeOut(); } }); $('#BounceToTop').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); var $elem = $('body'); $('#GoToDown').click(function () { $('html, body').animate({scrollTop: $elem.height()}, 4000); $('#GoToDown').fadeOut() }); $('#BounceToTop').click(function () { $('#GoToDown').fadeIn() }); }); </script> <div id='BounceToTop'> </div> <div id='GoToDown'> </div>