Tabbed Social Media Follow Widget for Blogger

Social Media is one of the easiest way to interact with your blog readers and share your new blog posts to get maximum traffic to your blog. Social Media also helps bloggers to increase traffic to their blog. There are so many social media sites now a days but in my opinion, top 4 websites are: Facebook, Twitter, Google+ and Pinterest. You can also add Instagram as well. In my last tutorial, I showed you how you can add awesome Facebook popup like box in blogger blog and today I will show you how you can add an awesome tabbed social media widget to your blogger blog to increase your followers on top social media websites. This widget is one the finest social media widgets you will ever see and is made by HelperBlogger. This widget will surely increase your fan following on social media websites. This widget is light weight and does not require any JQuery plugin, that makes it easy to install for beginners as well as developers, So lets begin this tutorial:

Installation Process:

1. Go to Blogger Dashboard >> Layout >> Add a Gadget

2. Select HTML/JavaScript gadget

3. Copy the below code and paste in HTML/JavaScript gadget code area.

<style>
 /* Tabbed Social Widget By Trickz Bucket - TrickzBucket.Blogspot.com */
 /* CSS Code Start */
 
 ul.tabs {
 padding: 7px 0;
 font-size: 0;
 margin: 0;
 list-style-type: none;
 text-align: left;
 }
 ul.tabs li {
 display: inline;
 margin: 0;
 margin-right: 3px;
 /*distance between tabs*/
 }
 ul.tabs li a {
 font: normal 12px Verdana;
 text-decoration: none;
 position: relative;
 padding: 25px 10px 0px 10px;
 border: 1px solid #CCC;
 border-bottom-color: #B7B7B7;
 color: #000;
 background: #F0F0F0 url(tabbg.gif) 0 0 repeat-x;
 border-radius: 3px 3px 0 0;
 outline: none;
 }
 ul.tabs li a:visited {
 color: #000;
 }
 ul.tabs li a:hover {
 border: 1px solid #B7B7B7;
 background: #F0F0F0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFM16L-H6HOuixI0kf9lfSikxzyDqIyRswAf-x2QoFWJYRGBK2Fkr4_ve_AxaRka1SrwKvZUjkcO5mDnooQvpJlFsV3tjg7L911pRugy-dyPVb4Uvvs2w7I9MfYMMbFttWiF-5VotdAnM/s1600/hb-tabbg.gif) 0 -50px repeat-x;
 }
 ul.tabs li.selected a,
 ul.tabs li.selected a:hover {
 position: relative;
 top: 0px;
 font-weight: bold;
 background: white;
 border: 1px solid #B7B7B7;
 border-bottom-color: white;
 }
 ul.tabs li.selected a:hover {
 text-decoration: none;
 }
 div.tabcontents {
 border: 1px solid #B7B7B7;
 padding: 10px;
 background-color: #FFF;
 border-radius: 0 3px 3px 3px;
 margin-top: -7px;
 }
 /* Tabbed Social Widget By Trickz Bucket - TrickzBucket.Blogspot.com */
 /* End Code Start */
</style>


<script src="http://helperblogger.ucoz.com/code/hb-tabbed-social-widget.js" type="text/javascript"></script>
<ul class="tabs">
<li class="selected">
 <a href="https://www.blogger.com/blogger.g?blogID=1137540460763776093#view1">
 <img height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHUap9_dZfUj1gKRUbfX6yfq3CW5IkKEg73e0MtwH9bQqz-VOIOT5gBWM-aMobOomRQE7LXFIEbfr8H7qoTLNjXqNIPVw9ieiZ4MVAZmGOSRa3ocNJRvf4MYsTxa9o5m6SIzKqnL9Hv9U/s1600/helperblogger.com-fb.png" width="32" />
 </a>
 </li>
<li>
 <a href="https://www.blogger.com/blogger.g?blogID=1137540460763776093#view2">
 <img height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKCb_fzQU2OG2VB1nfQwTqwXyESCVvBMwBCw9RATAVvvNQaAme0mm4OPAK3uG6EnZI04zPDEKVg3bVLzkK1VwES6TdFZIuPSqh1j89IqB_XjsPbBe8oB3uYA4T_LkxkuWnP8zYY-NEgTc/s1600/helperblogger.com-twitter.png" width="32" />
 </a>
 </li>
<li>
 <a href="https://www.blogger.com/blogger.g?blogID=1137540460763776093#view3">
 <img height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdX4gdGDn3WEedQqilcS8cXMqHuxki-2RIa3zX7JrNGDllycQi-hN7u3eL8eQlQCLTakf1Kuo6L6gxfiYhc9ZH6tgq7rOilST_n-PboGmKhR_om6ZWotAuiLWof-HnShQRDAzTM82QeFo/s1600/helperblogger.com-gplus.png" width="32" />
 </a>
 </li>
<li>
 <a href="https://www.blogger.com/blogger.g?blogID=1137540460763776093#view4">
 <img height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO6I92v4o-JFZZ7_tawduMThCMOOZeMyGGIoQbmWhgI_QgIjLr8bzLyrpTNFR9EFy0Ouck13eaIPwkFqaWl2Kaxy_2GbwG8Jn7zhC-GbFXo1iXo-4ZCM4Vzty91yx82l0n-EMmjBrXDqU/s1600/helperblogger.com-pinterest.png" width="32" />
 </a>
 </li>
</ul>
<div class="tabcontents">
<div id="view1">
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FTrickzBucket&amp;width=285&amp;height=180&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false&amp;appId=409936535724253" style="border: none; height: 180px; overflow: hidden; width: 285px;"></iframe>
 </div>
<div id="view2">
<div id="twitter-box">
</div>
<script>
 var tw_user = trickzbucket;
 var tw_width = 260;
 var tw_height = 250;
 var no_face = 8;
 (function() {
 var tw_box = document.createElement(script);
 tw_box.type = text/javascript;
 tw_box.async = true;
 tw_box.src = //helperblogger.ucoz.com/code/hb-twitter.js;
 (document.getElementsByTagName(head)[0] || document.getElementsByTagName(body)[0]).appendChild(tw_box);
 })();
 </script>
 </div>
<div id="view3">
<script async="" defer="" src="https://apis.google.com/js/platform.js"></script>
 <br />
<div class="g-person" data-href="//plus.google.com/u/0/116452378152899513532" data-layout="landscape" data-rel="author" data-width="250">
</div>
</div>
<div id="view4">
<a href="http://pinterest.com/trickzbucket/">
 <img alt="Follow Me on Pinterest" src="http://passets-cdn.pinterest.com/images/about/buttons/follow-me-on-pinterest-button.png" height="28" width="169" />
 </a>
 </div>
<div style="clear: both; text-align: right;">
<span style="font-size: xx-small;"><a href="http://trickzbucket.blogspot.com/2016/01/tabbed-social-media-follow-widget-for-blogger.html" rel="dofollow" target="_blank">Trickz Bucket</a></span>
 </div>
</div>

Widget Customization Process:

Replace TrickzBucket with your social media username.
Replace 116452378152899513532 with your Google+ numeric ID.

Final Words:

This is an awesome widget for your blog. I loved this widget because its simple and clean and does not waste any space. Let me know if you have any problem or difficulties with this widget below in comments and do not forget to share this widget.

visit to link download

Tester Game Online

Search This Blog