Add Beautiful social subscription widget to your Blogger

      This post will guide you how to install a beautiful social subscription widget to your blogger.  Social subscription button is a very important tool / widget to not only blogger but to any website. With social networks you can interact with your readers which is a very important thing. This will also help the visitors to spread your blog / website. And the result you will get traffic in an increasing manner. There are numerous design you can add this social subscription widget. One of them is below.

      This widget has RSS feed, Twitter, Facebook, Google+, Linked In and YouTube. This widget looks elegant. Here is the Demo.

• Subscribe to the RSS Feed
• Follow me on Twitter
• Find me on Facebook
• Join me on Google+
• Connect with me on LinkedIn
• Watch me on YouTube

Now lets see how to add this widget to blogger

1) Go to blogger Dashboard

2) Now go to layout

3) Click add a widget where you want to add it.

4) Select Html javascript

5) Copy the code below and paste it.

6) Now change the username to your blogger name. 

<div class="btnt-chronicl-social"><ul><li><a class="rss"href="http://feeds.feedburner.com/techenol">Subscribe to the RSS Feed</a></li> <li><a class="twitter" href="https://twitter.com/techenol">Follow me on Twitter</a></li> <li><a class="facebook"href="https://www.facebook.com/techenol">Find me on Facebook</a></li> <li><aclass="google" href="https://plus.google.com/106358629644984191882" rel="author">Join me on Google+</a></li> <li><a class="linkedin" href="http://in.linkedin.com/your url">Connect with me on LinkedIn</a></li> <li><a class="youtube"href="http://www.youtube.com/user/techenol">Watch me on YouTube</a></li>

</ul></div><style type="text/css">.btnt-chronicl-social { width: 100%; } .btnt-chronicl-social ul { border: 1px solid #CCCCCC; margin: 0; padding: 0; } .btnt-chronicl-social ul li { list-style:none; padding: 0; text-transform: none; border-bottom: 1px solid #CCCCCC; border-top: 1px solid #FFFFFF; } .btnt-chronicl-social ul li:first-child { border-top: 0 none; } .btnt-chronicl-social ul li:last-child { border-bottom: 0 none; } .btnt-chronicl-social ul li a { background-color: #F2F2F2 !important; color: #404040; display:block; } .btnt-chronicl-social ul li a:hover { background-color: #fafafa !important; } .btnt-chronicl-social ul li .rss { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/RSS-1.png") no-repeat scroll 10px center #F87E12; padding: 17.5px 60px; } .btnt-chronicl-social ul li .twitter { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Twitter.png") no-repeat scroll 10px center #4CACEE; padding: 17.5px 60px;} .btnt-chronicl-social ul li .facebook { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Facebook-1.png") no-repeat scroll 10px center #3B5998; padding: 17.5px 60px; } .btnt-chronicl-social ul li .google { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/google.png") no-repeat scroll 10px center #D44937; padding: 17.5px 60px; } .btnt-chronicl-social ul li .linkedin { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/LinkedIn-1.png") no-repeat scroll 10px center #3692C3; padding: 17.5px 60px; } .btnt-chronicl-social ul li .youtube { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Youtube-1.png") no-repeat scroll 10px center #C6312B; padding: 17.5px 60px; } .social-about { display: none; }</style>

         That's all. And now you have added a beautiful social bookmarking widget. If you find it useful, then share this post with your friends.

Share this Post