Navigate Box

Posting tutorial lagi, nih. Kali ini request Tabitha. Ikutin yuk, tutorial ini, pasti pada penasaran deh!

Kalian tahu nggak kira-kira apa tutorial yang akan kubahas ini? Kalo bingung, lihat deh image di bawah ini

Nah, ini yang kumaksud 

Sudah lihat? Mau tahu gimana cara buatnya? Follow me!
Special credit kode sama Kak Atin. Kak Atin bilang, ini KHUSUS Template DESIGN,SIMPLE, tapi saat kupakai buat denim ini bisa kok. Jadi, yang pake template denim juga bisa ya!
Mungkin blogskins bisa, tapi dengan kode yang berbeda, atau memang tidak bisa sama sekali :D

• Dashboard --> Template --> Edit HTML
• Cari (ctrl f ) kode  ]]></b:skin> 
• Copy kode di bawah ini

 ul.tabs li {

float: left;

margin: 0;

padding: 0;

height: 31px; /*--Subtract 1px from the height of the unordered list--*/

line-height: 31px; /*--Vertically aligns the text within the tab--*/

border-left: none;

margin-bottom: -1px; /*--Pull the list item down 1px--*/

overflow: hidden;

position: relative;

}

ul.tabs li a {

font-weight: bold;

color: #000;

display: block;

font-size: 10px;

padding: 0 20px;

border: 2px solid #FFF; /*--Gives the bevel look with a 1px white border inside the list item--*/

outline: none;

}

ul.tabs li a:hover {

background: #e1c9f3;

}

html ul.tabs li.active, html ul.tabs li.active a:hover { /*--Makes sure that the active tab does not listen to the hover properties--*/

background: #e1c9f3;

border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/

}

.tab_container {

overflow: hidden;

clear: both;

float: left; width: 98%;

background:#ffffff;

 background-attachment:fixed;

}

.tab_content {

padding: 2px;

height :260px;

}

• Paste di atas kode ]]></b:skin> tadi.
• Lalu, cari kode </head>
• Copy kode di bawah ini

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script>
$(document).ready(function() {
$(&quot;.tab_content&quot;).hide(); //Hide all content
$(&quot;ul.tabs li:first&quot;).addClass(&quot;active&quot;).show(); //Activate first tab
$(&quot;.tab_content:first&quot;).show(); //Show first tab content
//On Click Event
$(&quot;ul.tabs li&quot;).click(function() {
$(&quot;ul.tabs li&quot;).removeClass(&quot;active&quot;); //Remove any &quot;active&quot; class
$(this).addClass(&quot;active&quot;); //Add &quot;active&quot; class to selected tab
$(&quot;.tab_content&quot;).hide(); //Hide all tab content
var activeTab = $(this).find(&quot;a&quot;).attr(&quot;href&quot;); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});</script>

• Paste di atas kode </head> tadi. Save template.
• Lalu, tata letak --> add a gadget --> html/java script
• Copy kode di bawah ini

<ul class="tabs">
<li><a href="#tab1">TITLE</a></li>
<li><a href="#tab2">TITLE</a></li>
<li><a href="#tab3">TITLE</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
Tab 1 Put what?</div>
<div id="tab2" class="tab_content">
Tab 2 Put what?</div>
<div id="tab3" class="tab_content">
Tab 3 Put what?</div>
</div>

• Preview dulu, kalau berhasil, save!

Note
oren : warna
merah : background border
ungu :  judul konten
hijau : isi apapun/isi konten