Advertisements

How To Add Beautiful Subscribe Section to Blogger

Posted by Lasantha Bandara on February 6th, 2010 File Under : css, feed burner, html, twitter, widget25 Comments
Advertisements

Do you like to add a good looking Subscribe section to your blog?Then simply follow the steps below.

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

<style type='text/css'>

#hsection{border:4px solid #D3D3D3;background-color:#e9e9e9;}
#hsection:hover{border:4px solid #BABABA;background-color:#e9e9e9;}

#sectionmy .sectionmy2 h2.subscription { border:0; margin:0; padding:6px 0 0 55px; height:42px; font-size:16px;font-family:&quot;Segoe UI&quot;,Calibri,&quot;Myriad Pro&quot;,Myriad,&quot;Trebuchet MS&quot;,Helvetica,Arial,sans-serif;
font-weight:bold; }

#sectionmy .sectionmy2 h2.rss { background:url(http://2.bp.blogspot.com/_4HKUHirY_2U/S209wcnxO5I/AAAAAAAAAw4/I7aEXRVYR8s/RSS.png) no-repeat top left; }

#sectionmy .sectionmy2 h2.email { background:url(http://3.bp.blogspot.com/_4HKUHirY_2U/S209s4_wFoI/AAAAAAAAAww/8VovLp1Yxlg/EmailRSS.png) no-repeat top left; }

#sectionmy .sectionmy2 h2.twitter { background:url(http://4.bp.blogspot.com/_4HKUHirY_2U/S209oJTU3UI/AAAAAAAAAwo/28dTiLvxvDQ/twitter.png) no-repeat top left; }

#sectionmy .sectionmy2 .subscription a { color:#252e28; text-decoration:none; }

</style>

NOTE : Host RSS.png , EmailRSS.png , twitter.png yourself.

4.Now go to Layout-->Page Element and click on "Add a gadget".

5.Select "html/java script" and add the code given below and click save.

<div id="hsection">
<div id="sectionmy">
<div class="sectionmy2">

<h2 class="subscription rss"><a href="YOUR-RSS-FEED-URL">SUBSCRIBE VIA RSS</a></h2>

<h2 class="subscription email"><a href="YOUR-FEEDBURNER-EMAIL-SUBSCRIPTION-URL">SUBSCRIBE VIA EMAIL</a></h2>

<h2 class="subscription twitter"><a href="YOUR-TWITTER-URL">FOLLOW ON TWITTER</a></h2>

</div></div>
</div>

NOTE : Replace YOUR-RSS-FEED-URL , YOUR-FEEDBURNER-EMAIL-SUBSCRIPTION-URL , YOUR-TWITTER-URL with your urls.

Look at the example below:

<div id="hsection">
<div id="sectionmy">
<div class="sectionmy2">

<h2 class="subscription rss"><a href="http://feeds2.feedburner.com/blogspot/WyNa">SUBSCRIBE VIA RSS</a></h2>

<h2 class="subscription email"><a href="http://feedburner.google.com/fb/a/mailverify?uri=blogspot/WyNa&loc=en_US">SUBSCRIBE VIA EMAIL</a></h2>

<h2 class="subscription twitter"><a href="http://www.twitter.com/btipandtrick">FOLLOW ON TWITTER</a></h2>

</div></div>
</div>

You are done.

File Under : css, feed burner, html, twitter, widget

25 Responses to “How To Add Beautiful Subscribe Section to Blogger”

  1. Paul Crowe says:

    Great tutorial,

    I actually did a similar tutorial on the main Email subscription box and icons so im happy with the main subscription section area.But this will look great in the footer of the blog.

    Thanks,

    Paul.

  2. Beben says:

    thanks for you created...:)

  3. Scientia Magazine says:

    Thanks. Here is the Demo - http://www.scientiamag.com/

  4. Casual Person says:

    Man you are the BEST!!!

  5. Indahnya Berbagi says:

    Really awesome, thanks for sharing i like your tips

  6. Anonymous says:

    How do you change the font color?

  7. Jeffrey C. Lopez says:

    Thanks for this mate but.. i have the problem how to add another subscriptions..... is this posible to add another like facebook or myspace?..because its only have 3 subscription hope you can answer

  8. Blogger Tips And Tricks|Latest Tips For Bloggers says:

    Yes you can do it easily:

    CSS part :

    #sectionmy .sectionmy2 h2.facebook { background:url(YOUR-FACEBOOK-IMAGE-URL) no-repeat top left; }

    #sectionmy .sectionmy2 h2.myspace { background:url(YOUR-MYSPACE-IMAGE-URL) no-repeat top left; }

    HTML part :

    <h2 class="subscription facebook"><a href="YOUR-FACEBOOK-URL">MYSPACE CONNECT</a></h2>

    <h2 class="subscription myspace"><a href="YOUR-MYSPACE-URL">FACEBOOK CONNECT</a></h2>

  9. Jeffrey C. Lopez says:

    Thanks for the fast reply...!!http://pinoywarezdl.blogspot.com/

    Im using you site for my preference for dressing up my blog..

    one thing can you post some tutorials on how to encode the links.. like you do from your post above.. thanks more power to you

  10. Jeffrey C. Lopez says:

    Thanks for this mate.. can you post some tutorial on how to encode the code.... like you post, because i like the way you coded it and the inside background is nice

  11. Samia says:

    i tired this but on the add a gadget thing when you click on add a gadget there is no option for html/jaza script?

  12. lori weitzel says:

    can you make the feedburner only send one summary of all post in one email per week- no one wants to get a daily email update from me.

  13. Prosumer says:

    excellent one have been searching this trick for long
    www.ittech.cz.cc

  14. The Freemans says:

    Where do I go to narrow the background if I want to remove the text labels so the whole gadget isn't so wide?

    I want to remove/shorten the text descriptors but the box doesn't auto shrink to fit.

    thanks,
    chris

  15. The Genuine Islam says:

    Thanks a lot , it's awesome I added it to my blog here : www.genislam.co.cc :)

  16. AnotherWindowsBlog says:

    Thanks for the widget! Using it right now on my new template.

  17. Colette says:

    Thanks for that post. It worked except that I don't get the border or the icons on my page ... can you advise?

  18. tchock says:

    Thanks brother it works grait over my blog

    http://download-free-stuffs.blogspot.com/

  19. CityGirl says:

    Is it possible to put the icons in a horizontal line (Ive added them to my blog but withought the text "Subscribe to" etc and the background is too big for the icons. Would look great in a horizontal line....any tips?
    Thank you for this awesome widget!

  20. Mr. Oke says:

    very usefull bro thank you

  21. Glenny says:

    Would it be possible for you to code this into a widget so all we need to do is press "install"? :)

  22. claire says:

    How do you know your feed url and email url?

  23. Blogyjay says:

    nice post can we use any autoresponder to publish our articles

  24. blackhatseotechniques says:

    This is great man.That's what I'm looking for.Thanks..

  25. Mangala says:

    This looks good. Thanks for the post.

Leave a Reply