Sunday, May 8, 2011

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:
subscribe button
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:
CSS image sprites
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
    blogger design
  3. Click Edit HTML sub menu
    blogger edit html
  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('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>
  7. Click Save Template
  8. First step has complete

Step #2
  1. Considered that you still login on blogger
  2. Click Page elements menu
    page elements tab
  3. Click Add a Gadget
    add a gadget link
  4. Click Plus (+) for HTML/ Javascript gadget
    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

0 comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...

About Me

My photo
"BLOGGING" is my passion. I am crazy about it. I love to share knowledge with others, So I found this platform is good to share knowledge with everyone. And also I like to surf net a lot to search for the latest technologies and gadgets.