Tabbed content box or tab view is a great way to maximize the usage of precious screen real estate on your blog.
There are quite a few tutorials out there that show how to create tabs with CSS and jQuery. However, most of them require you to modify your blog template codes. On top of that you also have to manually add the content of each tab.
See the demo here.
Below are some of the features of the tab content box:
- Accommodates unlimited number of widgets.
- Keeps the tabbed widgets’ original appearance.
- Go to Design > Page Elements and click Add A Gadget.
- Leave the title box blank.
- Copy the code below and paste it inside the content box.
- Code line 39 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 line 44.
- The default box background color is white (#fff). You can change it in code line 29. Apply the same color for the active tab’s background and bottom border (in line 23 and 24).
- Click Save and view your blog.
- Make sure you title each widget that you want to tabify. Tabber won’t work properly without widget titles.
- Reduce tab widths so that all tabs fit into a single row. This can be achieved by using short widget titles.
- You may need to reduce the widths of the tabified widgets to fit them into the box.
- Don’t forget to test in Internet Explorer. This widget may cause “Operation aborted” error in IE for some non-designer templates. If that’s the case, this widget is not for you :(
Judul : How To Tabbed Content Widget For Blogger Deskripsi : Admin : Terbit Rating : 5 stars