How To Add Beautiful Subscribe Widget to Blogger

Posted by Lasantha Bandara File Under : css, facebook, feed burner, google plus, html, twitter, widget 24 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

«
»

24 thoughts on “How To Add Beautiful Subscribe Widget to Blogger”

  1. 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.

    Reply

  6. 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

    Reply

  7. 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>

    Reply

  8. 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

    Reply

  9. 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

    Reply

  10. 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?

    Reply

  11. 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.

    Reply

  13. 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

    Reply

  18. 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!

    Reply

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.