November 21, 2010 Blog Lebih Keren , JQuery , Page , Tab View , Widget

TAB VIEW MENU DENGAN EFEK DROP DOWN

Lihat Contoh "Menu Tabview dengan Efek Dropdown" 1. Sign In Di Blogger 2. Klik Menu Rancangan 3. Klik Menu Edit HTML 4. Cari K...

Lihat Contoh "Menu Tabview dengan Efek Dropdown"

1. Sign In Di Blogger
2. Klik Menu Rancangan
3. Klik Menu Edit HTML
4. Cari Kode </head> dan Pastekan Kode di Bawah Ini di Atas Kode </head>

<script type='text/javascript'>
$(document).ready(function() {
$('.acc_container').hide(); //Hide/close all containers
$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container

//On Click
$('.acc_trigger').click(function(){
    if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
        $('.acc_trigger').removeClass('active').next().slideUp(); //Remove all "active" state and slide up the immediate next container
        $(this).toggleClass('active').next().slideDown(); //Add "active" state to clicked trigger and slide down the immediate next container
    }
    return false; //Prevent the browser jump to the link anchor
});

});
</script>

5. Klik Simpan Template
6. Cari Kode <head> dan Pastekan Kode di Bawah Ini di Atas Kode <head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>

7. Klik Simpan Template

8. Cari Kode ]]></b:skin> dan Pastekan Kode di Bawah Ini di Atas Kode ]]></b:skin>

h2.acc_trigger {
    padding: 0;    margin: 0 0 5px 0;
    background: url(h2_trigger_a.gif) no-repeat;
    height: 46px;    line-height: 46px;
    width: 500px;
    font-size: 2em;
    font-weight: normal;
    float: left;
}
h2.acc_trigger a {
    color: #fff;
    text-decoration: none;
    display: block;
    padding: 0 0 0 50px;
}
h2.acc_trigger a:hover {
    color: #ccc;
}
h2.active {background-position: left bottom;}
.acc_container {
    margin: 0 0 5px; padding: 0;
    overflow: hidden;
    font-size: 1.2em;
    width: 500px;
    clear: both;
    background: #f0f0f0;
    border: 1px solid #d6d6d6;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}
.acc_container .block {
    padding: 20px;
}

9. Klik Simpan Template

10. Klik Menu Rancangan

11. Klik Menu Tambah Gadget

12. Klik Menu HTML Java/Script

13. dan Copy dan Pastekan Script di Bawah Ini di HTML Java/Scriptmu:

<h2 class="acc_trigger"><a href="#">Tab Dropdown</a></h2>
<div class="acc_container"></div>

<h2 class="acc_trigger"><a href="#">Dropdown Tab 1</a></h2>
<div class="acc_container">
    <div class="block">
Tulisanmu Untuk Tab 1
    </div>
</div>
<h2 class="acc_trigger"><a href="#">Dropdown Tab 2</a></h2>
<div class="acc_container">
    <div class="block">
Tulisanmu Untuk Tab 2
    </div>
</div>
<h2 class="acc_trigger"><a href="#">Dropdown Tab 3</a></h2>
<div class="acc_container">
    <div class="block">
Tulisanmu Untuk Tab 3
    </div>
</div>