|
|
|
Few days before, I found a blog which had email me, facebook, twitter and RSS icons on the sidebar which attracted me a lot! So, I thought why not find out the code for it and make a post. I'm pretty sure many people would like to add this widget to their blog. However, there is one small problem with this code, the animation like stuff works only with Mozilla Firefox but, not in IE (especially the older version, that is, 6.0). If you are still wondering how that widget would look, take a look at the following picture.
I hope you are pretty clear with what I was blabbering for quite sometime. Any way, now let us get to our work by adding this stuff in our blogs. Follow the simple steps given below.1. Go to "Design->Edit HTML. Make a backup of your template before modifying the HTML by clicking on the "Download full template" link at the top of the page.
2. Now, search for the following line in your template. Use "CTRL+F" to fasten your search.
]]></b:skin>
3. Download the following text file namely, CSS For Icons. Once, the download is complete. Open the text document and paste the code in it just above the line mentioned in step 2.4. Again, do a search for the following line in your template.
<div id='sidebar-wrapper'>
5. Paste the following piece of code just after the above mentioned line.<div align='center'>
<div id='subscribe'>
<ul class='subscribe_icons'>
<li class='subscribe_twitter'><a href='http://twitter.com/YOURUSERNAME' rel='nofollow' target='_blank'>Twitter</a></li>
<li class='subscribe_facebook'><a href='http://www.facebook.com/YOURUSERNAME' rel='nofollow' target='_blank'>Facebook</a></li>
<li class='subscribe_rss'><a href='http://feeds2.feedburner.com/YOURFEEDNAME' rel='nofollow' target='_blank'>RSS</a></li>
<li class='subscribe_email'><a href='http://feedburner.google.com/fb/a/mailverify?uri=YOURFEEDNAME&loc=en_US' rel='nofollow' target='_blank'>Email</a></li>
</ul>
<div class='clear'/>
</div>
</div>
<div id='subscribe'>
<ul class='subscribe_icons'>
<li class='subscribe_twitter'><a href='http://twitter.com/YOURUSERNAME' rel='nofollow' target='_blank'>Twitter</a></li>
<li class='subscribe_facebook'><a href='http://www.facebook.com/YOURUSERNAME' rel='nofollow' target='_blank'>Facebook</a></li>
<li class='subscribe_rss'><a href='http://feeds2.feedburner.com/YOURFEEDNAME' rel='nofollow' target='_blank'>RSS</a></li>
<li class='subscribe_email'><a href='http://feedburner.google.com/fb/a/mailverify?uri=YOURFEEDNAME&loc=en_US' rel='nofollow' target='_blank'>Email</a></li>
</ul>
<div class='clear'/>
</div>
</div>
6. Please edit the text mentioned in green color namely, "YOURUSERNAME" and "YOURFEEDNAME" with your user names and feed names respectively. Hope, that is self explanatory.
If you still need help in adding this widget, feel free to leave a comment and I will help you solve your problem!! See you soon in my next post with some more interesting tips and tricks...
Click here to subscribe to FREE email updates from "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!
Is a plugin for this icon on wordpress?
REPLY@GuaIndra.com: I don't think you have a plug in for these set of icons in Wordpress!! However, I am not an expertise with Wordpress. So, you may find out from some one else.
REPLYWhat do you do if you don't have the sidebar-wrapper section?
REPLY@AVM: It is upto you! You may place it any where u want in the template. It will work perfectly fine.
REPLYEverywhere I try it, it tells me that it won't work because "The reference to entity "loc" must end with the ';' delimiter.". I don't have 'sidebar-wrapper' anywhere in my template, so I've tried other places like div id='rightcol' and whether it's above, below, nothing works, and if I try to create an HTML gadget and paste the second section of text in there, no icons show up, only the links.
REPLY@AVM: Hey, it is very easy to rectify the above error. If that is the case, please send me your template to my mail address!
REPLYEverywhere I try it, it tells me that it won't work because "The reference to entity "loc" must end with the ';' delimiter.". I don't have 'sidebar-wrapper' anywhere in my template, so I've tried other places like div id='rightcol' and whether it's above, below, nothing works, and if I try to create an HTML gadget and paste the second section of text in there, no icons show up, only the links.
REPLYcan you pls show me how to add adsense and vertical share icons just below blogger post titles just like in this post.
REPLY@author: I will soon be posting about adding the vertical icons and Adsense below post titles. My next post will feature about the widget you asked, so keep in touch to get the updates!!!
REPLYtext document no longer works!!Help please :0)
REPLYUse the tab below to comment. No spam please!!!
POST YOUR COMMENT