ShoutMeLoud – Shouters Who Inspire

≡ Menu
≡ Menu

How to Add a Subscription Box Similar to ShoutMeLoud

How to Add a Subscription Box Similar to ShoutMeLoud

Subscription box is a widget that simply allows the readers to subscribe to your blog, either via RSS or Email and to connect with you on various other social networking sites. So, it is an essential widget/plug-in for every blog – be it blogger or WordPress. Well, talking about subscription box, I remember posting an article on Shoutmeloud which illustrates on adding an attractive subscription box with hover effect. However, I found that people preferred a style similar to Shoutmeloud – check out the screen shot below to better understand the same.

sml sub box To add a subscription box similar to the one shown above, just follow the following instructions. I’ve explained this tutorial only for blogger/blogspot users.  However, if WP users need the same, please let us know via comments so that, Harsh would update this article for you guys – depends on the response you give:) So, if you need one, just ask for it!


Let’s get started with the tutorial. Navigate to “Design>>Page Elements” page from your blogger dashboard. Hit “Add A Gadget” on the sidebar. Choose “HTML/JavaScript” option from the window that pops up. Now, type “Receive Free Updates” on the box/section below Title. Next, paste the following codes in the text document – HTML FOR SML SUBSCRIPTION BOX, on the content section. Take a look at the screen shot below to better understand about the same.


1. Replace FEEDNAME at various instances in the code with your feed name. Wondering what your feed name is, just navigate to your FeedBurner account. Look at the title of your feed. That shall be the feed name for your blog. If you don’t possess a feed on FeedBurner, then I suggest you to burn one.

Reminder: You shall encounter 5 instances in the coding wherein you need to replace FEEDNAME with your feed name.

2. Replace TWITTER-NAME at one instance in the code with your twitter user name.

3. Replace FAN-PAGE-URL at one instance in the code with the URL to your fan page.

4. Replace HOMEPAGE-URL at two instances in the code with your homepage URL.

5. Navigate to the following link – . Type in your twitter user name and copy the script generated to the right. Just, replace TWITTER-FOLLOW-BUTTON-SCRIPT in the code (on blogger) with the follow button script (the one you copied from the link addressed before).

Well, that’s it! Save your widget by hitting the “Save” button to the bottom right. I hope this tutorial was very simple to follow. If you need further assistance to get this widget working on your blog, then hit me via the comment section.

Don’t forget to share your opinions about this article via the same comment section.

  • Author Bio

  • Latest Post

Article by Mukund

Mukund has written 29 articles.

If you like This post, you can follow ShoutMeLoud on Twitter. Subscribe to ShoutMeLoud feed via RSS or EMAIL to receive instant updates.

{ 6 comments… add one }

  • exam@sm

    Oh Very nice, Thanks I like this. Its a cool box with links. Twitter and Gplus are on good place.

  • prashant

    I think that you are a gr8 fan of Shoutmeloud (Like me)…. coz most of your guest & blog post titles as “Shoutmeloud”….
    If harsh changes the theme of shoutmeloud.. U may get new ideas…lol :)
    Enjoy!! A Gr8 Share…

  • Bhaveek

    Mukund can you give tutorial for this in wordpress, as i have wordpress blog and not blogspot.

  • Dhvanesh

    I would like to add such Subscription Box on my iPhone wordpress blog. It would be great if you can share similar tutorial for wordpress too.


  • KBharath @ HDBloggers

    Thanks for sharing the code Mukund i have added this same subscription box in one of my blog and now the sidebar looks great.

  • fazal mayar

    thanks mukund, i think for wp users this would be beneficial too but my question now is what about a subscription box below posts? such as the one on SML. Any suggestion for a plugin that can help us create a newsletter box below post? There are a few.


Leave a Comment