Add a New Stylish Vertical Floating Share Button to Blogger
This is not the first set of floating share buttons I’ll be sharing on this blog but I realized there’s a need to update this cove and maybe change the styling a bit to make it look somehow similar to Digg Digg which I presently use. The need for a horizontal set of floating share buttons on your sidebar cannot be over emphasized since it plays a major role in making sure your contents gets shared on major social networks.
Digg is as good as dead and I’ve decided not to include it in this new set. Buttons included are: Facebook like, Facebook, share, Tweeter, Pinterest, Stumbleupon and Google +1. However, the “pin it” button won’t appear on the homepage, just post pages.
The Facebook share button stopped working on the previous sets of buttons but it’s fixed in this new one: users can like and share.
How to add the new floating share buttons to blogger
- Log in to your Blogger account and go to Template > Edit HTML
- Check the box labelled Expand Widgets Template
- Search for <html, leave a space and addxmlns:fb="http://ogp.me/ns/fb#" just after it. The resulting code should lok like this:
<html xmlns:fb="http://ogp.me/ns/fb#"
If this is already there, you don’t need to do it again.
- Search for
<data:post.body/>. If you have more than one of it in your template, search for <div class='post-footer-line post-footer-line-1'/>
- Download this text file
- In the line just below that, paste the whole content in the text file.
- Hit the Save Template button and view your blog.
To make the share butons float to the left instead of right, search for this code:
dc-float {position:fixed; bottom:15%; right:10px; float:left;
Replace with this:
dc-float {position:fixed; bottom:15%; left:10px; float:left;
You can check the demo here. You should note that these buttons only appear on post pages. Did you like the way the buttons appear? Got some questions not covered in the post? Please do let me know.
Post a Comment