How to add side shortcut widget in blogger blog?

Blogger blogs generally do not occupy the entire page space and normally the side portions of blogger blogs remain underutilized. The best way to use these spaces is to introduce a side widget which remains fixed even if the reader scrolls down the webpage.

The side widget can be used to link your

1. Facebook fan page or profile.
2. Twitter profile page
3. LinkedIn Profile page
4. RSS feed subscription link
5. Email Subscription link and much more.

If you think you might have to modify your blogger template then don't worry its much simpler than you are thinking. To add the side widget you do not need very special HTML skills.

Just follow below steps to introduce the side widget.

1. From Design mode simply add a Custom HTML.

2. Modify  the below mentioned code to add your own links to Twitter, Facebook, Linked in etc. You can simply remove any link like Twitter, Facebook, LinkedIn or Email subscription in case you do not have that particular page or link.

<div style="position: fixed; top: 120px; left: 2px;"><br />
<!--Shot Cut Icon 1 RSS Feed-->
<a href="Put your RSS Feed Link here" target="_blank"><img src="http://cdn1.iconfinder.com/data/icons/socialize-icons-set/48/rss.png" alt="RSS Feed" width="48" height="48" /></a><br />

<!--Shot Cut Icon 2 Twitter-->
<a href="Put your Twitter profile Link here" target="_blank"><img src="http://cdn1.iconfinder.com/data/icons/socialize-icons-set/48/twitter.png" alt="Follow us on Twitter" width="48" height="48" /></a><br />

<!--Shot Cut Icon 3 Facebook-->
<a href="Put your facebook fanpage link here" target="_blank"><img src="http://cdn1.iconfinder.com/data/icons/socialize-icons-set/48/facebook.png" alt="Find us on Facebook" width="48" height="48" /></a><br />

<!--Shot Cut Icon 4 LinkedIn-->
<a href="Put your Linkedin profile link here" target="_blank"><img src="http://cdn1.iconfinder.com/data/icons/socialize-part-2-icons-set/48/linkedin.png" alt="Find us on Linked In" width="48" height="48" /></a><br />

<!--Shot Cut Icon 5 Email Subscription-->
<a href="Put your email subscription link here" target="_blank"><img src="http://cdn2.iconfinder.com/data/icons/onebit/PNG/onebit_42.png" alt="Get free emails in your inbox" width="48" height="48" /></a>
</div>

 

3. Now Just copy paste the modified code in the custom HTML widget and place it anywhere you like on the page(It really does not matter as the location of the display is fixed in the code.
4. Now press the apply button and you are all set, your side widget it perfectly ready.

General Tip: You can play with the below code for placement (location of widget) you can use left, right and any pixel for the perfect placement. The code I have mentioned is generic in nature and is useful for all screen resolutions in case you need some thing else you are free to modify it as per your wish.

<div style="position: fixed; top: 120px; left: 2px;"><br />

 

The advantage of this side widget is:

1. It remain in a fixed position even if the user scrolls down.
2. It loads very fast as there is no animation pure html code.
3. The empty side portion is utilized very effectively.

Do share your experience here, I will be more than happy to help you in case you need any help. This tip can be used not just in Blogger blogs but also in WordPress blogs or any blogging platform which allow custom HTML widgets.