How To Add Beautiful Subscribe Widget to Blogger

Posted by Lasantha Bandara on October 30th, 2015 File Under : css, facebook, feed burner, google plus, html, twitter, widget25 Comments

Do you like to add a good looking social subscribe widget to your blog? Then simply follow the steps given below.

1.Login to your blogger account and go to "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'>
@import url(https://fonts.googleapis.com/css?family=Lora:400,700);

#subscribe-btt {
    margin: 0;
    padding: 10px;
    background: #eee;
    border: 3px solid #e8e8e8;
}

#subscribe-btt:hover {
    background: #e9e9e9;
    border: 3px solid #ddd;
}

#subscribe-btt h2.mysocialurl {
    border: 0;
    margin: 0 0 8px 0;
    padding: 0 0 0 56px;
    height: 48px;
    line-height: 48px;
    font-size: 14px;
    font-style: normal;
    font-weight: bold;
    font-family: Lora;
}

#subscribe-btt h2.my-twitter {
    background: url(http://1.bp.blogspot.com/-YMZoxe6YeAU/VjLfx48cbzI/AAAAAAAANS4/-xMF6d-h6pI/s1600/twitter.png) no-repeat top left;
}

#subscribe-btt h2.my-facebook {
    background: url(http://3.bp.blogspot.com/-x3I2mVz4dz0/VjLfvv-E4lI/AAAAAAAANSU/mtI8MA00knA/s1600/facebook.png) no-repeat top left;
}

#subscribe-btt h2.my-googleplus {
    background: url(http://4.bp.blogspot.com/-ZgHjLWTv3hg/VjLfvhnsveI/AAAAAAAANSY/d-so__lf_MU/s1600/google_plus.png) no-repeat top left;
}

#subscribe-btt h2.my-pinterest {
    background: url(http://3.bp.blogspot.com/-QsPPcMl7rrw/VjLfxLofDUI/AAAAAAAANSs/1v1y-fB5pEQ/s1600/pinterest.png) no-repeat top left;
}

#subscribe-btt h2.my-instagram {
    background: url(http://2.bp.blogspot.com/-y1lyKz1gpew/VjLfviE7bHI/AAAAAAAANSk/bK4YGPwJfpI/s1600/instagram.png) no-repeat top left;
}

#subscribe-btt h2.my-linkedin {
    background: url(http://3.bp.blogspot.com/-g8Svw7M45HQ/VjLfwfBFNEI/AAAAAAAANSc/6kG75VOZyiM/s1600/linkedin.png) no-repeat top left;
}

#subscribe-btt h2.my-youtube {
    background: url(http://2.bp.blogspot.com/-B2Mt0Xr7s1Q/VjLfx4_kfqI/AAAAAAAANS8/5xcxmsRniRc/s1600/youtube.png) no-repeat top left;
}

#subscribe-btt h2.my-rss {
    background: url(http://2.bp.blogspot.com/-OTpOGowrvfg/VjLfxSHIbhI/AAAAAAAANS0/VnHf1jK_WLk/s1600/rss.png) no-repeat top left;
}

#subscribe-btt h2.my-email {
    background: url(http://1.bp.blogspot.com/-F3CIjKLAcrU/VjLfw_yOCdI/AAAAAAAANSo/vqPj9oNwe6c/s1600/mail.png) no-repeat top left;
}

#subscribe-btt .mysocialurl a {
    color: #252e28;
    text-decoration: none;
}

#subscribe-btt .mysocialurl a:hover {
    color: #000000;
    text-decoration: underline;
}
</style>

4.Now go to "Layout" and click on "Add a Gadget".

5.Select "HTML/JavaScript" and add the code given below and click "Save".

<div id="subscribe-btt">

<h2 class="mysocialurl my-twitter"><a href="YOUR-TWITTER-URL">FOLLOW ME ON TWITTER</a></h2>

<h2 class="mysocialurl my-facebook"><a href="YOUR-FACEBOOK-URL">FOLLOW ME ON FACEBOOK</a></h2>

<h2 class="mysocialurl my-googleplus"><a href="YOUR-GOOGLE-PLUS-URL">FOLLOW ME ON GOOGLE PLUS</a></h2>

<h2 class="mysocialurl my-pinterest"><a href="YOUR-PINTEREST-URL">FOLLOW ME ON PINTEREST</a></h2>

<h2 class="mysocialurl my-instagram"><a href="YOUR-INSTAGRAM-URL">FOLLOW ME ON INSTAGRAM</a></h2>

