How to Create Tabbed Widget In Blogger

Bismillah (In The Name of Allah) , How to create tab widget I got from this blog there a lot Abu Farhan tutorial how to hack blogger, and I wrote back on my blog, this tutorial can be found on the title of the posting bloggertuts his The Easiest Way to Make Tabbed Sidebars on Blogger. when I read the article bloggertuts, to make the sidebar tabbed he got the idea from webitect titled Create a Graceful jQuery Tabbed Widgets in 5 Easy Steps, okay than I discuss here there we'd better go straight to the tutorial

As an example of tabbed widgets for bloggers see the picture or you can immediately see the results click here For Live Demo

Sample Picture Tabbed Widget

The first step you log into blogger and clik Edit HTML and do not forget to tick the expand widget
After that, the Search Code

]]></b:skin>

Once Found this code, add the following css code right above the code

]]></b:skin>

Copy Code CSS

/* Tabbed Sidebar Widgets --------------------------------- */ .widget-wrapper2{ border:1px solid #494e52; background-color:#636d76; padding:8px; } .widget-tab { -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; -moz-border-radius-topright:5px; -webkit-border-radius-bottomleft:5px; -webkit-border-radius-bottomright:5px; -webkit-border-radius-topright:5px; background:#FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrwptEolBu1zcsFden1o1x4YfRO6UMnNVCSAsVFqodzt7q6cYgEptCNv5UBCdcmz-3jGCVQXT2zrwcR5rhlKVZehFCVId76f8VQ5SUbHTjywj53o-PNcMMuQUMQbbrYQor2l6NiMuFRZg/s316/tabcontentbg.gif) repeat-x scroll left bottom !important; border:1px solid #CFCFCF; font-family:Arial,Helvetica,sans-serif; padding:15px !important; } .widget-tab ul { margin:0px; padding:0px 20px 0px 20px; } .widget-tab ul li { list-style:none; border-bottom:1px solid #d6dde0; padding-top:10px; padding-bottom:10px; font-size:13px; } .widget-tab ul li:last-child { border-bottom:none; } .widget-tab ul li a { text-decoration:none; color:#3e4346; } .widget-tab ul li a small { color:#8b959c; font-size:9px; text-transform:uppercase; font-family:Verdana, Arial, Helvetica, sans-serif; position:relative; left:4px; top:0px; } .tab-content ul li a:hover { color:#a59c83; } .tab-content ul li a:hover small { color:#baae8e; } .active-tab{ background:#FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJmPaKdNyVuXJtibARue_ifcivQXjLYCSYJDfl_vGwmX5di55rpGF2YBl8ljxus6UsBX6-WN2k-dkvHaqbMGt8WiNTrpiYknRomBgjL8Cv5c7StRnEHOH7ZWK6hkH8ifySx8PJ52IXE-Y/s316/tabtopbg.gif) repeat-x scroll left top !important; border-color:#CFCFCF #CFCFCF #FFFFFF #CFCFCF !important; border-style:solid !important; border-width:1px 1px 2px !important; color:#282E32 !important; } ul.tab-wrapper { margin:0px; padding:0px; margin-top:5px; margin-bottom:6px; } ul.tab-wrapper li { -webkit-border-radius-topleft:5px; -webkit-border-radius-topright:5px; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; background:#191919 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrwptEolBu1zcsFden1o1x4YfRO6UMnNVCSAsVFqodzt7q6cYgEptCNv5UBCdcmz-3jGCVQXT2zrwcR5rhlKVZehFCVId76f8VQ5SUbHTjywj53o-PNcMMuQUMQbbrYQor2l6NiMuFRZg/s316/tabcontentbg.gif) repeat-x scroll left top; border:1px solid #464C54; color:#FFFFFF; cursor:pointer; display:inline; font-family:Verdana,Arial,Helvetica,sans-serif; font-size:9px; font-weight:bold; line-height:2em; list-style-image:none !important; list-style-position:outside !important; list-style-type:none !important; margin-right:1px; padding:8px 14px; text-align:center; text-decoration:none;

Next step is to install JQuery Search Code </head>
And store the Jquery code before Tag

Now Install Java Script For Tab
Look for Code </head> and save the script below, before tag </head>

Customizing Widget

var starttab= 0 ; var endtab= 2 ; var sidebarname=" sidebar ";

Clik Save
If you have problem, Please visit Tabb Bloggertuts How to create Tabb Widgets For Blogger

About the Author

I'm Hung Duy, the founder of Xml Blogger Templates (XBT). I'm a freelance writer on topics related to Website Optimization (SEO), blogger customizations and making money online. I'm blogging since 2006 and I'm currently a guest blogger on Blogging With Success.
Follow Me on Twitter or On Facebook

Visit xmlbloggertemplates.com for more Blogger Templates