Widget Multi Columns Blogger

By making this you'll be able to tie some gadgets on your blog together in one column. Mostly, the gadgets that are oftenly tied in by bloggers like Recent Post, Recent comment, Popular Post, and somekind. Look at the below example, it's not exactly but close.

Here is the content of menu selected of the above option

From the above example i'm sure that you grabbed an estimation that it will certainly free some spaces on your blog, didn't you?.

Let's get down to the bussiness. - Follow the below instruction to implement the methode on your blog.

1. Login to your blogger.
2. Go to Design page.
3. Edit HTML.
4. Download your template for backup.
5. Find the tag ]]></b:skin> in your template and put the below code above it.

div.tabview div.tabs {height:25px; overflow:hidden;} div.tabview div.tabs a {float:center; display:block; width:100px; text-align:center; height:25px; padding-top:5px; vertical-align:middle; border:1px solid #ccc; text-decoration:none; font-family:verdana,arial,sans-serif; font-weight:bold; color:#333;} div.tabview div.tabs a:hover, div.tabview div.tabs a.active {background:#fff;} div.tabview div.pages {clear:both; border:1px solid #ccc; overflow:hidden; background:#fff;} div.tabview div.pages div.page {height:100%; padding:0px; overflow:hidden;} div.tabView div.pages div.page div.pad {padding:5px;}

The code above looks like the below.

div.tabview div.tabs {height:25px; overflow:hidden;} div.tabview div.tabs a {float:center; display:block; width:100px; text-align:center; height:25px; padding-top:5px; vertical-align:middle; border:1px solid #ccc; text-decoration:none; font-family:verdana,arial,sans-serif; font-weight:bold; color:#333;} div.tabview div.tabs a:hover, div.tabview div.tabs a.active {background:#fff;} div.tabview div.pages {clear:both; border:1px solid #ccc; overflow:hidden; background:#fff;} div.tabview div.pages div.page {height:100%; padding:0px; overflow:hidden;} div.tabView div.pages div.page div.pad {padding:5px;}

6. Find the tag </head> in your template and put the below code above it.

<script type='text/javascript'> function tabview_aux(TabViewId, id) { var TabView = document.getElementById(TabViewId); // ----- Tabs ----- var Tabs = TabView.firstChild; while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling; var Tab = Tabs.firstChild; var i = 0; do { if (Tab.tagName == "A") { i++; Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");"; Tab.className = (i == id) ? "Active" : ""; Tab.blur(); } } while(Tab = Tab.nextSibling); // ----- Pages ----- var Pages = TabView.firstChild; while(Pages.className != 'Pages') Pages = Pages.nextSibling; var Page = Pages.firstChild; var i = 0; do { if (Page.className == 'Page') { i++; if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px"; Page.style.overflow = "auto"; Page.style.display = (i == id) ? 'block' : 'none'; } } while (Page = Page.nextSibling); } // ----- Functions ------------------------------------------------------------- function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); } function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); } </script>

The code above looks like the below.

<script type='text/javascript'> function tabview_aux(TabViewId, id) { var TabView = document.getElementById(TabViewId); // ----- Tabs ----- var Tabs = TabView.firstChild; while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling; var Tab = Tabs.firstChild; var i = 0; do { if (Tab.tagName == "A") { i++; Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");"; Tab.className = (i == id) ? "Active" : ""; Tab.blur(); } } while(Tab = Tab.nextSibling); // ----- Pages ----- var Pages = TabView.firstChild; while(Pages.className != 'Pages') Pages = Pages.nextSibling; var Page = Pages.firstChild; var i = 0; do { if (Page.className == 'Page') { i++; if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px"; Page.style.overflow = "auto"; Page.style.display = (i == id) ? 'block' : 'none'; } } while (Page = Page.nextSibling); } // ----- Functions ------------------------------------------------------------- function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); } function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); } </script>

7. Now Save your template.

You're not yet done, there's one more script that you have to add to your blog, but for this one it should be through "Html/JavaScript" widget. So, go to your design page on blogger and then click on the "Add A Gadget" on side where you want the form to appear, and put the code below in the box.

<form action="tabview.html" method="get"> <div class="TabView" id="TabView"> <div class="Tabs" style="width:330px;"> <a>Title 1</a> <a>Title 2</a> <a>Title 3</a> </div> <div class="Pages" style="width:330px; height:250px;"> <div class="Page"><div class="Pad"> Content Of Title 1 </div></div> <div class="Page"><div class="Pad"> Content Of Title 2 </div></div> <div class="Page"><div class="Pad"> Content Of Title 3 </div></div></div></div></form> <script type="text/javascript"> tabview_initialize('TabView'); </script>

The code above looks like the below.

<form action="tabview.html" method="get"> <div class="TabView" id="TabView"> <div class="Tabs" style="width:330px;"> <a>Title 1</a> <a>Title 2</a> <a>Title 3</a> </div> <div class="Pages" style="width:330px; height:250px;"> <div class="Page"><div class="Pad"> Content Of Title 1 </div></div> <div class="Page"><div class="Pad"> Content Of Title 2 </div></div> <div class="Page"><div class="Pad"> Content Of Title 3 </div></div></div></div></form> <script type="text/javascript"> tabview_initialize('TabView'); </script>

8. Save and you're done.