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:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",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
Hi,Thank you very much for visiting here. I'm Lasantha, Founder of (
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.
thanks for you created...:)
Thanks. Here is the Demo - http://www.scientiamag.com/
Man you are the BEST!!!
Really awesome, thanks for sharing i like your tips
How do you change the font color?
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
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>
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
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
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?
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.
excellent one have been searching this trick for long
www.ittech.cz.cc
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
Thanks a lot , it's awesome I added it to my blog here : www.genislam.co.cc
Thanks for the widget! Using it right now on my new template.
Thanks for that post. It worked except that I don't get the border or the icons on my page ... can you advise?
Thanks brother it works grait over my blog
http://download-free-stuffs.blogspot.com/
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!
very usefull bro thank you
Would it be possible for you to code this into a widget so all we need to do is press "install"?
How do you know your feed url and email url?
nice post can we use any autoresponder to publish our articles
This is great man.That's what I'm looking for.Thanks..
This looks good. Thanks for the post.