Preferred Language

Saturday, 14 April 2012

How To Add Beautiful Subscribe Section to Blogger

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoPdf6uIr6ChRN_EkK-PF8CuEuRcP4O3lBMToyTlAugJAoPL8LAfvm7SgZfBNEXgLI85GjQ3YRGsu6AMLtl5ImY6KF9wKw0bQw8hPhGy8x4qMNM8r7M1NO2B1LpVqp4rDkqN_EA9WwV0Qy/) no-repeat top left; }

#sectionmy .sectionmy2 h2.email { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidGWy8ZrNLXHFctuAl53V7A8brIfC1lIlyx0NCZKq1A7HIkgVigJEoL7aPm6-L0L1xhyphenhyphenG9tFwKmWZDWRrZJI3-Vq1RQHK_CxlYrw9VOCPHzF7g2KlZrZ80IwKvACNI9LjN-rbWOTXvgZ_A/) no-repeat top left; }

#sectionmy .sectionmy2 h2.twitter { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsYoklhIoxYc2sLClNjLsdmmIQWHzMg81givj39M-q-TuWcKP-rEVvA8qIzl00wE3b_3KwZ4pNrkisE93fFWOW_pJ28bgA5Z5oMM8XVABE30t9CCKarsu8hbUbBqYuwo7aPTrOdgrT8Fyn/) 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.

No comments:

Post a Comment

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Lady Gaga, Salman Khan