How To Create Tab View Menu 3 Column Blog

      In accordance Headlines Tab View Menu 3 Columns, means in one view sidebar widget widgets will have 3 pieces (can be anything, example: Guest Book, Top Post script or feedback, Collection of Banners and so on), this method also will make the blog a bit more presentable and not many places to drain.
Ok, for my friends who want to create a Tab View Menu 3 column, please follow the steps below:
1. Login to your account Blogspot 2. Click the Design / Design>> Edit HTML>> Click on Expand Widget Templates, 3. Find the following code: ]]></ b: skin> 4. Then copy the code below and put it just above that code: div.TabView div.Tabs { height: 24px; overflow: hidden; } div.TabView div.Tabs a { float: left; display: block; width: 103px; text-align: center; height: 24px; padding-top: 3px; vertical-align: middle; border: 0.5px solid # 000000; border-bottom-width: 0; text-decoration: none; font-family: "Arial", Times New Roman, Serif; font-weight: 900; color: # 000080; } div.TabView div.Tabs a: hover, div.TabView div.Tabs a.Active { background-color: # CEF6CE; } div.TabView div.Pages { clear: both; background-color: # FFFFFF; border: 0.5px solid # 000000; overflow: hidden; } div.TabView div.Pages div.Page { height: 100%; padding: 0px; overflow: hidden; } div.TabView div.Pages div.Page div.Pad { padding: 3px 5px; }
5. If it is then proceed to find this code: </ head> 6. Then copy the code below and paste the above code before: <script type='text/javascript'> tabview_aux function (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 ------------------------------------------ ------------------- tabview_switch function (TabViewId, id) {tabview_aux (TabViewId, id);} tabview_initialize function (TabViewId) {tabview_aux (TabViewId, 1);} </ Script>
 
7. Save templates and proceed to the next step,
8. Click the Design / Design>> Page Elements>> Add a Gadget> HTML / Javascript,
9. Copy the code below and insert it into the HTML content / Javascript and set (the edit) in accordance with their respective descriptions: <form action="tabview.html" method="get"> <div class="TabView" id="TabView"> class="Tabs" <div style="width: 350px;"> <a> Title Tab 1 </ a> <a> Title Tab 2 </ a> <a> Title Tab 3 </ a> </ Div> <div class="Pages" style="width: 350px; height: 250px;"> <div class="Page"> <div class="Pad"> Contents 1 tab </ Div> </ Div> <div class="Page"> <div class="Pad"> Contents tab 2 </ Div> </ Div> <div class="Page"> <div class="Pad"> Contents tab 3 </ Div> </ Div> </ Div> </ Div> </ Form> <script type="text/javascript"> tabview_initialize ('TabView'); </ Script>
  10. If thats true, then Save. (If done correctly then it will be like mine).
Such was the How to Create Tab View Menu 3 Columns in Blog, may be useful and good luck, greeting.