Tab View Slider (Tanpa di Click)
Jadi begini sobat semua.. (Khususnya sobat EGE, sebagai pemohon post ini).
Jd intinya seh, tab view slider ini sama dg tab view biasa..
Hanya saja penggunaanya tanpa sobat click cursor untuk membuka isi tab.. cukup letakan pointer sobat diatas nama tab masing2..
Untuk lebih jelasnya sobat bisa lihat bemonya (demonya mksd ane.. hehehe..) :
Demo Tab View SliderKlik disini untuk melihat demo Tab View Slider
Gimana ???
Begitu sobat letakan pointer sobat diatas tab nya, Isi dari menu tab terslide/terbuka dg sendirinya bukan??
Nah sekarang Langsung saja..
Langkah-langkahnya :
1. Seperti biasa login dulu ke blogger.com
2. Cari menu LAYOUT ->> Edit HTML, centang kotak kecil disamping teks Expand Template Widget
3. Cari kode ]]></b:skin>
Dan ganti dengan kode berikut :
bodie {
font-family:arial;
font-size:12px;
}
a {
color:#333;
text-decoration:none;
display:block;
}
a:hover {
color:#888;
text-decoration:none;
}
#moving_tab {
/* hide overlength child elements*/
overflow:hidden;
/* all the child elements are refering to this width */
width:300px;
/* fix ie 6 overflow bug */
position:relative
/* styling */
border:1px solid #ccc;
margin:0 auto;
}
#moving_tab .tabs {
/* enable absolute position for .lava */
position:relative;
height:30px;
/* styling */
padding-top:5px;
cursor:default;
}
#moving_tab .tabs .item {
/* enable z-index */
position:relative;
z-index:10;
/* display in one row */
float:left;
display:block;
/* width = half size of #moving_tab */
width:150px;
/* height = height of .tabs */
text-align:center;
font-size:14px;
font-weight:700;
}
#moving_tab .tabs .lava {
/* Set it to absolute */
position:absolute;
top:0; left:0;
/* display the lava in bottom most layer */
z-index:0;
/* width = half size of #moving_tab */
width:150px;
/* height = height of .tabs */
height:30px;
/* styling */
background:#abe3eb;
}
#moving_tab .content {
/* enable absolute position for .panel */
position:relative;
overflow:hidden;
/* styling */
background:#abe3eb;
border-top:1px solid #d9fafa;
}
#moving_tab .panel {
/* width is width of #moving_tab times 2 */
position:relative;
width:600px;
}
#moving_tab .panel ul {
/* display in one row */
float:left;
/* width is the same with #moving_tab */
width:300px;
/* remove all styles */
padding:0;
margin:0;
list-style:none;
}
/* styling */
#moving_tab .panel ul li {
padding:5px 0 5px 10px;
border-bottom:1px dotted #fff;
}
]]></b:skin>
4. Cari kode </head>
Dan ganti dg kode berikut :
$(document).ready(function () {
//set the default location (fix ie 6 issue)
$('.lava').css({left:$('span.item:first').position()['left']});
$('.item').mouseover(function () {
//scroll the lava to current item position
$('.lava').stop().animate({left:$(this).position()['left']}, {duration:200});
//scroll the panel to the correct content
$('.panel').stop().animate({left:$(this).position()['left'] * (-2)}, {duration:200});
});
});
</head>
Perlu di ingat, Kode no 4 ini merupakan file.js dari tab slider ini.
dan kita sudah membahas bagai mana memasang file.js di template qita pada postingan saya waktu itu DISINI.
5. Layout --> Page Elements
Pilih tempat yang kamu inginkan kemudian Add a Gadget
pilih HTML/JavaScipt dan taruh code dibawah didalamnya
<div id="moving_tab">
<div class="tabs">
<div class="lava">
</div>
<span class="item">Tab 01</span>
<span class="item">Tab 02</span>
</div>
<div class="content">
<div class="panel">
<ul>
<li><a href='#'>Isi Tab 1</a></li>
<li><a href='#'>Isi Tab 1</a></li>
<li><a href='#'>Isi Tab 1</a></li>
<li><a href='#'>Isi Tab 1</a></li>
<li><a href='#'>Isi Tab 1</a></li>
</ul>
<ul>
<li><a href='#'>Isi Tab 2</a></li>
<li><a href='#'>Isi Tab 2</a></li>
<li><a href='#'>Isi Tab 2</a></li>
<li><a href='#'>Isi Tab 2</a></li>
<li><a href='#'>Isi Tab 2</a></li>
</ul>
</div>
</div>
</div>
Isikan link dan nama link sesuai keinginan sobat semua..
Selesai..
Source Code Tab View SliderKlik disini untuk mengambil semua source code Tab View Slider
Semoga bermanfaat..
Posted by Girant_31
on 07.00. Filed under
jQuery,
Tips n Trik
.
You can follow any responses to this entry through the RSS 2.0.
Feel free to leave a response
@~Srex~ Monggo mas..
Semoga berhasil ya mas..
penjelasan pangan lebar ini tetap tidak membuat gue mengerti
*bego dot com*
@disatia febri Pasti bingung..
Ane az bingung.. wkwkwkwk...
gak mudeng aku kawan
aku pelajari lagi sob
Met pagi mas...wah bnyak bener y code na mas...thnxs info na..sukses slalu y mas
takut mau nyoba2 lagi... :D
utak-atik template :D
wuhhh banyak banget kodenya, klo suruh nyari di edit html aku sering ga ketemu.pusing duluan heheh
panjang bgt scriptnya hehehe
bagus ^__^
kalau mau lihat demo masak dimana ya ... kebetulan nih baru dapat colongan dendeng .... huehhehe ...
tips nya disimpan dulu aja ... sekarang lagi malas otak otik otak css/html
request tips juga dun, gimana cara bikin text area biar gag isi scroll, gambar, trus gag terlalu panjang ke samping ampe menuhin sepanjang blog.?
@Pak Liek Ke dapur tetangga pak liek hehehe..
Wah, tar aku pelajari dulu nih, panjang bgt sob kode nya...
ada nggak tips spy blog cepat terbuka...?
@Science Box ya begitulah mas.. hehe..
saya nyoba ah :)