How to Create Subscribe Buttons

Someone through my facebook page asked about how to create subscribe buttons on facebook, twitter, and feeds as well as on this How To In Blogger blog.

The following is the subscribe buttons which was meant:

To create such subscribe buttons above is very easy, just follow the steps below.

Create Subscribe Buttons Using CSS Image Sprites

The technique to create subscribe buttons which will described is inspired by the creating awesome menu technique which using CSS image Sprite that is using one image background media for several buttons which considered more efficient from the blog loading aspect. Background images used are as follows:

Without elaborating, for you who interested to create subscribe buttons using CSS sprite imagetechnique, just follow the steps below:

Step #1

1. Please login to blogger using your ID
2. Click Design
   
3. Click Edit HTML sub menu
   
4. Do the backup for your template first for secure then click Download Full Template
5. Find the code: ]]></b:skin>
6. Remove the above code and replace with the following code:

   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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkqWhQaabmhyphenhyphenZJNXT0oLzj-HgqLkL-KIZmN9mrbzCbPB31bB7-naEqA4KKapxlX7R_AS7gObTPeMGlYU7luKVICmbx8p1_4I5FaZ3brUu2FCC2SUrkqNYE7eoJh-D2oVCAp_F_1CcYEkE/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>

7. Click Save Template
8. First step has complete

Step #2

1. Considered that you still login on blogger
2. Click Page elements menu
   
3. Click Add a Gadget
   
4. Click Plus (+) for HTML/ Javascript gadget
   
5. Paste the following code on coloumn. Click Save

   <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>
   

6. If you want to move the gadget recently created position, you can just move it and click Save button which on top to finish
7. Done and please to check the result

Customize Subscribe Links

From the steps above there is some thing you should change that is replace the existing subscribe link with yours. Remember! The code above just an example, you should change the subscribe link with your subscribe code. Here is the code that you need to edit:

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

Change the link above with your facebook address or facebook page address.

http://twitter.com/howtoinblogger

Change the code above with your twitter address

http://feeds.feedburner.com/howtoinblogger

Change the code above with your blog feed address

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

Change the code above with your email blog subscribe

Posted in: Blogspot