Tutorial Blogger : Membuat Menu Tab View

MANTAP...tutorial ini saya dapatkan lagu dari http://asepsukarman.blogspot.com/2006/12/cara-membuat-menu-tab-view-three-in-one.html  dibandingkan dengan pembuatan kotak widget yang di http://ruddyexecutive.blogspot.com/2010/02/tutorial-blogger-membuat-widget-kotak.html yang ini menurut pendapat saya lebih menghemat tempat di template blogger!!!Saya ucapkan terima kasih

pada Bro Asep yang telah membagi ilmunya...oh yah...skirpt ini ada perubahan sedikit dari saya..jika bro and sist kurang jelas bisa tanya langsung ke web Bro Asep...q mulai nih tutorialnya.....

1.Log in ke blogger dengan id kalian tentunya...

2.Pilih menu Layout,edit HTML

3.Centang expand widget template

4.Tekan ctrl+f, lalu cari kode  ]]></b:skin>

5.Masukan kode ini sebelum kode ]]></b:skin>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 84px; /* Lebar Menu Utama Atas */
text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #999999; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #1E62B6; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FFFFFF; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #999999; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FFFFFF; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

dan tentunya yang tulisan merah itu jangan dimasukan ke edit HTML yah...itu hanya kasih informasi saja...

Sehingga kodenya menjadi......

]]></b:skin>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 84px;
text-align: center;
height: 24px;
padding-top: 3px;
vertical-align: middle;
border: 1px solid #999999;
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif;
font-weight: 900;
color: #1E62B6;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FFFFFF;
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #999999;
overflow: hidden;
background-color: #FFFFFF;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

6.Cari kode </head>

7. Dan pasang kode sebelum </head>

<script type='text/javascript'>
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);

// ----- Tabs -----

var Tabs = TabView.firstChild;
while (Tabs.className != &quot;Tabs&quot; ) Tabs = Tabs.nextSibling;

var Tab = Tabs.firstChild;
var i = 0;

do
{
if (Tab.tagName == &quot;A&quot;)
{
i++;
Tab.href = &quot;javascript:tabview_switch(&#39;&quot;+TabViewId+&quot;&#39;, &quot;+i+&quot;);&quot;;
Tab.className = (i == id) ? &quot;Active&quot; : &quot;&quot;;
Tab.blur();
}
}
while (Tab = Tab.nextSibling);

// ----- Pages -----

var Pages = TabView.firstChild;
while (Pages.className != &#39;Pages&#39;) Pages = Pages.nextSibling;

var Page = Pages.firstChild;
var i = 0;

do
{
if (Page.className == &#39;Page&#39;)
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+&quot;px&quot;;
Page.style.overflow = &quot;auto&quot;;
Page.style.display = (i == id) ? &#39;block&#39; : &#39;none&#39;;
}
}
while (Page = Page.nextSibling);
}

// ----- Functions -------------------------------------------------------------

function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
</script>

8.Save

9.Pergi ke menu page elements 

10.Pilih Add gadget,html/javaskirpt

11.Bikin skipt ini sebagai berikut (pemasangan add gadget terserah kalian mau disimpan dimana) 

<form action="tabview.html" method="get">

<div class="TabView" id="TabView">

<div class="Tabs" style="width: 260px;">

<a>Tab 1</a>

<a>Tab 2</a>

<a>Tab 3</a>

</div>

<div class="Pages" style="width: 256px; height: 270px;">

<div class="Page">

<div class="Pad">

Tab 1.1 <br />

Tab 1.2 <br />

Tab 1.3 <br />

</div>

</div>

<div class="Page">

<div class="Pad">

Tab 2.1 <br />

Tab 2.2 <br />

Tab 2.3 <br />

</div>

</div>

<div class="Page">

<div class="Pad"> 

Tab 3.1 <br />

Tab 3.2 <br />

Tab 3.3 <br />

</div>

</div>

</div>

</div>

</form>

<script type="text/javascript">

tabview_initialize('TabView');

</script> 

BINGUNG?????ini saya kasih samplenya......sesuai yang ada di halaman saya

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 260px;">
<a>Data Executive</a>
<a>Campur Sari</a>
<a>Tutorial</a>
</div>
<div class="Pages" style="width: 256px; height: 270px;">

<div class="Page">
<div class="Pad">

<li><a href='http://paijo.blogspot.com/2010/05/my-facebook.html'>FaceBook <br />
<li><a href='http://paijo.blogspot.com/2010/05/sample-photo-outdoor-wedding.html'>Outdoor Wedding
<br />

</div>

</div>

<div class="Page">
<div class="Pad">
<li><a href='http://paijo.blogspot.com/2012/07/editing-efek-lomo-dengan-menggunakan.html'>Efek Lomo<br />
<li><a href='http://paijo.blogspot.com/2012/07/editing-efek-ganti-skin-muka-dengan.html'>Ganti Skin Muka<br />

</div>

</div>

<div class="Page">
<div class="Pad">
<li><a href='http://paijo.blogspot.com/2012/05/tutorial-photoshop-efek-pensil.html'>Photoshop,efek pinsil<br />
<li><a href='http://paijo.blogspot.com/2012/05/tutorial-photoshop-plugin-action.html'>Photoshop,plugin action<br />

</div>

</div>

</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Nah mudah2an tidak bingung SELAMAT MENCOBA!!

Tutorial ini dari :

aSePSuKaRMaN BLoG