New Stylish Subscription Box For Blogger/Wordpress Sidebar

Hi friends! I have been receiving a lot of comments and emails ever since the launch of Shoutmeloud thesis theme for blogger. Few people said that the read more hack does not work. To all those who faced the same problem, you just need to use the blogger's "Updated Post Editor" and hit the "Insert jump break" icon.

To know where that icon is, have a look at the following picture

If you wish to have an automatic read more hack for your blog, that is, if you are not comfortable with the manual hack, then read the following article to install the automatic version - Automatic Read More Hack For Blogger With Thumbnails. However, there is one main drawback with this widget. The hack crushed the image which makes the thumbnail next to the snippet look worse. So, if you are ready to sacrifice the quality of image being displayed on the thumbnail, well you can go for this hack. However, I recommend manual hack because I use manual hack on my blog:)

Read Also - Labnol Like Social Subscription Buttons For Blogger Blog

Well, coming to the objective of this post, I plan to provide the coding for the subscription widget. It is pretty simple to add this widget on your blog. Requires little customization but very easy to add. So, let's begin with the installation.

Live Demo

1. Navigate to "Layout >> Page Elements" from your blogger dashboard. Now, hit the "Add a gadget" tab and choose "HTML/JavaScript". You will notice that a new window opens up, enter the following text - Receive Free Updates as the title text.

2. For the content part of the widget, just copy the following code and paste it below the space available.

<center>

<form style="padding-top:6px;" id="subscribe" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=BlogsDaddy', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">

<input type="text" value="Enter your email address..." id="subbox" onfocus="if (this.value == &#39;Enter your email address...&#39;) {this.value = &#39;&#39;;}" onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email address...&#39;;}" name="email" style="width:170px;" />

<input type="hidden" value="BlogsDaddy" name="uri" />

<input type="hidden" name="loc" value="en_US" />

<input style="

        padding-left:5px;

        padding-right:5px;

        padding-top:1px;

        border: 1px solid #198DC9;

        cursor: pointer;

        -moz-border-radius: 15px 15px 15px 15px;

        background-color: #198DC9;; 

        color: #FFFFFF;

        font: normal 15px Times New Roman;" 

type="submit" value="Subscribe" />

</form>

</center>

<center>

<table border="0">

<tr>

<td>

<a href="http://twitter.com/BlogsDaddy" target="_blank" title="Follow Me On Twitter">

<img style="width:42px; height:42px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA4_tAncWEwQ8QAI88cA_sRRul4g3KP2wGHKsgMrGCHl6ee4pUBkaFzjqT2rG2-QiV6vlkh6p4gVk5M1guVJ7TrkAAaM5-jpxS29lRRLyoC-rrJRCFETlit2xENosikJiIDTQIoJh4oaw/s800/EAB_twitter%2520icon.png" /></a>

</td>

<td>

<a href="http://feeds.feedburner.com/BlogsDaddy" target="_blank" title="Subscribe Via RSS">

<img style="width:42px; height:42px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzW5qoEckXB5mJPZRYjBs_5BpLavVmVbv3KgfQ7Yf1cyvcXzqicBDlhRDCTr13Svafv-JTBQ1YrFu4PCMHJaegGhw_qWAasMKZxpdy_P2eGVDd7hXK971rBlODCJ6ajqiHv1CysRvKnI4/s800/EAB_rss.png" /></a>

</td>

<td>

<a href="http://www.facebook.com/BlogsDaddy" target="_blank" title="Find Us On Facebook">

<img style="width:42px; height:42px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEkiM6dVi_p6HY3gojWyNzkpAMhrcTEH_NvKwDzL8VmqnO5bV080IoxXP1CwdxAaQAgRxaTbO0WApAKOAshIdzrpt3wE3LSuQffklqRmhXADoNcqWBY4TaBhGMaCt7KkFQWhQEIh-9Ylw/s800/EAB_facebook%20icon.png" /></a>

</td>

<td>

<a href="http://technorati.com/faves?sub=addfavbtn&add=http://www.blogsdaddy.com" target="_blank" title="Add To Technorati">

<img style="width:42px; height:42px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAMYqxErV-3ArwDBtkaLdOPgi-7rQ4v9ildG_ImVN0DpzpYKbNcYW5WzIC96Ffeb74Mrh87TJJpUusPCpQGm3gxVX8afTDfEs3YwXsw0wufDfwuCLHvq4tZlYHPDm_VTE5e8Aq6u59Te4/s800/EAB_technorati%2520icon.png" /></a>

</td>

<td>

<td>

<a href="http://feeds.feedburner.com/BlogsDaddy"><img src="http://feeds.feedburner.com/~fc/BlogsDaddy?bg=000000&amp;fg=FFFFFF&amp;anim=1" height="26" width="88" style="border:0; padding-top:5px" alt="Fellow Readers" /></a>

<script type="text/javascript" src="http://twittercounter.com/embed/BlogsDaddy/ffffff/111111"></script>

</td>

</td>

</tr>

</table>

</center>

3. Note the links highlighted in green color. Just replace those links highlighted in green with the corresponding links you obtain from social networking sites - Twitter, Facebook, Technorati. Similarly, replace my Feedburner URL with your feed URL. Replacing links are self-explanatory.

4. When it comes to the links highlighted in blue, those associated with the Feedburner forms, please obtain the code from your Feedburner email subscription form. To do so, hit the following link - Feedburner, burn your blog's post feed and obtain the code for your form by navigating to "Publicize >> Email Subscriptions" page from the Feedburner dashboard. 

5. The code for your Feedburner chicklet can also be obtained in the same page - just hit the FeedCount tab and customize the appearance of your chicklet. Replace the text in pink with your twitter username for the twittercounter. 

6. Save your widget by hitting the "Save" tab at the bottom right after these modifications and your subscription box is ready.

Read Also - Add Beautiful Email Subscription Forms For Blogger

I hope you enjoyed this widget. If you have any problems in installing this widget on your blog, then let me know via comments or email and I will help you solve your problems. I have received few requests like the JQuery Pop-Up Facebook Like Box, background color for the links appearing in the post and so on. To all those who requested these modifications, please wait. Once I find the coding for your customizations, I will post an article on the same.