<h2 class="mysocialurl my-linkedin"><a href="YOUR-LINKEDIN-URL">FOLLOW ME ON LINKEDIN</a></h2>

<h2 class="mysocialurl my-youtube"><a href="YOUR-YOUTUBE-URL">FOLLOW ME ON YOUTUBE</a></h2>

<h2 class="mysocialurl my-rss"><a href="YOUR-RSS-FEED-URL">SUBSCRIBE VIA RSS</a></h2>

<h2 class="mysocialurl my-email"><a href="YOUR-FEEDBURNER-EMAIL-SUBSCRIPTION-URL">SUBSCRIBE VIA EMAIL</a></h2>

</div>

NOTE : In above code, replace pink colored codes with your social profile URLs.

Final result will look like this:

Social Subscribe Box to Blogger

File Under : css, facebook, feed burner, google plus, html, twitter, widget

25 Responses to “How To Add Beautiful Subscribe Widget to Blogger”

  1. Paul Crowe says:

    Great tutorial,

    I actually did a similar tutorial on the main Email subscription box and icons so im happy with the main subscription section area.But this will look great in the footer of the blog.

    Thanks,

    Paul.

  2. Beben says:

    thanks for you created...:)

  3. Scientia Magazine says:

    Thanks. Here is the Demo - http://www.scientiamag.com/

  4. Casual Person says:

    Man you are the BEST!!!

  5. Indahnya Berbagi says:

    Really awesome, thanks for sharing i like your tips

  6. Anonymous says:

    How do you change the font color?

  7. Jeffrey C. Lopez says:

    Thanks for this mate but.. i have the problem how to add another subscriptions..... is this posible to add another like facebook or myspace?..because its only have 3 subscription hope you can answer

  8. Blogger Tips And Tricks|Latest Tips For Bloggers says:

    Yes you can do it easily:

    CSS part :

    #sectionmy .sectionmy2 h2.facebook { background:url(YOUR-FACEBOOK-IMAGE-URL) no-repeat top left; }

    #sectionmy .sectionmy2 h2.myspace { background:url(YOUR-MYSPACE-IMAGE-URL) no-repeat top left; }

    HTML part :

    <h2 class="subscription facebook"><a href="YOUR-FACEBOOK-URL">MYSPACE CONNECT</a></h2>

    <h2 class="subscription myspace"><a href="YOUR-MYSPACE-URL">FACEBOOK CONNECT</a></h2>

  9. Jeffrey C. Lopez says:

    Thanks for the fast reply...!!http://pinoywarezdl.blogspot.com/

    Im using you site for my preference for dressing up my blog..

    one thing can you post some tutorials on how to encode the links.. like you do from your post above.. thanks more power to you

  10. Jeffrey C. Lopez says:

    Thanks for this mate.. can you post some tutorial on how to encode the code.... like you post, because i like the way you coded it and the inside background is nice

  11. Samia says:

    i tired this but on the add a gadget thing when you click on add a gadget there is no option for html/jaza script?

  12. lori weitzel says:

    can you make the feedburner only send one summary of all post in one email per week- no one wants to get a daily email update from me.

  13. Prosumer says:

    excellent one have been searching this trick for long
    www.ittech.cz.cc

  14. The Freemans says:

    Where do I go to narrow the background if I want to remove the text labels so the whole gadget isn't so wide?

    I want to remove/shorten the text descriptors but the box doesn't auto shrink to fit.

    thanks,
    chris

  15. The Genuine Islam says:

    Thanks a lot , it's awesome I added it to my blog here : www.genislam.co.cc 🙂

  16. AnotherWindowsBlog says:

    Thanks for the widget! Using it right now on my new template.

  17. Colette says:

    Thanks for that post. It worked except that I don't get the border or the icons on my page ... can you advise?

  18. tchock says:

    Thanks brother it works grait over my blog

    http://download-free-stuffs.blogspot.com/

  19. CityGirl says:

    Is it possible to put the icons in a horizontal line (Ive added them to my blog but withought the text "Subscribe to" etc and the background is too big for the icons. Would look great in a horizontal line....any tips?
    Thank you for this awesome widget!

  20. Mr. Oke says:

    very usefull bro thank you

  21. Glenny says:

    Would it be possible for you to code this into a widget so all we need to do is press "install"? 🙂

  22. claire says:

    How do you know your feed url and email url?

  23. Blogyjay says:

    nice post can we use any autoresponder to publish our articles

  24. blackhatseotechniques says:

    This is great man.That's what I'm looking for.Thanks..

  25. Mangala says:

    This looks good. Thanks for the post.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.