How To Add Beautiful Subscribe Widget to Blogger

How To Add Beautiful Subscribe Widget to Blogger

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO6XpcPqvvIiP4gjrkmpci6-Vv3cILbePLFYVtVBbhvck4QILh6VZa8sd0EbsBy-lUxgtwquqrK2hWXYCtXzMLb8xOyK8iE2rtk3Hq-f1Rhf-9-gSOGgqCVhI8Pl0387iLUyGughM4Q6Fe/s1600/twitter.png) no-repeat top left;
}

#subscribe-btt h2.my-facebook {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgssmpcNbGMcN3AZrJe3JZHwijKrhPXVI1C1uW6hugG2CiawyN_Rn1IBVwB3ITf0KBwHBdz3G5eTgum76aYoI0I5RSTjmszR49WDubKwxHTUfoM4BiRsUj1prfwmrrxDSSRSn3164Gnm2lw/s1600/facebook.png) no-repeat top left;
}

#subscribe-btt h2.my-googleplus {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU07-BTRygYAtTB8krotcLYp72MR2h_giXjEZmwIiFxDUVG_PjS1UC3DGdSsjzjBak-LgoHROsXvq_b8rW90NSxkei_jEdX9xphispcIeqDZ-dW0HCUVAxYtk81-j3vrQlMpun8KvHNzMH/s1600/google_plus.png) no-repeat top left;
}

#subscribe-btt h2.my-pinterest {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5C_kYkaTwY-OB86OVlX7UfoZeBKV_IaRODRZNEim5WXoywua5eTaKu7YXAVUp0jXrkheGnoY859COgkCiMtZVEGtnRJnf2Y4fEgHXxJIuTsiPysr1-a3foawaPUy6jzNegM7o2gjSK1Bi/s1600/pinterest.png) no-repeat top left;
}

#subscribe-btt h2.my-instagram {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZUAi8c5r6xrVdWS8HaDzVPrQB3mOL-MhhJY9bslXKbWbZRSyafjpihk0X6cW9o6F4UwFKZ4Au6B0mkxMgvr5wYQ5-wP8dzN-LhXuuFno0VLbMrBCwEHAQzXAep5LHxbnaC_egVe9bGjch/s1600/instagram.png) no-repeat top left;
}

#subscribe-btt h2.my-linkedin {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggACNig35VImpsT16AJq9tLUfcP2wWSIY-LwSoiZos6quVDgkCQBsBuOwFwKjeYecipoVMZGbsmCN5xzVJWlprHy1jt_s0WLVUj2HENj9Qg2_uXnzNEB7QINHr7wLccvFRKnUfJfAQHXZ2/s1600/linkedin.png) no-repeat top left;
}

#subscribe-btt h2.my-youtube {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisO0QOCeenP1PEQRqH_FfqqLMoFsN_gNXY4SU-QVJKllc0ubV9PR62oCQYExI9fpSSrC1RvIT-rhh0Y8IVB0ITQr-ZFDXPYC-6H8o_Czv5nveBZz4uMGkXalqSh9L1DrAoIBXVR-nceNu0/s1600/youtube.png) no-repeat top left;
}

#subscribe-btt h2.my-rss {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEROiCNGUu6TOjIzKjk9pv85DS5eTQUW_mdE87Lc6F7iiSRaa6vCUNkNGbSR4ALFyCYqZWEvoL4tdYR4cNbTt1oNu7-XIVOT0hpzW5tryGBybeVMdbHj9xv_7lZvP97DUoYm_wE3SHhLLv/s1600/rss.png) no-repeat top left;
}

#subscribe-btt h2.my-email {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8RAUdUjgLaOuZfjjD9VGGiJUCwi0xJPCNnLHU2kIUyrfZ3FhkUTRuivK8cBuNDJokTKYXap37-5qMO0zg94_3lfIzcasJN3vlYvI2XY7PtmhMWKtLNojLgxGpPiLzTbXe1qKehAPhk_Nv/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: