Membuat Vertical Tab 'Auto Open' ala Utta'

Asslmlkm,,. oia sebelum saya membahas trik ini, sebelumnya saya sebgai admin, mau mohon ucpin mohon maaf lahir batin yah, jka ad salah mohon dimaafin, mgkn bgi tmn yg komentarnya gk kebalas.hehe,..

Baiklah kali ini utta akan mencoba memberikan tutorial 'Membuat Vertical Tab Auto Open' mksudnya dsini auto open, tanpa harus kita mengklik tab judulnya, mka isi konten didlmnya akn muncul, krna rata2 tabview yg biasa saya temui diblog tmn, mesti kita klik dl bru judul suatu tab, mka isi conten akn klhtan :D, dan jika sobat pnasan dgn tutorial yg sy mksd silahkan lihat demo dibawah :

JUDUL-1

ISI CONTENT HERE.....
ISI CONTENT HERE.....
ISI CONTENT HERE.....

JUDUL-2

ISI CONTENT HERE.....
ISI CONTENT HERE.....
ISI CONTENT HERE.....

JUDUL-3

ISI CONTENT HERE.....
ISI CONTENT HERE.....
ISI CONTENT HERE.....

JUDUL-4

ISI CONTENT HERE.....
ISI CONTENT HERE.....
ISI CONTENT HERE.....

JUDUL-5

ISI CONTENT HERE.....
ISI CONTENT HERE.....
ISI CONTENT HERE.....

gmn gan??.. yaa, wlau kurang keren sih.wkwkkk,..
baiklah jika sobat ingin memasangnya silahkan ikuti langkah berikut:
1. Seperti biasa Login Ke Akun Blogger Anda
2. Lalu Pilih Rancangan ===> Tambah Gadget ===> HTML / Java Script
3. Lalu Copy & Paste Kode di bawah ini :

<style type="text/css">
h5 {
font-family:Monaco,Monospace !important;
font-size:15px;text-shadow:1px 2px 1px #000, 0px -1px 1px #000, 1px 1px 2px #000;
padding: 0 0 1em;
font-weight:bold;
color:#ffffff;
background: rgb(76,76,76); /* Old browsers */
background: -moz-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%);
}
.utmsgaka_list {
list-style: none;
margin: 0;color:#ffffff;
padding: 0;
width: 100%;
}
.utmsgaka_head {
padding: 4px 5px;
cursor: pointer;
position: relative;
margin:1px;
}
.utmsgaka_body {color:#000000;
font-size:14px;font-family:Monaco,Monospace !important;
padding: 5px 10px 15px;
border-bottom:1px solid #222;
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(243,243,243,1) 50%, rgba(237,237,237,1) 51%, rgba(255,255,255,1) 100%);
}
</style>
<script src='http://ut2a-4down-blogspot-com.googlecode.com/files/uttatabview.js' type='text/javascript'></script>
<div class="utmsgaka_list" id="secondpane">
<h5 class="utmsgaka_head">JUDUL-1</h5>
<div class="utmsgaka_body">
ISI CONTENT HERE.....
ISI CONTENT HERE.....
ISI CONTENT HERE.....
</div>
<h5 class="utmsgaka_head">JUDUL-2</h5>
<div class="utmsgaka_body">
ISI CONTENT HERE.....
ISI CONTENT HERE.....
ISI CONTENT HERE.....
</div>
<h5 class="utmsgaka_head">JUDUL-3</h5>
<div class="utmsgaka_body">
ISI CONTENT HERE.....
ISI CONTENT HERE.....
ISI CONTENT HERE.....
</div>
<h5 class="utmsgaka_head">JUDUL-4</h5>
<div class="utmsgaka_body">
ISI CONTENT HERE.....
ISI CONTENT HERE.....
ISI CONTENT HERE.....
</div>
<h5 class="utmsgaka_head">JUDUL-5</h5>
<div class="utmsgaka_body">
ISI CONTENT HERE.....
ISI CONTENT HERE.....
ISI CONTENT HERE.....
</div>
</div>

4.Terakhir Save, dan Lihat hasilnya.

- Silahkan Rubah sesuai keinginan masing2,yang utta ksh wrna biru.

Sobat Bisa Lihat Juga tutorial saya sebelumnya 'Tab View (Multi Tab)' disini...

Please rate this article: