I am very excited to announce one of the most anticipated widget that is inspired by Thenextweb blog that is equipped with Next, Previous posts buttons with social sharing buttons for posts. The widget also enables advanced scrolling that is that when you move a certain distance from the top of your blog, your widget would start to slide down with the page.
You can also see one of the previous posts that enables such sliding: Scrolling AdSense Ad After Moving Down a Certain Distance From Top.
Before we move any further, take a look at our previous widgets:
Navigate to your Blogger dashboard >> Template >> Edit HTML >> Proceed and backup your template.
Once the backup process is done, hit 'Expand widget template'.
Now look for the following code (Ctrl +F)
Once you have found the code, simply paste the following code beneath it.
[lock]
[/lock]
Now save your template and navigate to Layout section of your Blogger blog. Hit 'Add a Gadget' >> HTML/JavaScript.
Now paste the following widget java script with in it.
Now to adjust the following parameters according to your blog's layout:
Note: Always set the scroll1 + 40 value as the difference between the first two values for smoother scrolling. In case its not equal to the difference, the widget would get a little bump before it starts scrolling.
Hit save. Thats all!
You may like to read:
In case you need any help regarding the widget, leave out your queries below guys. It would be a pleasure to clarify the issues. If you liked the widget, DONT FORGET to share the post in your social circles.
You can also see one of the previous posts that enables such sliding: Scrolling AdSense Ad After Moving Down a Certain Distance From Top.
Before we move any further, take a look at our previous widgets:
- Stylize BuySellAds Banners With CSS3 Leaf Effect for Fast Sales!
- Stylizing Blogger Popular Post Widget With CSS3
- 'The Next Web' Featured Post Widget With Shadow Effect
How to add the widget?
Step #1 Go to Edit HTML
Navigate to your Blogger dashboard >> Template >> Edit HTML >> Proceed and backup your template.
Once the backup process is done, hit 'Expand widget template'.
Now look for the following code (Ctrl +F)
<div class='post-header-line-1'>
Once you have found the code, simply paste the following code beneath it.
[lock]
[
<div id='nxtprv'>
<div id='nxtprvbackground'>
<table style='width:725px;'>
<tr>
<td>
<a expr:href='data:olderPageUrl' id='next-article'>
← Prev Post
</a>
</td>
<td>
<a class='twitter-share-button' data-via='BLoggingeHow' href='https://twitter.com/share'>Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</td>
<td>
<iframe allowTransparency='true' expr:src='"//www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/>
</td>
<td>
<div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/>
</td>
<td>
<su:badge expr:location='data:post.url' layout='1'/>
</td>
<td>
<span class='st_sharethis_large' displayText='ShareThis'/>
</td>
<td>
<a expr:href='data:newerPageUrl' id='next-article'>
Next Post →
</a>
</td>
</tr>
</table>
</div>
</div>
<style>
#nxtprv {
position: absolute;
}
#next-article {
background: none repeat scroll 0 0 #EF4423;
border-radius: 2px 2px 2px 2px;
color: #FFFFFF;
float:left;
font-weight: bold;
height: 2em;
line-height: 2.125em;
padding: 0 0.875em;
text-decoration: none;
text-transform: uppercase;
vertical-align: top;
}
#next-article a:visited{
color:#FFFFFF;
}
#nxtprvbackground {
background: none repeat scroll 0 0 #FFFFFF;
border-bottom: 1px solid #D2D2D2;
border-top: 1px solid #D2D2D2;
color: #424242;
margin-bottom: 1em;
padding: 0.625em 0;
}
</style>
]
[/lock]
Step #2 Add the Sliding JavaScript
Now save your template and navigate to Layout section of your Blogger blog. Hit 'Add a Gadget' >> HTML/JavaScript.
Now paste the following widget java script with in it.
<script>
window.onload = function() {
function getScrollTop() {
if (typeof window.pageYOffset !== 'undefined' ) {
// Most browsers
return window.pageYOffset;
}
var d1 = document.documentElement;
if (d1.clientHeight) {
// IE in standards mode
return d1.scrollTop;
}
// IE in quirks mode
return document.body.scrollTop;
}
window.onscroll = function() {
var box1 = document.getElementById('nxtprv'),
scroll1 = getScrollTop();
if (scroll1 <= 500) {
box1.style.top = "540px";
}
else {
box1.style.top = (scroll1 + 40) + "px";
}
};
}
</script>
Now to adjust the following parameters according to your blog's layout:
To adjust the widget's distance from the top of the blog:
scroll1 <= 500To adjust the distance between the widget and the top when the widget is sliding state:
box1.style.top = "540px";
Note: Always set the scroll1 + 40 value as the difference between the first two values for smoother scrolling. In case its not equal to the difference, the widget would get a little bump before it starts scrolling.
so 540 - 500 = 40 = scroll1 + 40
Hit save. Thats all!
You may like to read:
- Add Elegant Email Subscription/Signup Widget To Your Blog
- Mashable Sharing Widget With Google+ Add To Circles / Search Bar
Need any help?
In case you need any help regarding the widget, leave out your queries below guys. It would be a pleasure to clarify the issues. If you liked the widget, DONT FORGET to share the post in your social circles.
