How to Add Stylish Social Media Subscription Widget to Blogger

SOCIALIZE IT

Tweet

0

Social Media plays an important role in building a successful website. It helps us to easily interact with our visitors/readers and also drives massive traffic to our blog. I'm telling you with my personal experience that having a social media subscription widget in the sidebar of a blog can help you to increase your subscribers and followers. The more subscribers you have, the more traffic you'll receive because your subscribers will get notified about your new posts and they'll definitely visit your blog to check what's new. Today we're going to share another simple and professional looking social media widget for blogger.

How to Add Social Media Subscription Widget to Blogger?

First and foremost, log in to your Blogger Account >> Select a Blog >> Layout >> Add a Gadget, scroll down and select HTML/JavaScript gadget from the list of gadgets. Now Copy the following piece of code and paste it in the empty widget box.

<style type="text/css">
.bgt-social { width: 290px; }
.bgt-social ul { border: 1px solid #CCCCCC; margin: 0; padding: 0; }
.bgt-social ul li { list-style:none; padding: 0; text-transform: none; border-bottom: 1px solid #CCCCCC; border-top: 1px solid #FFFFFF; }
.bgt-social ul li:first-child { border-top: 0 none; }
.bgt-social ul li:last-child { border-bottom: 0 none; }
.bgt-social ul li a { background-color: #F2F2F2 !important; color: #404040; display:block; }
.bgt-social ul li a:hover { background-color: #949494 !important;color: #0d0354; }
.bgt-social ul li .rss { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgauLJxmV4j3Btw0TvZ2mdocM7JGT5ks7TtmbG4o-DboX2tmv-oc72myjgYXEb-_9e95bWH7scO_Z54pCXAlIRLhfU525J8Ryz5YWZRVMQsEtlWibitj7-RooyMQjy-e6Y9N7UnzjoLQpA/s1600/bt-RSS.png") no-repeat scroll 10px center #F87E12; padding: 17.5px 60px; }
.bgt-social ul li .twitter { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu8e9uwDsIYtXXoKB0VmeVD0j3BHOHwyKI6nzTsVMA95Qkr2Noqz-smIftJi4LNVKC1j2yNQJ_yKqBnfmHE3kI0TpGDqxvyBLDbQBizXP9dyHkdf9z0Yc0tzEQ_IvMW_Cu1LxDo6oeXsI/s1600/bt-Twitter.png") no-repeat scroll 10px center #4CACEE; padding: 17.5px 60px;}
.bgt-social ul li .facebook { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmsRSRnS1VImWHTqLsMd-uC6lSD2RSMgDXEcFq3xB6QfKPLxvxX6HyNbkfK0bHmjx5LZ5AsDEAwcg4r9d_f0GLmm3KbYAahkPGPvqoAusUYja7RviB52cWd5xB7u6c6TkHHozuev6jkUQ/s1600/bt-Facebook.png") no-repeat scroll 10px center #3B5998; padding: 17.5px 60px; }
.bgt-social ul li .google { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir_wn-XLvG6aC_miMBw6AKFKJtbRhEFlT4u5X1LiXlYX5yLeG6G_uWnXQwwHKy1p-xhigSPsxZUDpmtfADZu1cSOU5DDwBiZxUBcFvdGbhi09ZAtws2xzVVU5eEfDzmoGseEwwV9zrSYM/s1600/bt-google.png") no-repeat scroll 10px center #D44937; padding: 17.5px 60px; }
.bgt-social ul li .linkedin { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtHJUSrZTN-I5lSd1n7sl08DFv_f6DM79gZRd-WDxMs3BkxBRhcfp71nz79xhP0u1vJFvV9g360ur0zcqJ91uIDKnAzFeZDdKjggNmR9s6g8DjiITXGfH3MOc9R1n1xWk1bacOV3REnwE/s1600/bt-LinkedIn.png") no-repeat scroll 10px center #3692C3; padding: 17.5px 60px; }
.bgt-social ul li .youtube { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje_0LdeFZvgNoa0vJUg45pbtMwuZ_-IoBmem0DO-fIGJEvZAhwRgoWLK4Y_Qk86lOo27W_WftQ4vIww75TT8Dq_y6msaFHcu-7ao20L0rvWH2M07mcwBWjE9G6wtOVdzzs-vrEn0Ju6oo/s1600/bt-Youtube.png") no-repeat scroll 10px center #C6312B; padding: 17.5px 60px; }
.social-about { display: none; }
</style>
<div class="bgt-social">
<ul>
<li><a class="rss" href="http://feeds.feedburner.com/yourfeedburnerlinkhere">Subscribe to RSS</a></li>
<li><a class="twitter" href="https://twitter.com/YourIDHere">Follow me on Twitter</a></li>
<li><a class="facebook" href="https://www.facebook.com/YourPAGEname">Find me on Facebook</a></li>
<li><a class="google" href="https://plus.google.com/+yourGoogle+ID" rel="author">Join me on Google+</a></li>
<li><a class="linkedin" href="http://linkedin.com/USERNAME">Connect on LinkedIn</a></li>
<li><a class="youtube" href="http://www.youtube.com/USERNAME">Watch me on YouTube</a></li>
</ul>
</div>

• Replace the text in green with your Usernames

Click Save button
And that's it!

Hope you like it, please do share it with friends. Happy Blogging!

Do You Like This Post ?