GO Blog

Apa fungsi menu accordion?

Salah satu fungsi dari accordion menu selain memperingkas tampilan widget yang ada di sidebar blog, juga dapat memperbagus blog anda, sama seperti pada fungsi menu tabber atau tab view, hanya saja gaya satau stylenya yang berbeda. jadi blog Anda akan kelihatan lebih ringkas dan rapi. Tutorial ini sudah saya buat sebelumnya, sekarang saya hanya berbagi cara membuat menu accordion ini menggunakan jQuery. Anda bisa menempatkan menu accordion ini pada sidebar blog anda tentunya untuk memperingkas tatanan widget.

jika ingin melihat hasil menu accordion ini bisa di lihat di demo berikut

 
Cara menginstal menu accordion:

Login ke Blogger dengan akun Anda
Masuk ke template, Edit HTML

pastikn template anda sudah terpasang

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

Kemudian masukkan kode berikut css ini dan letakkan di atas kode </style>:

/* menu accordion by dafin */
#db-tab-acor {
 width:100%; /* lebar menu */
 margin:10px auto;
 border:2px solid #ccc;
 -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
 -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
 box-shadow:0px 1px 3px rgba(0,0,0,0.4);
}

#db-tab-acor h2 {
 cursor:pointer;
 margin:0px 0px;
 padding:8px 10px;
 background-color:#333;
 font:bold 14px coda;
 color:#e6e6e6;
 text-shadow:0px 1px 0px rgba(0,0,0,0.4);
 border-top:2px solid #bbb;
 background-image: url(http://1.bp.blogspot.com/-qtI_UsPdZwc/Tmzg5K8eADI/AAAAAAAABrU/ScrT9X8fBBY/s1600/arrow_right.gif);background-repeat: no-repeat;background-position: right center;
}

#db-tab-acor .tab-view {
 background-color:#f1f1f1;
 padding:10px;
 color:black;
 height:120px;/* sesuaikan atau bisa di ubah menjadi auto */    
}

#db-tab-acor h2.show {
 background-image: url(http://2.bp.blogspot.com/-9If6SXYDklM/Tmzg4W8YwuI/AAAAAAAABrQ/XlCiTeVqtq0/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;
 background-color:#369;
 color:#ccc;
}

Sekarang cari sidebar blog anda, kurang lebih kodenya seperti berikut:

<aside id="sidebar-wrapper">
    <b:section class="sidebar" id="sidebar" preferred="yes">
        <b:widget id="Label1" locked="false" title="Kategori" type="Label">
    </b:widget></b:section>
</aside>

tambahkan kode menunya sehingga nampak seperti berikut

<aside id="sidebar-wrapper">
<!-- start menu -->
<div id="db-tab-acor">
<h2>
MENU 1</h2>
<div class="tab-view">
... tempat widget ...
    </div>
<h2>
MENU 2</h2>
<div class="tab-view">
... tempat widget ...
    </div>
<h2>
MENU 3</h2>
<div class="tab-view">
... tempat widget ...
    </div>
<h2>
MENU 4</h2>
<div class="tab-view">
... tempat widget ...
    </div>
</div>
<!-- end menu -->
    <b:section class="sidebar" id="sidebar" preferred="yes">
        <b:widget id="Label1" locked="false" title="Kategori" type="Label">
    </b:widget></b:section>
</aside>

Untuk cara di atas, widget anda tidak ikut masuk dalam menu jadi tidak akan masuk dalam fungsi menu accordion. jika anda ingin widget anda ada dalam menu silahkan buat seperti berikut

<aside id="sidebar-wrapper">
<!-- start menu -->
<div id="db-tab-acor">
<h2>
MENU 1</h2>
<div class="tab-view">
<b:section class="sidebar" id="sidebar1" preferred="yes">
        <b:widget id="Label1" locked="false" title="Kategori" type="Label">
      </b:widget></b:section>
    </div>
<h2>
MENU 2</h2>
<div class="tab-view">
<b:section class="sidebar" id="sidebar2" preferred="yes">
        <b:widget id="HTML5" locked="false" title="Kopi" type="Label">
      </b:widget></b:section>
    </div>
<h2>
MENU 3</h2>
<div class="tab-view">
<b:section class="sidebar" id="sidebar3" preferred="yes">
        <b:widget id="PopularPosts1" locked="false" title="Entri Populer" type="PopularPosts">
      </b:widget></b:section>
    </div>
<h2>
MENU 4</h2>
<div class="tab-view">
<b:section class="sidebar" id="sidebar4" preferred="yes">
        <b:widget id="HTML4" locked="false" title="Donat" type="HTML">
      </b:widget></b:section>
    </div>
</div>
<!-- end menu -->
</aside>

ingat di atas hanya untuk contoh saja, jadi sesuaikan dengan widget anda sendiri.

Anda bisa menambah jumlah menu accordion ini sesuai kebutuhan dengan membuat kode seperti di bawah ini

<h2>MENU 5</h2>
<div class="tab-view">
<b:section class="sidebar" id="sidebar" preferred="yes">
  <b:widget id="HTML8" locked="false" title="Dodol" type="HTML">
</b:widget>
</b:section>
</div>

tambahkan sampai berapa pun anda mau. untuk contoh sya buatkan saja berikut:

<!-- start menu -->
<div id="db-tab-acor">
<h2>
MENU 1</h2>
<div class="tab-view">
<b:section class="sidebar" id="sidebar1" preferred="yes">
    </b:section></div>
<h2>
MENU 2</h2>
<div class="tab-view">
<b:section class="sidebar" id="sidebar2" preferred="yes"/>
</div>
<h2>
MENU 3</h2>
<div class="tab-view">
<b:section class="sidebar" id="sidebar3" preferred="yes"/>
</div>
<h2>
MENU 4</h2>
<div class="tab-view">
<b:section class="sidebar" id="sidebar4" preferred="yes"/>
</div>
<h2>
MENU 5</h2>
<div class="tab-view">
<b:section class="sidebar" id="sidebar5" preferred="yes"/>
</div>
<h2>
MENU 6</h2>
<div class="tab-view">
<b:section class="sidebar" id="sidebar6" preferred="yes"/>
</div>
</div>
<!-- end menu -->

Jangan lupa ubah MENU 1, 2, 3, dst sesuai judul widget anda atau judul content yang ada di menu.

Setelah selesai langkah di atas, tambahkan kode berikut di atas kode

<script type="text/javascript">
//<![CDATA[
$(function() {
    $('#db-tab-acor .tab-view').hide();
    $('#db-tab-acor h2:first').addClass('show').next().slideDown('slow');
    $('#db-tab-acor h2').click(function() {
        if($(this).next().is(':hidden')) {
            $('#db-tab-acor h2').removeClass('show').next().slideUp('slow');
            $(this).toggleClass('show').next().slideDown('slow');
        }
    });
});
//]]>
</script>

Langkah akhir silahkan simpan template anda dan lihat hasilnya.

ingin lebih menarik bisa silahkan di buka langsung editornya


Sekian saja tentang membuat menu accordion dengan jQuery semoga sukses...