Any good web designer would know it is unwise to cram a web page with too much stuff like banners, ads, animated images, and widgets. It has the potential to slow down the site or the page’s loading time (especially with plugins), and can overwhelm the viewer with too much data. Today’s featured widget tutorial will help minimize the latter.
This tutorial from Roy of Blogger e-How will teach you how to make a multi-tabbed widget for your Blogger blog. By merging a specified number of your widgets into one, you get to maximize the usage of your blog’s precious screen real estate.
As Roy points out, what makes this better than other methods of creating a tabbed widget is that you don’t have to modify your blog’s template code, thereby eliminating the chances of messing up your site’s layout. This method will automatically transform your existing widgets into tabs! You can see his demo.
Here are the instructions on how to install it to your blog:
- Go to ‘Design’ page in your Blogger dashboard
- Go to ‘Layout’ and click on ‘Add a Gadget’
- Copy/paste the code below in the content box (you can leave the title box blank)
<!-- to make sure the widget works, do not alter the code below --> <div id='codeholder'><p>Get this <a href="http://bloggerehow.blo
Some important things to note:
- Red color line is for loading jQuery library. Remove this line if you’ve already loaded it somewhere else in your blog. Hint: If your blog has a slider, cycler or something with fading effect running, chances are it is powered by jQuery.
- Specify the number of widgets that you want to turn into tabs in Green color line.
- The default box background color is white (#fff). You can change it in Pink color line. Apply the same color for the active tab’s background and bottom border.
5. Position this gadget you just created above the gadgets that you want to get tabbed.
6. Save your widget and you done!
- Make sure that each widget you want to get tabbed has a title. Otherwise this won’t work properly.
- Use short widget titles so that all tabs will fit in the row.
- You may need to reduce the widths of the tabbed widgets to make them fit.
- Don’t forget to test in Internet Explorer. This widget may cause the “Operation aborted” error in IE for some non-designer templates. If that’s the case, this widget is not for you.
Related Tricks & Tutorials
Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here