Add Stylish Tab Menu In Blogger Blog Posts

This widget help you a lot in decreasing your time to post in your site.If you have a video site you can use this widget for adding different video servers and if you want to install this on your downloading site than use it for adding screenshots in one menu and description in the other one and the same add some other categories in the next one

Demo

First of all go blogger >> Template >> Edit HTML and search for </head> and above it paste the below code.

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>

NOTE:  If you have already install font-awesome icons in your blog then leave the above step
Now again serach for </head> and paste the below code above it

<script type='text/javascript'>
function showonlyone(thechosenone) {
$(&#39;.newboxes&#39;).each(function(index) {
if ($(this).attr(&quot;id&quot;) == thechosenone) {
$(this).show(2000);
}
else {
$(this).hide(600);
}
});
}
</script>

Now paste the below code above ]]></b:skin>

.newboxes{display:none;}
#links a {
background: none repeat scroll 0% 0% orange;
text-decoration: none;
padding: 5px;
color: #fff;
border-radius: 2px;
}
#links a:hover {
background: #000;
}

Now save your theme. 
Paste the following code in the post where you want to show the tab menu.

<center>
<ul id="links">
<a class="links" href="javascript:showonlyone('newboxes2');" id="myHeader2"><i class="fa fa-video-camera"></i>Tab 1</a>
<a class="links" href="javascript:showonlyone('newboxes4');" id="myHeader4"><i class="fa fa-youtube-play"></i> Tab 2</a>
<a class="links" href="javascript:showonlyone('newboxes5');" id="myHeader5"><i class="fa fa-play-circle"></i> Tab 3</a> </ul>
<div class="newboxes" id="newboxes2"  style="display:block">
Tab 1 content goes here</div>
<div class="newboxes" id="newboxes4">
Tab 2 Content goes hereclass="tr_bq"> </div>
<div class="newboxes" id="newboxes5">
Tab 3 Content goes here</div>
</center>

Now publish your post and see the results