Add Multi Tabbed Navigation Widget To Blogger Sidebar

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="http://bit.ly/rT83aa" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Multi Tabbed Widget For Blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3Jm-nOBhnUl406bg-lFHRRjxuS-P3jCVpVVjSJyfuNqN8d7J0aTAaoeae0P19D6i9CGVQ0OTh4hnTq5aELfFK_-oPjFPpm1wv_eX2q03BukarxQ4v_ZRMdp-jDuPG6VCCnBAcGEdcjiYh/s1600/Advanced+Multi+Tabbed+Widget+For+Blogger.png" title="Multi Tabbed Widget For Blogger" /></a></div><br /><br /><br />Hi Friends, Today I am going to share how to add multi tabbed widget for blogger. I have seen that there are so many tutorials on the web regarding this. But as I thought these are really complicated.I am writing very easy and simple tutorial which will guide you to add this widget to your blog’s sidebar.It looks very nice in your sidebar. This widget works based on jQuery and jQueryUI.<br /><br /><br /><br /><a name="more"></a><br /><br /><b>How to Install This Widget on Blogger?</b><br /><br />Steps...<br /><br />A. Adding <b><span style="color: magenta;">Script Code</span></b><br /><br />B. Adding <b><span style="color: purple;">CSS Theme Code</span></b><br /><br />C. Adding <b><span style="color: blue;">HTML Code</span></b><br /><br /><u><b><span style="color: magenta;">Adding Script Code</span></b></u><br /><br /><br /><br /><b>How to add HTML-CSS-Javascript Codes to your Blog ? </b><br /><br />This is very simple and easy you only follow below steps and add this widget in your blog.<br /><br /><b><span style="color: magenta;">Step 1</span></b> Log-in to your <b style="background-color: orange;">Blogger account</b>.<br /><br /><b><span style="color: magenta;">Step 2</span></b> Backup your Template.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://bit.ly/work24" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Edit Template HTML" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8LVlk6CgmagGSR90qTyJokoH9-gzEGA-ehqBdl9bjC_m58jNu4eSwBlj7jX5VjBuJDxWl7bmblvPCjGuqX-4ydtsivW-d3UWBAggkUTge5IChMpGBeGrYGSPfgGB6OcDovwFiosOzBGUg/s1600/Edit+Template+HTML.png" title="Edit Template HTML" /></a></div><br /><br /><b><span style="color: magenta;">Step 3</span></b> Click on The <b style="background-color: cyan;">Template</b>>> <b><span style="background-color: #f4cccc; color: purple;">Edit HTML</span></b>>> <b><span style="color: orange;">Proceed</span></b>.<br /><br /><b><span style="color: magenta;">Step 4</span></b> Now find [by pressing <kbd style="border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid gray; box-shadow: rgb(238, 238, 238) 1px 0px 1px 0px, rgb(204, 204, 204) 0px 2px 0px 2px, rgb(68, 68, 68) 0px 2px 0px 3px; font-size: 1.2em; margin: 2px 3px; padding: 1px 5px;">Ctrl</kbd><span style="font-family: "georgia" , serif; font-size: 13.63636302947998px;"> + </span><kbd style="border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid gray; box-shadow: rgb(238, 238, 238) 1px 0px 1px 0px, rgb(204, 204, 204) 0px 2px 0px 2px, rgb(68, 68, 68) 0px 2px 0px 3px; font-size: 1.2em; margin: 2px 3px; padding: 1px 5px;">F</kbd> ] this code in the template:<br /><br /><div class="code"></head></div><br />And immediately <b><span style="color: red;">Before</span></b> it, paste this code:<br /><br /><br /><div class="code"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"><br /></script><br /><script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"><br /></script><br /><script><br />$(document).ready(function() {<br />$("#tabs").tabs();<br />});<br /></script></div><br /><br /><br /><br /><br /><b><span style="color: purple;"><u>Adding CSS Theme Code</u></span></b><br /><br />Select One Theme and Place Theme code before <b><span style="color: red;"></head></span></b> tag<br /><br /><br /><br /><br /><br />Style 1:-<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Multi Tabbed Navigation Widget" border="0" height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJyy_4kEo05Gn2LRLTqqPcWR6VCxvEiefWZL7ovoUYIwALB7TCDjrAgSaqAQi3rynvoHlCw0lNLsUjCX44YylCeha2iB95-Wc4wBfVHp6eTCPWT5HQYXNdg7E53reA3hILGjWPdjzMmpX_/s1600/w2b_Tabbed+navigation+for+blogger-jquery-ui-themes-google-hosted-w2b%25280%2529.gif" width="125" /></div><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/multi-tabbed/style-1.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><br /><br /><div class="code"><link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" /></div><br /><br /><br /><br /><br />Style 2:-<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Multi Tabbed Navigation Widget" border="0" height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMmkkgJwh5hPv3xecd4kvnOYE5eKDdpctlalWluvqkb8US6avLT6y18SILWg__2on32vL60eknkKEIPX62sonX4LSQhHlqa5y5mSEp4Sj6-bnGzcwRuStzvtJc6aFprkmya7vVRknCML-2/s1600/w2b_Tabbed+navigation+for+blogger-jquery-ui-themes-google-hosted-w2b+%25281%2529.gif" width="125" /></div><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/multi-tabbed/style-2.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><br /><br /><div class="code"><link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/black-tie/jquery-ui.css" type="text/css" /></div><br /><br /><br /><br /><br />Style 3:-<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Multi Tabbed Navigation Widget" border="0" height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF3BCy7jkV_nglHBlZy5asXsAOnHF9ARlcpzFzRKE_QpsaEcLBKR6KqF5V4p6-AvFgCrSt_xA8evKpC36krM3tA_1sYTCa-ngt7Zj7hXqtWHDtumhaYURsVhOJ0tg2D3bZNm1cF_JPgwWF/s1600/w2b_Tabbed+navigation+for+blogger-jquery-ui-themes-google-hosted-w2b+%25282%2529.gif" width="125" /></div><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/multi-tabbed/style-3.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><br /><br /><div class="code"><link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/blitzer/jquery-ui.css" type="text/css" /></div><br /><br /><br /><br /><br />Style 4:-<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Multi Tabbed Navigation Widget" border="0" height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfSJrQ5sFIsLCnw0Wcb6clJgy8u0GEdmHq3-dBM8UClkPlFbwFi78oFTnb_f-8SsVwcB6kZ3KyPF1xvjRAX9a05hfdWirs69IZVa7BfX1OGwXL9KNI00mxs-WQpcIEOu0UG0_GxRJgNiXv/s1600/w2b_Tabbed+navigation+for+blogger-jquery-ui-themes-google-hosted-w2b+%25283%2529.gif" width="125" /></div><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/multi-tabbed/style-4.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><br /><br /><div class="code"><link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/dark-hive/jquery-ui.css" type="text/css" /></div><br /><br /><br /><br /><br />Style 5:-<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Multi Tabbed Navigation Widget" border="0" height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQqh3HIPjc7x4CO9atH7UuVUhmAlUVBTWmRQCRdye0u-kxgo6NMwDoggFqRZSz2xAxvCgWxiwu-i22zeeZPe9hBvDwXWg9be4aaT0BtNug1BYIwTXfgPyKB0-QjFApa7_Y5GhqkIN6S_S5/s1600/w2b_Tabbed+navigation+for+blogger-jquery-ui-themes-google-hosted-w2b+%25285%2529.gif" width="125" /></div><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/multi-tabbed/style-5.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><br /><br /><div class="code"><link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/dot-luv/jquery-ui.css" type="text/css" /></div><br /><br /><br /><br /><br />Style 6:-<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Multi Tabbed Navigation Widget" border="0" height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7O1VVTLyJHIxnh-HPYmrljDKBuRna5CCl2HAQIbeHcxbX1PA2ygYZFxEXfpSi6w1Lr_q29umlcEJsdLwptmuR3EXNxXGHrdajGaJG25EQDUngtb8Yrr_KONooKXJB5J3ows7y-v2v-Hc7/s1600/w2b_Tabbed+navigation+for+blogger-jquery-ui-themes-google-hosted-w2b+%25286%2529.gif" width="125" /></div><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/multi-tabbed/style-6.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><br /><br /><div class="code"><link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/eggplant/jquery-ui.css" type="text/css" /></div><br /><br /><br /><br /><br />Style 7:-<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Multi Tabbed Navigation Widget" border="0" height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaYrZbGYHZ3IWJ9dhqjmvopsIkJL-Ja45jy5sq_t3y9dhbIAAUJFTf9BEnb8OSbFZuZheJHCxgCqjQCinUtR5_iIqT_anwR99k43psFopEM0pPK-bIZULqQqQQq_2P71yvoPwC9_zVuCIt/s1600/w2b_Tabbed+navigation+for+blogger-jquery-ui-themes-google-hosted-w2b+%25287%2529.gif" width="125" /></div><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/multi-tabbed/style-7.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><br /><br /><div class="code"><link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/excite-bike/jquery-ui.css" type="text/css" /></div><br /><br /><br /><br /><br />Style 8:-<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Multi Tabbed Navigation Widget" border="0" height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZpfBn7SkixZSapSCKJ7fYQhli0JePUZohXaXNrjSgT3AxzMMOFyhn_LNWIY8IcKnf9OOpj2I7ysQDLEmF85daF3O0b6bPOJMBF3Mag26KKyJiZkfsL0w7NsbB1-J9VyNRXQsm-vYyDuxi/s1600/w2b_Tabbed+navigation+for+blogger-jquery-ui-themes-google-hosted-w2b+%25288%2529.gif" width="125" /></div><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/multi-tabbed/style-8.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><br /><br /><div class="code"><link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/flick/jquery-ui.css" type="text/css" /></div><br /><br /><br /><br /><br />Style 9:-<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Multi Tabbed Navigation Widget" border="0" height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlRz2ab0IvLLGNVkz5n2qvjM3vu0xzbMV5zitRMivzSd3N_jzH8SYj-Bd3u4CFcGkt5DsY69l-OlMO_BM356kfk2uHLHEM97Q_6sTUWctEwiLFOYmC8w4y4HVOKVJFLb5t1eB9r-2fjtpB/s1600/w2b_Tabbed+navigation+for+blogger-jquery-ui-themes-google-hosted-w2b+%25289%2529.gif" width="125" /></div><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/multi-tabbed/style-9.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><br /><br /><div class="code"><link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/hot-sneaks/jquery-ui.css" type="text/css" /></div><br /><br /><br /><br /><br />Style 10:-<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Multi Tabbed Navigation Widget" border="0" height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHcU7NJyPUY-dsuc3j_UFrejseUWI9NLCiNT4Nf9yfY-tMxib2yblzXUgDcqO-k3VGbu11216h-LBdZHkXt58NXefzlzj_veG57eJk0vQgWu2-GeQ1o6693ERHEJ9plvqtT4JjVXGnWCS5/s1600/w2b_Tabbed+navigation+for+blogger-jquery-ui-themes-google-hosted-w2b+%252811%2529.gif" width="125" /></div><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/multi-tabbed/style-10.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><br /><br /><div class="code"><link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/le-frog/jquery-ui.css" type="text/css" /></div><br /><br /><br /><br /><br />Style 11:-<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Multi Tabbed Navigation Widget" border="0" height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglWR56cy0A-qKYs4kSZaBb1ImQk7hhD7UT-Kc2n0_m7SDLFHkLSgjGPyjXD10ElJ_pxG8Rw7GziW8-wgjc_Ue9p2EvM0Ir4RBu4OXEca65fwPu5Exy3jPLte6eNtRFiLxqJsLd2iSlk931/s1600/w2b_Tabbed+navigation+for+blogger-jquery-ui-themes-google-hosted-w2b+%252812%2529.gif" width="125" /></div><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/multi-tabbed/style-11.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><br /><br /><div class="code"><link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/mint-choc/jquery-ui.css" type="text/css" /></div><br /><br /><br /><br /><br />Style 12:-<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Multi Tabbed Navigation Widget" border="0" height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL_dfDpeQ7a3BPM2G6rKXZZSVY7czih10I8S-hMD_JMd7Na2Kd8MSchs-piio1wyHRQkJvPtP6iWWw3On2i02fwv1QD_EVnyav-3DSbXVzzF4t15hXjV995_YKF0n75LtKTTZTcFL850C2/s1600/w2b_Tabbed+navigation+for+blogger-jquery-ui-themes-google-hosted-w2b+%252814%2529.gif" width="125" /></div><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/multi-tabbed/style-12.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><br /><br /><div class="code"><link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/pepper-grinder/jquery-ui.css" type="text/css" /></div><br /><br /><br /><br /><br />Style 13:-<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Multi Tabbed Navigation Widget" border="0" height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_HxW2xbba86ZJQ6YBGcST4iNJqXWz-RUnKpo_23fwr0rS345zmzgxKAsfu1h3V3hRZjk54KW_vhj-whSGr9ukSonA_3XFvtQ-YWRLIccG2JxNaNGAGHHEau_S9swj4YrsqRVVIaIJ2d-Y/s1600/w2b_Tabbed+navigation+for+blogger-jquery-ui-themes-google-hosted-w2b+%252815%2529.gif" width="125" /></div><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/multi-tabbed/style-13.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><br /><br /><div class="code"><link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/redmond/jquery-ui.css" type="text/css" /></div><br /><br /><br /><br /><br />Style 14:-<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Multi Tabbed Navigation Widget" border="0" height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-ie4YZ6S4PCQhz2CnqG-Htw23GUgBSll603VTXVeXms4h4s3-VAB5C18MTHG_WHdYW1SNAs8ZOT_L284QSi2unLLQqh_Ff7F-8DxP1JODRfqnWAblHqU8huRkjJfub3vXD7G4sdrN4POV/s1600/w2b_Tabbed+navigation+for+blogger-jquery-ui-themes-google-hosted-w2b+%252816%2529.gif" width="125" /></div><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/multi-tabbed/style-14.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><br /><br /><div class="code"><link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/smoothness/jquery-ui.css" type="text/css" /></div><br /><br /><br /><br /><br />Style 15:-<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Multi Tabbed Navigation Widget" border="0" height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZp0_IMsb3j_yf20JjXXUSmeiGDDIj9dof3H88M_LxN-ZW_0M5Gj4JcaZlqbwjRh1hgBreCx8FcRNPYpEAErJ863ssUVw6bFY7bPPRBI4c2xgGmWgDcfVGi72dg5qqbacMJPAxlxL-aEmP/s1600/w2b_Tabbed+navigation+for+blogger-jquery-ui-themes-google-hosted-w2b+%252817%2529.gif" width="125" /></div><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/multi-tabbed/style-15.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><br /><br /><div class="code"><link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/south-street/jquery-ui.css" type="text/css" /></div><br /><br /><br /><br /><br />Style 16:-<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Multi Tabbed Navigation Widget" border="0" height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhllhEFwjB4JP4X2oGY7pCtgEWJW1WCxDeZ3x-e5E6kaLJdx0-TVkHsEviLETelXo_FFQNOXIem3z37oH8LS8srPkJLS7FXR6fkEXAFPSsQmD_gXvqIzOUKWrbsvxOGJ5WbEo19lfsFcceC/s1600/w2b_Tabbed+navigation+for+blogger-jquery-ui-themes-google-hosted-w2b+%252818%2529.gif" width="125" /></div><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/multi-tabbed/style-16.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><br /><br /><div class="code"><link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/start/jquery-ui.css" type="text/css" /></div><br /><br /><br /><br /><br />Style 17:-<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Multi Tabbed Navigation Widget" border="0" height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj13DLxcePJxEh5W6HuBCrfrl9Wq_5wETLLauVGDN141YIr2-Z44uS9vLHJK7piHXzTXmSXXpJtkG9mHTnXvWhROuwduolcpVmjKE5LQXTBegTlRGGbpbVfkbEePtgwxYrEwQe_WynKoz2x/s1600/w2b_Tabbed+navigation+for+blogger-jquery-ui-themes-google-hosted-w2b+%252819%2529.gif" width="125" /></div><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/multi-tabbed/style-17.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><br /><br /><div class="code"><link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/sunny/jquery-ui.css" type="text/css" /></div><br /><br /><br /><br /><br />Style 18:-<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Multi Tabbed Navigation Widget" border="0" height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrNWKXJhs7n2YFrVMzXVVSCFRJSVSZR7BgGzYeofSceXeAWwLZ5OzXKsUB6jvE8FzgZWcJTmi0TutCmW7oZ5IUw2rIWjACHGCTVptKodqDnCYq6pWvcERJJM0g_TGyFo7tWbBbmlPLnsbA/s1600/w2b_Tabbed+navigation+for+blogger-jquery-ui-themes-google-hosted-w2b+%252820%2529.gif" width="125" /></div><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/multi-tabbed/style-18.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><br /><br /><div class="code"><link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/swanky-purse/jquery-ui.css" type="text/css" /></div><br /><br /><br /><br /><br />Style 19:-<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Multi Tabbed Navigation Widget" border="0" height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6S4ykpw5aWU7B2IqGJ-C3QdAoAyrNhHc1cSfSrNIe7AFYukp7zczOELD049fRmfecqcok0ZnYJMxRaYTMOuIJ2uqlFjqScXJYCNqbHnCgxyT5CAdCjnlHira87gbDqMmEO8kZ3DGo4ieN/s1600/w2b_Tabbed+navigation+for+blogger-jquery-ui-themes-google-hosted-w2b+%252821%2529.gif" width="125" /></div><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/multi-tabbed/style-19.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><br /><br /><div class="code"><link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/trontastic/jquery-ui.css" type="text/css" /></div><br /><br /><br /><br /><br />Style 20:-<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Multi Tabbed Navigation Widget" border="0" height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilFBQ3s1bkf_h2aIMAaF0j1b9rWDmXcnDY6beNk1j1k2C-4IFL68hKCY9DNig_xncE192ocJQVUsWmCxcuCi0JKai6SPecgMM7TKERkXBfaGG69mA6HpG6mSQkLjxBH0c1KUDF7BBvITmC/s1600/w2b_Tabbed+navigation+for+blogger-jquery-ui-themes-google-hosted-w2b+%252822%2529.gif" width="125" /></div><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/multi-tabbed/style-20.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><br /><br /><div class="code"><link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/ui-darkness/jquery-ui.css" type="text/css" /></div><br /><br /><br /><br /><br />Style 21:-<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Multi Tabbed Navigation Widget" border="0" height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVpODUR4uh9VxMbFn9NZZAGAo-ryXTrXs5F79r9p6WEQjSIPmodMdMJNDVBfXxi7zspufsxeLwZKPme3fddj8ZE9U3EsmJgBujpFW5AQ6TUlkezTOf3od50Yd6EnP7FxHYUslzU-hSlp_l/s1600/w2b_Tabbed+navigation+for+blogger-jquery-ui-themes-google-hosted-w2b+%252823%2529.gif" width="125" /></div><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/multi-tabbed/style-21.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><br /><br /><div class="code"><link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/ui-lightness/jquery-ui.css" type="text/css" /></div><br /><br /><br /><br /><br />Style 22:-<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Multi Tabbed Navigation Widget" border="0" height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikoAdgCYhWs4hE8tAHr43PLaZdEpNOoJlYyb4KTwzZwOEgkAp9soeEbO20uvNrwpO8Z1waK4py_q7Ob_JCt1lMB8cKY5BaVAqe7wdmYS-hy6lJyMx7nhAyiSyWC6zNzP7T7X0GpzEvXbT4/s1600/w2b_Tabbed+navigation+for+blogger-jquery-ui-themes-google-hosted-w2b+%252824%2529.gif" width="125" /></div><br /><div style="text-align: center;"><a class="button big green" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/multi-tabbed/style-22.html" rel="nofollow" target="_blank">Live Demo</a></div><br /><br /><br /><div class="code"><link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/vader/jquery-ui.css" type="text/css" /></div><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><b><span style="color: blue;"><u>Adding HTML Code</u></span></b><br /><br /><br /><br />Now let's start adding it... <br /><br /><b><span style="color: blue;">Step 1.</span></b> Login to Your Blogger Account.Go to your Blogger Dashboard.Click on Layout tab from left pane and click on Add a Gadget link. <br /><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://bit.ly/work24" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" height="345" img="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2RdNBqjfjEofcH93jGolZE6_pO9V3I50yTHO220rTtU-8UX3B3SGub2G4opdXfOKnJRB5byMqiXhASBACXQmhAmGJsHQueKJz-1MWPnXQ8-zAYe_p_uNlnQ3OzIg1zjXyX-aX6PTOg4F_/s1600/Blogger+Dashboard,+go+to+Layout+and+click+on+Add+a+Gadget+link.png" width="550" /></a></div><br /><b><span style="color: blue;">Step 2.</span></b> After click on Add a Gadget link A pop-up box will open now<br />with many gadget list, Choose HTML/JavaScript from the gadget options by clicking the blue plus sign for that gadget. <br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://bit.ly/work24" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" height="219" img="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr9fOyYc42xjawkDpgQUW445mywOAf8BcrMrPvRja_q6sC-hE07ieCRv05XAW4cxof7XpNKA4BN5UUhaG7ewjT5NUYxU6maBPRCs4fEhCu3JiZOOBbxTnnMvygQnlPrCvx0IpnZgAfVmQ9/s1600/pop-up+window,+choose+the+HTMLJavaScript+widget.png" width="486" /></a></div><br /><b><span style="color: blue;">Step 3.</span></b> Select 'HTML/Javascript' and add the one of code given below. <br /><br /><b><span style="color: blue;">Step 4.</span></b> Now Click On Save 'JavaScript' You are done.<br /><br /><br /><br /><br /><div class="code"><!-- Tabbed Navigation Widget For Blogger By 24work --><br /><br /><br /><div id="tabs"><br /><ul><li><a href="#tabs-1">Tab1</a></li><li><a href="#tabs-2">Tab2</a></li><li><a href="#tabs-3">Tab3</a></li></ul><br /><br /><div id="<span style="color: red;">tabs-1</span>">  <span style="color: red;">Tab 1 content goes here  </span></div><br /><div id="<span style="color: blue;">tabs-2</span>">  <span style="color: blue;">Tab 2 content goes here  </span></div><br /><div id="<span style="color: lime;">tabs-3</span>">  <span style="color: lime;">Tab 3 content goes here  </span></div><br /><br /><a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><br /><a href="http://24work.blogspot.com/" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><br /><a href="http://24work.blogspot.com/" target="_blank" title="Free Backlinks"><img src="https://bitly.com/24workpng1" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><br /></div><br /><!-- Tabbed Navigation Widget For Blogger By 24work --><br /><br /></div><br /><br /><br /><span class="Apple-style-span" style="background-color: white; color: #444444; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><b><span style="color: #ff9900;">Note:</span></b><br /><b>Replace these with your tab titles</b><br /></span><br /><div align="justify"><span class="Apple-style-span" style="background-color: white; color: #444444; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><b><br /></b></span></div><div align="justify"><span class="Apple-style-span" style="background-color: white; color: #444444; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><b><code><b><span style="color: red;">Tabs-1</span></b></code></b></span><span class="Apple-style-span" style="background-color: white; color: #444444; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><b><code></code><span class="Apple-converted-space"> </span>, <code></code></b></span><span class="Apple-style-span" style="background-color: white; color: #444444; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><b><code><b><span style="color: #0033ff;">Tabs-2</span></b></code></b></span><span class="Apple-style-span" style="background-color: white; color: #444444; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><b><code></code>  , <code></code></b></span><span class="Apple-style-span" style="background-color: white; color: #444444; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><b><code><b><span style="color: #00cc00;">Tabs-3</span></b></code></b></span></div><div align="justify"><span class="Apple-style-span" style="background-color: white; color: #444444; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><b><code><b><span style="color: #00cc00;"><br /></span></b></code></b></span></div><div align="justify"><span class="Apple-style-span" style="background-color: white; color: #444444; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><b>Replace these with your widget codes.</b></span></div><div align="justify"><span class="Apple-style-span" style="background-color: white; color: #444444; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><b><br /></b></span></div><div align="justify"><span class="Apple-style-span" style="background-color: white; color: #444444; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><b><code><b><span style="color: red;">Tab 1 content goes here</span></b></code><span class="Apple-converted-space"> </span>, <code><b><span style="color: #0033ff;">Tab 2 content goes here</span></b></code> ,</b>  <code><b><span style="color: #00cc00;">Tab 3 content goes here</span></b></code></span></div><br /><br /><br /><br /><br /><div style="color: #674ea7;"><u><span style="font-size: large;"><b>Adding HTML Code </b></span></u></div><br /><br />Use bellow Form to add HTML widget code to Blogger<br /><br /><br /><br /><iframe frameborder="0" height="1000px" scrolling="no" src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/tab-navigation/tabbed-navigation-widget-generator-ycode.html" width="600px"></iframe><br /><br /><br /><b><i>Yes! You are Done! </i></b><br /><br /><div style="color: #999999; font-family: "Trebuchet MS",sans-serif;"><b>For any assistance and customization of this widget you can surely contact me via comments or Contact form.</b></div><br />Have a Nice Day...<br /><br /><br /><br /><blockquote>Many thanks to <span style="color: #f6b26b;"><a href="http://www.way2blogging.org/" rel="nofollow" target="_blank"><span style="color: #f6b26b;">way 2 blogging</span></a> </span>for making this code and I just tested and modified to work on blogger</blockquote><br /></div>

Add Multi Tabbed Navigation Widget To Blogger Sidebar

Hi Friends, Today I am going to share how to add multi tabbed widget for blogger. I have seen that there are so many tutorials on the web re...

Read more »