Expandable social Tabbed Menu widget for Blogger/Blog

If your bored with older tabbed menu widget then I'm gonna post widget on "Expandable social Tabbed Menu widget for Blogger/Blog". This widget very simple and customisable for blogger. In this widget Add more tab easily and expand all social content fast.

Why you are use this?

• simple and attractive
• add more tab easily and customisable
• fast loading and seo friendly
• Less space used in sidebar

Live Demo

How to add this widget on Blogger →

Implementation:

Login to your Blogger Dashboard and go to Template>>Edit HTML


First Step : Copy this below code and Paste before ]]></b:skin>
 

/*  DHI Expandable social Tabbed Menu
=====================*/
#dhimenu{margin:100px auto;width:400px;}
#dhimenu ul{list-style:none;margin:0;padding:0;}
.dhimenu{display:none;}
.dhimenu:target{display:block;}
#dhimenu ul li a{text-decoration:none;display:block;padding:10px;}
.dhimenu{padding:4px;}
#dhimenu ul{
/*box-shadow*/
-webkit-box-shadow:0 4px 10px #3B5998;
   -moz-box-shadow:0 4px 10px #3B5998;
        box-shadow:0 4px 10px #3B5998;
/*border-radius*/
-webkit-border-radius:5px;
   -moz-border-radius:5px;
        border-radius:5px;
}
#dhimenu ul li a{
background:#3B5998;
border-bottom:1px solid #fff;
color:#fff; text-shadow: #000 .31em .31em .51em;
}
.dhimenu{
background:#fdfdfd;
color:#999;
}
.dhimenu:target{
border-top:3px solid #FFCDCD;
}

Second Step : Copy given below code and go to Layout>>Add Widget>>HTML/JavaScript on sidebar

