• X

    How to Add Stylish Feed Subscription Box at Sidebar

    By in Blogging

    Bluehost hosting

    If you want to add Stylish Subscribe Corner in Sidebar, then this is a nice place to make your Blog’s Sidebar RSS friendly. It is simple and easy, and includes Social Profile Buttons also like Twitter Profile, Facebook Profile and Email Subscription. But the code below is not fully ready, and needs some of your effort to look better. Let’s start with the content now, all you need to copy and paste this HTML Code below into your sidebar(s).

    <html>
    <body>
    <br>
    <div id="subscribe_widget" class="widget">
    <form style="border:1px solid #ccc;padding:4px;
    text-align:center;"
     action="http://feedburner.google.com/fb/a/mailverify"
     method="post" target="popupwindow" onsubmit="window.open(' http://feedburner.google.com/fb/a/mailverify?uri=feedblogger',
     'popupwindow',
     'scrollbars=yes,width=700px,height=700px');return true">
    <a href=http://feeds.feedburner.com/feedblogger>
    <img src="http://www.shoutmeloud.com/wp-content/uploads/2012/01/rss_bar.png"
    width=230 height=30></a>
    <p>Enter your email address:</p>
    <p><input type="text" style="width:250px" name="email"/></p>
    <input type="hidden" value="feedblogger" name="uri"/>
    <input type="hidden" name="loc" value="en_US"/>
    <input type="submit" value="Sign Up" />
    <br>
    <hr>
    <div align="center">
    <a href="http://feedburner.google.com/fb/a/mailverify?uri=feedblogger"
    <img src="http://www.shoutmeloud.com/wp-content/uploads/2012/01/widget_feedBurner2.png"
    width=75 height=75 alt="Subscribe for Email Updates"></a>
    <a href="http://twitter.com/rishi3594"
    <img src="http://www.shoutmeloud.com/wp-content/uploads/2012/01/twitter-logo.jpg"
    width=80 height=80 alt="Follow me on Twitter"></a>
    <a href="http://www.facebook.com/apps/application.php?id=152785287073"
    <img src="http://www.shoutmeloud.com/wp-content/uploads/2012/01/facebook-logo-square-webtreatsetc.png"
    width=85 height=85
    </a>
    <hr>
    </form>
    </body>
    </html>

    The hard thing is that you have to change the Top Most Coding (preview) and the links

    (preview) to your Blog’s related links. Below are the steps to change these links to You Blog’s corresponding links:-

    1)Replace the Top Most Code (preview) to your FeedBurner Email Subscription Code. To find this code, First open your FeedBurner   account and click on Publicize tab. Then click on Email Subscriptions from the sidebar. You will see code followed by the Sub-Heading Subscription from Code as shown below.

    subscription thumb How to Add Stylish Feed Subscription Box at Sidebar

    Copy that code and paste it in place of code written like (preview).

    2)In place of the link http://feedburner.google.com/fb/a/mailverify?uri=feedblogger,place your Feed URL. To find it, first click on Edit Feed Details and copy the whole URL as in image is http://feedburner.google.com/fb/a/mailverify?uri=feedblogger.Replace all same URLs with your Email Subscription Links.

    link thumb How to Add Stylish Feed Subscription Box at Sidebar

    3)Then , In the coding, there is text rishi3594 which links to my Twitter Profile. If you are Twitter user than You can change rishi3594 with your Twitter ID.

    4) Last Step includes your Blog’s Facebook Community, copy your Blog’s Facebook Community URL and paste it in place of http://www.facebook.com/apps/application.php?id=152785287073 .

    This is how your Feed Subscription box will look like

    preview thumb How to Add Stylish Feed Subscription Box at Sidebar

    A good appealing subscription box will be very appealing and help you to get more Email capture and subscribers.

    Editors note : This is a Guest post by Rishi from ProBlogger, if you like to write for shoutmeloud, Read : Write for shoutmeloud .

    Get Free Blogging updates in your Email

    Find more Topics based on Keywords

    Article by

    Rishi has written 1 articles.

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

    { 8 comments… read them below or add one }

    Chethan

    In the screenshot shown above, why is facebook logo made Green color??
    I like The Original Blue Colored Facebook Logo..

    Reply

    IndianCashMaker

    awesome post harsh…..i loved it…just RTed it

    Reply

    Rishi

    @ Chethan
    It depends upon you to choose the Image.You can replace that Facebook Logo with the Image links in the coding.
    @IndianCashMaker
    This Post is Written By Me.

    Reply

    tips4trade team

    really nice and stylish feed subscription box, hope you also like subscription box on our website.

    Reply

    Manish Chauhan

    I just read this Post and used it on my blog .. I have made some changes customized to My blog .. have a look .

    Manish

    Reply

    tanveer

    hi bro please help me in putting dis email subscirption. i tried but i m not getting it can u tell me v have to edit in HTML or else v need to create new html in posting ?

    my blog doesn’t have email subscription so can u tell me the step by step process please. it’s a humble request

    Reply

    Jon Page

    I did this but the images doesn’t appear…why? What is wrong? I tried downloading the images and upload on my photos..still didn’t work… Is this not applicable in blogspot?

    Reply

    Jatin Singhroha

    Very Good Article Rishi , but i use MailChimp rather than Freedburner .

    Reply

    Leave a Comment

    Previous post:

    Next post:

    `