Oct 20, 2011
Animasi Tab View Dengan JQuery
Untuk membuatnya ikuti langkah berikut :
1. Loggin ke Blogger
2. Menuju Rancangan
3. Tambah Gadget >>> HTML/JavaScript
4. Kita buat skenarionya seperti ini
<div class='tabbed_content'> <div class='tabs'> <div class='moving_bg'> </div> <span class='tab_item'>Tab 1</span> <span class='tab_item'>Tab 2</span> <span class='tab_item'>Tab 3</span> <span class='tab_item'>Tab 4</span> </div> <div class='slide_content'> <div class='tabslider'> <ul> <li> Masukan Isi Tab 1 </li> </ul> <ul> <li> Masukan Isi Tab 2 </li> </ul> <ul> <li> Masukan Isi Tab 3 </li> </ul> <ul> <li> Masukan Isi Tab 4 </li> </ul> </div> </div> </div>5. Simpan
6. Klik Edit HTML dan masukan kode css ini diatas ]]></b:skin>
.tabbed_content {
background-color: #000000;
width: 620px;
}
.tabs {
height: 62px;
position: relative;
}
.tabs .moving_bg {
padding: 15px;
background-color:#7F822A;
background-image:url(../images/arrow_down_green.gif);
position: absolute;
width: 125px;
z-index: 190;
left: 0;
padding-bottom: 29px;
background-position: bottom left;
background-repeat: no-repeat;
}
.tabs .tab_item {
display: block;
float: left;
padding: 15px;
width: 125px;
color: #ffffff;
text-align: center;
z-index: 200;
position: relative;
cursor: pointer;
}
.tabbed_content .slide_content {
overflow: hidden;
background-color: #000000;
padding: 20px 0 20px 20px;
position: relative;
width: 600px;
}
.tabslider {
width: 5000px;
}
.tabslider ul {
float: left;
width: 560px;
margin: 0px;
padding: 0px;
margin-right: 40px;
}
.tabslider ul a {
color: #ffffff;
text-decoration: none;
}
.tabslider ul a:hover {
color: #aaaaaa;
}
.tabslider ul li {
padding-bottom: 7px;
}
7. Masukan JQuerynya sebelum</head><script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script> <script src='tabbedContent.js' type='text/javascript'></script>8. Simpan Template dan lihat hasilnya.
Source code :
http://www.gayadesign.com/scripts/tabbed/tabbedContent.zip
Silahkan download supaya dapat mengikuti tutorial ini.
Catatan Kaki :
[1] Slick Tab View
0 komentar:
Post a Comment