How To Add A Tabbed NavigationWidget to Blogger alphause

Helplogger Home Blog DesignWidgets SEO Menus Po ... How To Add A Tabbed Navigation Widget to Blogger 14 comments The tabviews are elements that allow us to group in a single container various gadgets and these can be selected via tabs. Its main function is to save space on the blog to avoid scattered gadgets in the same category so you can group multiple gadgets into one. There are several methods for creating tabviews, some require jQuery, other MooTools, or any other script. To add this widget to your blog, just follow the steps below: Step 1.From your Blogger Dashboard, go toTemplateand click on theEdit HTMLbutton Step 2.Expand the style of the template, by clicking on the sideways arrow before ... Step 3.Search using CTRL + F for the following tag: ]]> Step 4.Just above it, add the following code: /* Tabview for Blogger ----------------------------------------------- */ .tabviewcont{ margin:15px 0; padding:0; clear:both; } .tabviewnav { margin: 0 0 0 14px; padding:3px 0;/* If you are using a Blogger Template change 0 with 15px */ font-size:12px;/* Font size of text inside tabs */ font-weight:bold; } .tabviewnav li { list-style:none; margin:0; display:inline; } .tabviewnav li a { padding:3px 6px; margin-right:1px; background:#F6F6F6;/* The background color of the tabs */ border-radius:5px 5px 0 0; -moz-border-radius:5px 5px 0 0; -webkit-border-radius:5px 5px 0 0; text-decoration:none; color:#222222; } .tabviewnav li a:hover { color:#222222; background:#EBEBEB;/* Background color of the tab on mouseover */ text-decoration:none; } .tabviewnav li.tabviewactive a, .tabviewnav li.tabviewactive a:hover { background:#EBEBEB;/* Background color of the active tab */ color:#222222; } .tabviewcont .tabviewtab { padding:5px; border:1px solid #EEEEEE;/* Border around the container */ background:#fff;/* The background color of the gadget */ } .tabviewcont .tabviewtab h2, .tabviewcont .tabviewtabhide { display:none; } .tabviewtab .widget-content ul{ list-style:none; margin:0 0 10px 0; padding:0; } .tabviewtab .widget-content li { border-bottom:1px solid #ccc; margin:0 5px; padding:2px 0 5px 0; } Step 5.Find thetag and just above it, paste this script: Step 6.Finally, look for this line:

Or if you use an old template of Blogger, search this line:

Step 7.Paste below one of these two lines, this code:

Step 8. Save changes, and go toLayoutand there you will see the new areas to add gadgets. You just have to click onAdd a Gadgetto add the gadget to the tab that corresponds, or drag a gadget you already have to that section. If you want to add more tabs, then just add before the last

a line like this: Note that each line you add should have a different ID, for exampleTab5,Tab6, etc.. You can add multiple tabs, just repeat the last step and likewise remember to change the name of the IDs. Remember that if your sidebar is too narrow, then you should not put a lot of tabs, or tab titles that are very long. You should also note that this gadget does not speed up the loading speed of the blog, is only to group gadgets into one, even, depending on the blog-may take a while to load the tabview. Like 5 Random Posts Google Translate Widget with Flags For Blogger28/04/2012 - 22 Comments Add Social Bookmarking Buttons near Adsense Ads04/03/2012 - 1 Comments On-Page SEO Tips for Blogger19/10/2013 - 3 Comments Related Posts: Share blog posts in social medias u... Add floating social media sharing b... Add A CSS Animated Share Button on ... Orbit - jQuery Image Slider Plugin ... What is the difference between padd... 14 comments: Mohammad Yaseen M.Y.B 4/29/2013 oh great post brother very nice work, wigdet is awesome, i have that, but your look bit good one, Reply Donz i 4/30/2013 thanks Reply Parallel Blog 5/01/2013 I liked it. Reply Flory all 5/03/2013 In my blog don't work :( Reply Naveen Mayura 5/05/2013 This blog is very very useful for new bloggers like me.....Thank you helplogger..... Reply Natsu Phc 5/06/2013 nice widget :3 http://amsmuvee.blog spot.com/ Reply Cameron Conner 5/07/2013 Just found your blog today and have spent over 2hrs digging threw your work. Very impressed! Is it possible to change the template background on individual posts? Reply Replies Admin 5/23/2013 Hi Cameron, Yes, it is possible - I already made a tutorial about it. Check it here Sorry for replying so late, I've been missing on the internet for a while. Thank you very much for your appreciation :) unlimitedsoftz 5/09/2013 Great Work.. Also Visit my blog for some exclusive social connect widgets.. http://unlimitedsoftz.blogs pot.in Reply Jagdish Nagda 5/10/2013 thanks you http://examguide97.b logspot.in/ Reply rajan bhagat 6/19/2013 thnxx buddy.... http://guide4goods.bl ogspot.in/ Reply greluches06 6/20/2013 Hi! Thanks for this article Very helpful I have a problem with my tabs: there is an annoying black bar on the right and I can't get rid of it and there are even more annoying separators between the tabs. What can I do about that? Here's my blog: http://greluchesetfanfrel uches.blogspot.fr/ Here's the CSS I added to obtain this result: .tabs-inner .widget li a { font-family:"Gruppo"; font-size:122%; font-weight:bold; font-style:bold; color: black; border:0px; background: #ffffff; } I would reeeeaaaally appreciate any help! ^^ Reply Muhammad Arfan 8/26/2013 helpful post, thx very much..:) Reply Anonymous 12/10/2013 Hey, thanks for this tutorial! It came up as dot points, not tabs. This was on a Watermark Blogger template. I've followed your instructions. What did I do wrong? Reply Add comment Comment as: Sign out Notify mePublishPreview Privacy Policy| Disclaimer| Terms of Service| Sitemap Back to Top DMCA PROTECTED Search Search Follow on Facebook Helplogger Like 2,784 people like Helplogger . Facebook social plugin Follow on Blogger Subscribe via Email Receive Quality Tutorials Straight in your Inbox by submitting your Email below. Submit Or subscribe via RSS Feed Recent Posts How to Add Numbered Page Navigation Widget for Blogger 5 Easy Ways to Improve the SEO of a blog & Boost Traffic What is the difference between padding and margins? Add a Custom jQuery Lightbox To Blogger How to Use Cookies in Javascript Recent Comments irsah imihar Customizing will always be easy with jquery and javascript. Even... Missy G Yay! Thank you for making this so easy! This is just what I... divakar sivashankar admin i have a problem even if i add the tag the ad is showing up... Anonymous I don't understand the instructions you have given :( Nanette Benablo your site is very helpful and easy to follow tutorials. thank you... Popular Posts Simple Recent Posts Widget for Blogger/Blogspot Create A Rollover Image Effect (change image on mouseover) Recent Comments Widget For Blogger How to remove Blogger Picture/Image Shadow and Border Hide/Show Widgets /Gadgets in Home/post /static/archive pages in Blogger 5 Like