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:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;
font-weight:bold; }

#sectionmy .sectionmy2 h2.rss { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiabJX9WkoUqY6hFs23hEuAraFGqoZWUs7HyJEN6bQ9c1Ek8MX2MF4yereRSpIuh1gzoKiC33H50q1d8oW91L_5FzntxW1ZOYzXAuEEOyHjdXjqb_wms_OWqsd2ZGVZIsIeS-lxBMzgPAw/) no-repeat top left; }

#sectionmy .sectionmy2 h2.email { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaFzLC1jAE59dRBfV9OYPj9iAznVKlaryF1aIuqR3fB3UyyOxJQBWvC1GwAsqSDcOfLuNbR240HsVj5W2okYQFXGpgGwTZ-WMuarH4a94z801kM-D0suz9SAVyyzmEpON3ATdu8NkckPnR/) no-repeat top left; }

#sectionmy .sectionmy2 h2.twitter { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTRF0PKBb-769-mkOzF0GIulQRKU4ztxlNpsieedFv1ImHP14_HUHAYP4-x-UQ7PKO5i2x0L9EO_nGnFQmO-TxRvj5Dgs3QdjcJVJxZlDDfLvFDexdkGSipdgoV4UONDMD-G_F8CvAOkFP/) 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.

You are done.

Posted in: Blogger,Javascript,Rss,Widget