How To Add Subscribe Button In Blogger

Long time ago I ever post an article relating about how to connect Facebook and twitter into your Blog. As we know that two popular social network and have a huge amount of member are both “Facebook” and “Twitter”, it means that by adding these two social network you will be able to increase your Blog significantly. Today, I would like to share another article about how to make cool subscribe button include Rss, Email subscribe, facebook and twitter. Actually, there have many thousand of site teach you to make subscribe button, creating Social network of your Blog is a must, this is definitely helping you to stay connect with people around the world. Moreover, some of you may want to create subscribe button like below:

The subscribe button above which include 4 buttons looks nice right, let me tell you an easy way to make it the same like above subscribe button. All you have to do is just follow my instruction:

1. Log in into your Blogger account

2. click Design > Edit HTML

3. Don’t forget to download your full backup template (this is very important to avoid any mistake while you are changing or adding script)
4. Now, find the code: ]]></b:skin> , use Ctrl+F to find it.
5. place the following code below just immediately BEFORE code above

ul#soc{width:200px;margin:10px 0px;list-style:none;}

ul#soc li{display:inline;}

ul#soc li a{display:block;float:left;height:

32px;background-image:url('http://3.bp.blogspot.com/

-otikS-yCcLM/Tb6JxgyjKxI/AAAAAAAAACk/_90ZpjXNZCk/s1600/

sprite.png');

text-indent:-9999px;}

ul#soc li a.facebook{width:35px;background-position:0 0;}

ul#soc li a.twitter{width:45px;background-position:-35px 0;}

ul#soc li a.rss{width:40px;background-position:-80px 0;}

ul#soc li a.email{width:30px;background-position:-120px 0;}

ul#soc li a.facebook:hover, ul#soc li a.facebook:

focus{background-position:0 -32px;}

ul#soc li a.twitter:hover, ul#soc li a.twitter:

focus{background-position:-35px -32px;}

ul#soc li a.rss:hover, ul#soc li a.rss:

focus{background-position:-80px -32px;}

ul#soc li a.email:hover, ul#soc li a.email:

focus{background-position:-120px -32px;}

]]></b:skin>

6. then save the template
7. Next is to go to dashboard and choose Design > Add a gadget >  choose HTML/javascript

8. Copy and Paste the following code below into your HTML gadget

<ul id="soc">

<li><a class="facebook" title="Be my facebook fan" href=

"http://www.facebook.com/pages/How-To-In-Blogger/

166729273361572">

Facebook</a></li>

<li><a class="twitter" title="Folow me on Twitter" href=

"http://twitter.com/howtoinblogger">Twitter</a></li>

<li><a class="rss" title="Subscribe via RSS" href=

"http://feeds.feedburner.com/howtoinblogger">rss</a></li>

<li><a class="email" title="Subscribe via Email" href=

"http://feedburner.google.com/fb/a/mailverify?uri=

howtoinblogger">

email</a></li>

</ul>

9. Now, customize subscribe link that you must to change the red color above code with your own subscribe code. Save it. If anything goes right, you will see your subscribe button on your Blog.

Ok, I hope you can do it guys and keep trying to make your Blog become more beautiful and professional. If you like it this article just subscribe and comment it. Good Luck