Blogger Floating Icons

Iskandar Blogger 1:25 AM
This one is a request from blog reader RaindropSoup. She wants to know if the concepts used in 'Blogger Christmas Banner' and 'Blogger New Year Banner' tutorials can be extended to work with three or four images, all at one side, with links. Well, you almost certainly can. The concept remains the same. You just have to wrap your individual images in div tags to force line breaks among them. Let' cut to the chase.



Step 1:

If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) -

If you're using the new Blogger interface: Go to Dashboard - Template - Backup/Restore - Download Full Template - Close -  Edit HTML - Proceed - 

Find for </head> - Paste the following directly below </head>:
<!--SS Floating Icons Starts-->
<div id='ssfloatingicons'>
<div>
<a href="http://facebook.com" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghpiUSfcR8t7aEqUOv64cC5FitDA52ONwTjCByg3d3TVS5jb0LoASkW1J5MT6425FWX5vs4xIolH26HfB6zBnEWYBQpslyl4r34kFg7NDajV2qsHe45gGSKWj_EN4oIDwpbxycxpqverO7/s1600/facebook.png" />
</a></div>
<div>
<a href="http://www.flickr.com/photos/yoboy2/" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ3pA0sUuLF_Lbfyvt-q7tSOMryIv5FKV9zzd-UJi97wyMvekI_LkE94hq4hZkj5nG4kEQAar-6ZzeieL50cOTo8BI5kc78FlodEkro_mZz4QyXv26mFjOSZCTK2MB-ERNYbUt8tfDBNQb/s1600/flickr.png" />
</a></div>
<div>
<a href="http://feeds.feedburner.com/voicesfromsouth" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7OMT9tfT8fmgJAPdIKsv25hVQWvRBaAGeEQUEfi_lRQVA5xZxlBnZIAvOJEb1gQve4e3ZyaNkfWInbWM_EL7PxVqeyx1EIjnnJoxqY70_AGewdxieaGMYz9KLk7LxL4NYDe7IfAuFymeS/s1600/rss.png" />
</a></div>
<div>
<a href="http://twitter.com" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9jAWV6LDFBlduBsYN3hML_0TaA0kHA3AigeXvxyYEZLDnbpmCfG4Jp9tAaJpoDAzO4wArXL0aELTRbq51_P5DUyxN1Y80KaUtJ043hwGeHVe3-h0zpAzpXSiZxAc1WWQ6wmJy4vfWLAQf/s1600/twitter.png" />
</a></div>
</div>
<style>
#ssfloatingicons{
position: fixed;
top: 100px;
right: 0;
padding: 5px;
z-index: 10;
}
</style>
<!--SS Floating Icons Ends-->
If you want it to be on the left, use this instead:
<!--SS Floating Icons Starts-->
<div id='ssfloatingicons2'>
<div>
<a href="http://facebook.com" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghpiUSfcR8t7aEqUOv64cC5FitDA52ONwTjCByg3d3TVS5jb0LoASkW1J5MT6425FWX5vs4xIolH26HfB6zBnEWYBQpslyl4r34kFg7NDajV2qsHe45gGSKWj_EN4oIDwpbxycxpqverO7/s1600/facebook.png" />
</a></div>
<div>
<a href="http://www.flickr.com/photos/yoboy2/" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ3pA0sUuLF_Lbfyvt-q7tSOMryIv5FKV9zzd-UJi97wyMvekI_LkE94hq4hZkj5nG4kEQAar-6ZzeieL50cOTo8BI5kc78FlodEkro_mZz4QyXv26mFjOSZCTK2MB-ERNYbUt8tfDBNQb/s1600/flickr.png" />
</a></div>
<div>
<a href="http://feeds.feedburner.com/voicesfromsouth" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7OMT9tfT8fmgJAPdIKsv25hVQWvRBaAGeEQUEfi_lRQVA5xZxlBnZIAvOJEb1gQve4e3ZyaNkfWInbWM_EL7PxVqeyx1EIjnnJoxqY70_AGewdxieaGMYz9KLk7LxL4NYDe7IfAuFymeS/s1600/rss.png" />
</a></div>
<div>
<a href="http://twitter.com" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9jAWV6LDFBlduBsYN3hML_0TaA0kHA3AigeXvxyYEZLDnbpmCfG4Jp9tAaJpoDAzO4wArXL0aELTRbq51_P5DUyxN1Y80KaUtJ043hwGeHVe3-h0zpAzpXSiZxAc1WWQ6wmJy4vfWLAQf/s1600/twitter.png" />
</a></div>
</div>
<style>
#ssfloatingicons2{
position: fixed;
top: 100px;
left: 0;
padding: 5px;
z-index: 10;
}
</style>
<!--SS Floating Icons Ends-->
The code in place (starting portion):



Step 2:

Now that you have added the sample icons to your blog, all you have to do is modify the links and replace the images that I have used with that of yours. In the code above, I have used four social media icons. You can get fancier social media icons if you Google for 'Social Media Icons' or something to that effect. Once you've gotten your set of icons, upload it somewhere (yes you can upload these icons to one of your posts) and get it's direct link (if you upload to one of your posts, click on Edit HTML to see its direct link).

Once you have the direct links of your icons, just insert them into the code. Also, modify the link to reflect the target link that you want the browser to open when the icon is clicked:
<div>
<a href="INSERT_YOUR_TARGET_LINK_HERE" target="_blank">
<img src="INSERT_DIRECT_LINK_TO_YOUR_ICON_HERE" />
</a></div>
If you want to add more than four images, just duplicate the skeleton above appropriately.

Step 3:

You have inserted the icons to your blog, and you have customized the icons and their links. There isn't anything left for you to do. If you're unhappy with the vertical positions of the icons, or if the icons are placed too near to the side of your blog, you can adjust this by adjusting the value top (line 23) and padding (line 25) in the code.

That will be all. Have fun.