<div id="dhimenu">  <ul>    <li>      <a href="#one">Connect to Facebook</a>      <div id="one" class="dhimenu"><div class="fb-like-box" data-href="http://www.facebook.com/digitalhubinc" data-width="392" data-show-faces="true" data-stream="true" data-header="true"></div>      </div>    </li>    <li>      <a href="#two">Twitter Timeline</a>      <div id="two" class="dhimenu">        <a class="twitter-timeline" data-dnt="true" href="https://twitter.com/digitalhubinc" data-widget-id="293625612151685120">Tweets by @digitalhubinc</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
      </div>    </li>        <li>      <a href="#three">Google plus Activity</a>      <div id="three" class="dhimenu">        <!-- Gplus Default --><style type="text/css">/* CSS of Google+ Widget*//* feed list */ul.gpaw-body{font: 100% arial,sans-serif !important;padding:0 !important;margin:0 !important;overflow:hidden !important;position:relative !important;background:#FEFEFE !important;list-style:none;height:250px !important;border:#3b5998 1px solid !important;}ul.gpaw-body li{border-bottom:#3b5998 1px solid !important;margin:0 0 4px 0 !important;padding:4px !important;list-style-type:none !important;overflow:hidden !important;background:none;}ul.gpaw-body .thumb{display:block !important;float:right !important;margin:0 0 5px 5px !important;}ul.gpaw-body .thumb a{text-decoration:none !important;outline:none !important;}ul.gpaw-body .thumb img{border:#eee 1px solid !important;}ul.gpaw-body .thumb a:hover img{border:#ccc 1px solid !important;}ul.gpaw-body .title{border-bottom:none !important;}ul.gpaw-body .title a{font: 14px arial,sans-serif !important;outline:none !important;text-decoration:none !important;color:#ddd9d8 !important;border-bottom:none !important;}ul.gpaw-body .title a:hover {color:#fff !important;}/* meta : date, plusones */ul.gpaw-body .meta {color:#999999 !important;display:block !important;font-size:95% !important;margin:5px 0 0 !important;overflow:hidden !important;clear:both !important;}ul.gpaw-body .meta a, ul.gpaw-body .meta span{display:block !important;float:left !important;padding:0 6px 0 0 !important;}ul.gpaw-body .meta a{color:#999999 !important;text-decoration:none !important;}ul.gpaw-body .meta a:hover{color:#333 !important;text-decoration:none !important;}ul.gpaw-body .plusones{color:#025D87 !important;font-style: italic !important;}ul.gpaw-body .shares{color:#025D87 !important;}/* Fade-out effect with transparent png */ul.gpaw-body .fade{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQhzSt3k-vV4yp5fuOePn-54epnNhUdU1R_iXUOTzSPq1rRaclx1D_NOZlKe1a17XCIH6ZlQi40EXw0BWCSirr0qS0i5BQ4Fv5TBdMLVYVbgUOS1YF_DIfgpvH44tXWPcU6IKhBvyEqo8/s1600/fade.png) repeat-x left bottom !important;background:expression("") !important;left: 0 !important;bottom: 0 !important;height: 50px !important;position: absolute !important;width: 100% !important;z-index: 10 !important;}/* Profile */.gpaw-profile{border:#B20000 1px solid !important;background:#F5F5F5 !important;padding:8px !important;overflow:hidden !important;}.gpaw-profile a.avatar{display:block !important;float:left !important;text-decoration:none !important;outline:none !important;margin:0 10px 0 0 !important;}.gpaw-profile a.avatar img{border:#fff 3px solid !important;display:block !important;}.gpaw-profile a.avatar:hover img{border:#fff 3px solid !important;display:block !important;}.gpaw-profile .name{font-size:15px !important;overflow:hidden !important;margin:-10px 0 0 0 !important;font-family: Verdana, Arial, Helvetica, sans-serif;color:#3D606B;}.gpaw-profile a.add{display:inline-block !important;text-decoration:none !important;outline:none !important;padding:4px 8px !important;-webkit-border-radius:3px !important;-moz-border-radius:3px !important;background-color: #F5F5F5 !important;border: 1px solid rgba(0, 0, 0, 0.1) !important;color: #fff !important;}.gpaw-profile a.add:hover{background-color: #D14836 !important;border: 1px solid transparent !important;color:#fff !important;}a.gpaw-info{border-top:#3b5991 2px solid !important;border-bottom:#3b5991 2px solid !important;background:#f4f4f4 !important;padding:3px !important;text-align:right !important;font-size:80% !important;text-decoration:none !important;color:#000 !important;display:none !important;}a.gpaw-info:hover{color:#fff !important;}.gpaw-profile .g-rba-Dh-kQa .root .pAb .iAb{background-color:#990033 !important;}</style><script src=" http://bloggerspicebd.googlecode.com/files/Google%2Bjquery.min.js" type="text/javascript"></script><script src=" http://bloggerspicebd.googlecode.com/files/jquery.googleplus-activity-1.0.min.js" type="text/javascript"></script><script type="text/javascript">(function() {var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;po.src = 'https://apis.google.com/js/plusone.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})();</script><script type="text/javascript">//<![CDATA[jQuery.fn.googlePlusActivity.defaults.api_key = 'AIzaSyAeiwNJBkOT7cy86uH0W-J53yz1VcKaCDs';//]]></script><div class="google-plus-activity" style="width: 390px;"><!-- { user: '110126512100606454452', show_image:0 } -->    </li>   
     <li>      <a href="#four">Pinterest</a>      <div id="four" class="dhimenu"><a data-pin-do="embedUser" href="http://pinterest.com/digitalhubinc/"></a>      </div>    </li>  </ul></div> 

<div id="fb-root"></div><script>(function(d, s, id) {  var js, fjs = d.getElementsByTagName(s)[0];  if (d.getElementById(id)) return;  js = d.createElement(s); js.id = id;  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=408184442589211";  fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>    <script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>

Save your Widget. All  Work Done.

Customization:

• Customise your facebook page : digitalhubinc and appId=408184442589211"
• Customise your twitter id : 293625612151685120  and twitter page id : digitalhubinc or generate your timeline code from official website : dev.twitter.com
• Customise your google Activity widget :

google api key - AIzaSyAeiwNJBkOT7cy86uH0W-J53yz1VcKaCDs

user: '110126512100606454452'

• http://pinterest.com/digitalhubinc/ change pintrest id.
• If want to add more tab then add below code between <ul>

 <li>      <a href="#number">widget Name</a>      <div id="number" class="dhimenu">//widget code paste here  </div>    </li>

See on Video Preview :

If widget not work then drop your comment and please share on social network.