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>:
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-->If you want it to be on the left, use this instead:
<div id='ssfloatingicons'>
<div>
<a href="http://facebook.com" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfYTfuNwBlGIlSmJ6gGGBojVSPS8jdyWUDWq8Nkv1dLTqlcac0zXCdrNgXDtQp4WzgL6jYcA7LxOTpa5oTQKpbG985EpJhL896F0DlikepddgUhK1iJzT8lSg0nLc2fBvGq7DqYPmn6KQJ/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/AVvXsEjaZmBcw-5EwgaC2vhV0fK8CxpfNfdl3E0B4YXuHdPtv6TWdVZTKsfgdnar9ss7TE-xE1dtBne2u9OcuyPM4r6WQ8W_Qgt9piHpDvhlD4FiQx1liyXpoSNyyuVy3XxwJXCNS496lqC-b5YW/s1600/flickr.png" />
</a></div>
<div>
<a href="http://feeds.feedburner.com/voicesfromsouth" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGRXv5S0CVfPm4ELYbY_WkpWri-9yUOwAADgEPQkoZm53kFOyXS3EuCLv8_H8ptoS5LD_K8NeccSE-5n2PvwJBIT3FidEKu1V85tPlu6OFBuqi62yiVkGABlyW5itjiBJeWfv15FG_OtGE/s1600/rss.png" />
</a></div>
<div>
<a href="http://twitter.com" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi52mGSCD8AQCWvato_9Wtt-i5x-OrcgnDdwvg-8onTKKoO4mRqCQnG8AFBhww39_Rn7hiqy6Jn6n6weqR3lZK9SuXnobjzom2ifbYs5mPZlLI6-kL2iT2Y-gWx8Ur-_inLjNJtsrZ04EMu/s1600/twitter.png" />
</a></div>
</div>
<style>
#ssfloatingicons{
position: fixed;
top: 100px;
right: 0;
padding: 5px;
z-index: 10;
}
</style>
<!--SS Floating Icons Ends-->
<!--SS Floating Icons Starts-->The code in place (starting portion):
<div id='ssfloatingicons2'>
<div>
<a href="http://facebook.com" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfYTfuNwBlGIlSmJ6gGGBojVSPS8jdyWUDWq8Nkv1dLTqlcac0zXCdrNgXDtQp4WzgL6jYcA7LxOTpa5oTQKpbG985EpJhL896F0DlikepddgUhK1iJzT8lSg0nLc2fBvGq7DqYPmn6KQJ/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/AVvXsEjaZmBcw-5EwgaC2vhV0fK8CxpfNfdl3E0B4YXuHdPtv6TWdVZTKsfgdnar9ss7TE-xE1dtBne2u9OcuyPM4r6WQ8W_Qgt9piHpDvhlD4FiQx1liyXpoSNyyuVy3XxwJXCNS496lqC-b5YW/s1600/flickr.png" />
</a></div>
<div>
<a href="http://feeds.feedburner.com/voicesfromsouth" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGRXv5S0CVfPm4ELYbY_WkpWri-9yUOwAADgEPQkoZm53kFOyXS3EuCLv8_H8ptoS5LD_K8NeccSE-5n2PvwJBIT3FidEKu1V85tPlu6OFBuqi62yiVkGABlyW5itjiBJeWfv15FG_OtGE/s1600/rss.png" />
</a></div>
<div>
<a href="http://twitter.com" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi52mGSCD8AQCWvato_9Wtt-i5x-OrcgnDdwvg-8onTKKoO4mRqCQnG8AFBhww39_Rn7hiqy6Jn6n6weqR3lZK9SuXnobjzom2ifbYs5mPZlLI6-kL2iT2Y-gWx8Ur-_inLjNJtsrZ04EMu/s1600/twitter.png" />
</a></div>
</div>
<style>
#ssfloatingicons2{
position: fixed;
top: 100px;
left: 0;
padding: 5px;
z-index: 10;
}
</style>
<!--SS Floating Icons Ends-->
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:
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>If you want to add more than four images, just duplicate the skeleton above appropriately.
<a href="INSERT_YOUR_TARGET_LINK_HERE" target="_blank">
<img src="INSERT_DIRECT_LINK_TO_YOUR_ICON_HERE" />
</a></div>
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.
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.
0 comments:
Post a Comment