Add jquery Back to Top and Move to bottom Blogger widget

Add a smooth scrolling query Back to top and move to bottom Blogger widget which make the blog post with length of post which makes the visitors to scroll down to bottom of the page.This widget will scroll to bottom of the page and top in seconds.This is pretty nice widget that we had already posted back to top with move to comment blogger widget.

Adding jquery Back to top and move to bottom widget CSS

Add the css code for jquery blogger widget that consists of few optimizations to adjust in blogger templates. This widget can be used in both default and custom blogger templates.

• Log in to blogger.
• Then search for ]]></b:skin>
• Then above or before that code paste the below code.

.blog4al_up{
padding:7px;
background-color:white;
border:1px solid #CCC;
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr31_eknpxFG_wwIq9m_3QG7Qk24NqwocHy74mmM8ozoWIKIX7H409aQXfjAS8RaeIVYtfVZDacx4s9oi9_X92EGOF8o3cxjmfBs6siHDGFUEPdQnie6C1jgtAphysX1zmdms5hskr4Lo/s16/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px;
height:20px;
bottom:280px;
right:5px;
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.blog4al_down{
padding:7px;
background-color:white;
border:1px solid #CCC;
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDZJ5TBViHTrn7DeOEIBb2xSqPrHHODMBLODJEoTeLf6Eba_5rMTEs8uhwUyFTizPbz5DrUVJMGDJ0cOrimW-S1nc39ccYpchuZx_NA0TSJWBUvaXVCvgFlstaid2s5XnLZxHi-W0_mIM/s16/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px;
height:20px;
bottom:242px;
right:5px;
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

Adding jquery Back to top and move to bottom widget script

Now we had added the widget css, now to add the jquery script to blogger template.This script is very simple and doesn't affect the loading time of the page.

• Now search for </body>
• Then add the below code above that code.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<div class='blog4al_up' id='blog4al_up' style='display:none;'/>
<div class='blog4al_down' id='blog4al_down' style='display:none;'/>
<script src="https://blog4al.googlecode.com/files/jquery-back-to-top-and-bottom.js">
/* blog4al jquery blogger widget for Back to top and move to bottom*/
</script> 

• Now save the template.

Now you can see a back to top and move to bottom widget blogger widget.Have any trouble comment it below?