how to create Menu without the Edit HTML Tab

Many ways and models of Tab Menu created by seniors Blogger, just try looking for friends in the search box, just select how they want that is available. :z

But here I will try to share with a friend how to make the Tab Menu is the most easy to apply to blog friend, because it does not need to touch the HTML template simply by adding gadgets The trick as follows :

• Login to Blogger account with ID friend
• In the Template Designer select Add Gadget
• Click the plus sign [+] on the HTML / JavaScript
• Copy-Paste the following code into it 

<style type="text/css">
div.TabView div.Tabs
{Height: 30px; overflow: hidden}
div.TabView div.Tabs a {float: left; display: block; width: 73px; / * Width of the Main Menu Top * /
text-align: center; height: 30px; / * Height Main Menu Top * /
padding-top: 5px; vertical-align: middle; border: 1px solid # FFF; / * Top Menu border color * /
border-bottom-width: 0; text-decoration: none; font-size: 15px; font-family: "tekton Pro" / * Font Main Menu Top * /
}
div.TabView div.Tabs {background: # 95CAFF; color: # 000; border: 1px solid # FFF; text-decoration: none;}
div.TabView div.Tabs a: hover {background: # 7CA9C0; color: # 00F; border: 1px solid # 00F; text-decoration: none;}
div.TabView div.Tabs a.Active {border: 1px solid # 00F; background: # 00F; color: # FF0; font-style: normal; border: 1px solid # FFF; text-decoration: none; / * background color On the Main menu * /}
div.TabView div.Pages {clear: both; border: 1px solid # FFF; / * Main Box border color * / overflow: hidden; background-color: # 95CAFF; / * background color of the Main Box * /}
div.TabView div.Pages div.Page {height: 100%; padding: 0px; overflow: hidden}
div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
</ Style>
<script type='text/javascript'>
//<![ CDATA [
tabview_aux function (TabViewId, id)
{
tabview var = document.getElementById (TabViewId);
/ / ----- ----- Tabs
var Tabs = TabView.firstChild;
while (Tabs.className! = "Tabs") Tabs = Tabs.nextSibling;
var tabs = 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>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px; "class="Tabs">
<a>TITLE  -1 </ a>
 <a>TITLE -2 </ a>
<a>TITLE  -3 </ a>
<a>TITLE  -4 </ a>
</ Div>
<div style=" width:300px; height:300px; "class="Pages">
<div class="Page">
<div class="Pad">
CONTENTS TITLE HERE -1
</ Div>
</ Div>
<div class="Page">
<div class="Pad">
CONTENTS TITLE HERE -2
</ Div>
</ Div>
<div class="Page">
<div class="Pad">
CONTENTS TITLE HERE -3
</ Div>
</ Div>
<div class="Page">
<div class="Pad">
CONTENTS TITLE HERE -4
</div> </ div> </ div> </ div> </ form> </ div> </ div> </ div>
<script type="text/javascript">
tabview_initialize ('tabview');
</script>

Have a friend replace the red text are:

• Change text CONTENTS TITLE -1 s / d 4 HERE with what you want al show
• Width: 300px; fit the width of the placement of this Menu Tab
• Height: 300px; in accordance with the wishes of friends
• Try the HTML code above noticed comrade with a width: 73px; with border: 1px; wore a very simple formula [width of the tab [300] - the number of border Tab [8]: Tabs [4]  example: 300 - {2 + 2 +2 +2}: 4 = 73

Problems and solutions: 

• Problem »Sometimes - sometimes all of the contents of Tab collector together in one Tab
• The solution »Add </ div> between problematic under Title Contents