Are you fed up with those old style
Social Media subscription styles? Are you Looking for something new? So to
fulfill all your needs, today we're going to share a simple and attractive Flat
Style Tabbed Social Media Widget for Blogger that we just customized. As you
know that Flat Style is the hottest style nowadays. The widget we're going to
share today is a Tabbed Widget with Social Media tabs in a simple Flat design
and it'll definitely attract your visitors. This widget consists of four
different tabs Facebook, Twitter, Google Plus and Pinterest. So, add this
widget to your blog and impress your visitors.
How
to Add Flat Tabbed Social Media 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>
ul.tabs {
padding: 7px 0;
font-size: 0;
margin: 0;
list-style-type: none;
text-align: left;
}
ul.tabs li {
display: inline;
margin: 0;
}
ul.tabs li a {
font: normal 12px Verdana;
text-decoration: none;
position: relative;
padding: 25px 10px 0px 10px;
border-bottom-color: #B7B7B7;
color: #000;
background: #00B366;
outline: none;
}
ul.tabs li a:visited {
color: #000;
}
ul.tabs li a:hover {
background: #007D47 ;
}
ul.tabs li.selected a,
ul.tabs li.selected a:hover {
position: relative;
top: 0px;
font-weight: bold;
background: #007D47;
border-bottom-color: #007D47;
}
ul.tabs li.selected a:hover {
text-decoration: none;
}
div.tabcontents {
border: 1px solid #007D47;
padding: 10px;
background-color: #FFF;
border-radius: 0 3px 3px 3px;
margin-top: -7px;
}
</style>
<script src="http://yourjavascript.com/1125723322/blogolect-tabber.js" type="text/javascript"></script>
<ul class="tabs">
<li class="selected">
<a href="#tab1">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhI6EOOblJcPvEOasM7yjzs-3aZth4sdcazJ_n2Hky6tIhzkWRtPRaGDX1dZcFGLZ52OAc929SWUCpbs_S20oSeiZcuZhp5bdLF9NDr97QLHkcAAPCEe3K0XnBWKymjxPfFdjE4MsahDKs/s1600/blogolect-fb.png" height="32" width="32" />
</a>
</li>
<li>
<a href="#tab2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO-mWimfLb0P8gZ6sZxfOay2RTHqPNHr4PduGgYuj9AEX2YQQ8nRqwQ6oHb-KXRO7jlkBzSNb-Q10w0CHpfgXaTH9FSnXCr2dE2W06fT3LQa1TBTCrUSvNchr_htHnVbJFoKQ4u1dsSKA_/s1600/blogolect-twitter.png" height="32" width="32" />
</a>
</li>
<li>
<a href="#tab3">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBG_nZe8eEHiGdB_lH4MBk7DXqnJKjygMqf0rk4Dwl6YrNwZ3rQrIOYlX8_VprhLN2t59q0L49h2Iy5Hh7aDBkEySpuakLJP6YCcItEGp29DkwtB2_U8C5CRybanr-pIPGXTzAhIb7h3C1/s1600/blogolect-googleplus.png" height="32" width="32" />
</a>
</li>
<li>
<a href="#tab4">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieGSXdZb5fF3mk7ywIErjN8liFda3Fkpt-3LbbBmMLHDVYow0rUaR7dcV_hMT9v7lXb4ogyj8bp2mPyd0kpI8pOxewJvYxFR_INWV-3BBp01n1bzch7aXJFwvaLZSYCNpXk4QlzZVnHK56/s1600/blogolect-pinterest.png" height="32" width="32" />
</a>
</li>
</ul>
<div class="tabcontents">
<div id="tab1">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FYOURFBLINKHERE&width=285&height=180&colorscheme=light&show_faces=true&header=false&stream=false&show_border=false&appId=409936535724253" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:285px; height:180px;" allowtransparency="true"></iframe>
</div>
<div id="tab2">
<div id="twitter-box"></div>
<a href="https://twitter.com/YOURLINKHERE" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @YOURNAMEHERE</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>
<div id="tab3">
<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-person" data-width="250" data-href="//plus.google.com/YOURLINKHERE" data-layout="landscape" data-rel="author"></div>
</div>
<div id="tab4">
<a href="http://pinterest.com/YOURLINKHERE">
<img src="http://passets-cdn.pinterest.com/images/about/buttons/follow-me-on-pinterest-button.png" width="169" height="28" alt="Follow Me on Pinterest" />
</a>
</div>
<div style="clear: both; text-align: right;">
<span style="font-size: xx-small;"><a href="http://www.blogolect.com/2015/02/flat-style-tabbed-social-media-widget.html" rel="dofollow" target="_blank">Get this Widget</a></span>
</div>
</div>
Customization:
- Replace YOURFBLINKHERE with your Facebook Page Username
- Replace both YOURLINKHERE with your Twitter Username
- Replace YOURLINKHERE with your Google Plus Username
- Replace YOURLINKHERE with your Pinterest Username
Click Save button and you're done!
Do You Like This Post ?