Vertical Menu Accordion + Jquery

Vertical Menu Accordion,mungkin semua sudah pada tau,jadi saya tidak perlu di menjelaskan lagi apa fungsi dari script/Jquery ini,sayangnya script ini tidak bisa dijalankan secara sempurna pada Blog kopral ini dikarenakan tuntutan template yang sudah demikian adanya.

dan oleh karena hal itu saya memutuskan untuk melakukan pergantian template suatu waktu jika template yang saya inginkan sudah selesai dan siap dipergunakan.

untuk melihat demo vertical menu accordion,silahkan melihat pada blog yang saya fungsikan sebagai blog uji coba disini atau disini,

dan jika ingin melihat vertical menu accordion yang sederhana saja,silahkan melihat pada bagian sidebar blog ini yang widgetnya saya beri title kopral'opedia.

vertical menu accordion saya anggap adalah script/jquery terbaik buat blogspot,disamping karena fungsinya yang dapat menyembunyikan link label atau arsip vertical menu accordion juga memiliki effect yang sangat bagus

.bagi anda yang mungkin terlalu banyak menggunakan scrollbar 'abu abu monyet' pada blog mungkin script/jquery ini bisa menjadi alternatif lain untuk mencegah melorotnya sidebar dikarenakan Link yang nenumpuk

bagaimana membuatnya ? pada awalnya saya pribadi sempat mikir,apa iya bisa untuk blog ? tapi stelah belajar kesana kemari akhirnya jawabannya bisa dan sangat bisa oya..

jika anda ingin mempergunakan script vertical menu accordion ini dalam bentuk dan warna lain,mungin beberapa web dan blog ini bisa menjadi pihan anda.

• http://jqueryui.com


• http://blog.evaria.com/browse


• http://www.dynamicdrive.com


• http://www.scriptocean.com


• dan masih banyak lagi...Klik aja

Akan tetapi jika anda tidak cukup mempunyai pemahaman akan bahasa lain diluar bahasa indonesia saya sarankan agar anda  merujuk ke  Blog ini   Blog sang master,disana jquery ini tersedia dan dijelaskan secara detail dan scriptnya tinggal ada copy paste,bahkan disana jauh lebih bervariasi dibanding yang ada diblog ini.



Sebelum memulainya sekali lagi saya ingin menyampaikan,bahwasanya tutorial berikut dibuat bukan untuk menggurui siapa siapa,sebab saya juga bukan siapa siapa,tutorial jquery menu accordion ini dibuat tak lebih dan tak kurang cuma sebagai catatan pribadi yang coba saya bukukan secara online dan tentunya dengan mempergunakan gaya bahasa 'newbie' yang lebih mudah dimengerti oleh orang seperti saya.

tutorial vertical menu accordion ini dibuat setelah terlebih dahulu melihat, membaca dan belajar dari beberapa web/blog 'sang master' yang oleh saya kemudian dpraktekkan dan alhamdulillah berhasil.



okey.. karena basa basinya sudah cukup panjang baiknya kita langsung memulai saja bagaimana langkah langkah yang harus kita pergunakan agar jQuery cantik plus multifungsi ini dapat terbenam pada Blog tercinta kita.



Jquery menu accordion sederhana bin alakadarnya

langkah awal untuk menggunakan Jquery menu accordion sedrhana seperti yang ada pada Blog ini caranya benar benar simple,dan pemasangannya tidak harus menyentuh HTML editor.cukup Login ke Blog anda ,dan setelah berada pada Dashboard > Elemen halaman,Langsung lakukan Penambahan Widget Html / Java Script.

setelah terbuka Copy lalu Pastekan script berikut

<script type="text/javascript" src="http://shup.com/Shup/447387/jquery.js"></script>

<script type="text/javascript" src="http://shup.com/Shup/447586/accordion.js"></script>

<script type="text/javascript">

jQuery().ready(function(){  

    // applying the settings

    jQuery('#theMenu').Accordion({

        active: 'h3.selected',

        header: 'h3.head',

        alwaysOpen: false,

        animated: true,

        showSpeed: 800,

        hideSpeed: 800,

    });

});  

</script>



        <ul id="theMenu">

            <li>

                <h3 class="head"><a href="javascript:;">MENU-1</a></h3>

                <ul>

                    <<li><a href="http://link-anda.com">title link anda</a></li>

                    <<li><a href="http://link-anda.com">title link anda</a></li>

                    <<li><a href="http://link-anda.com">title link anda</a></li>

                    <<li><a href="http://link-anda.com">title link anda</a></li>

                    <<li><a href="http://link-anda.com">title link anda</a></li>

                </ul>

            </li>





            <li>

                <h3 class="head"><a href="javascript:;">MENU-2</a></h3>

                <ul>

                    <<li><a href="http://link-anda.com">title link anda</a></li>

                    <<li><a href="http://link-anda.com">title link anda</a></li>

                    <<li><a href="http://link-anda.com">title link anda</a></li>

                    <<li><a href="http://link-anda.com">title link anda</a></li>

                    <<li><a href="http://link-anda.com">title link anda</a></li>

                </ul>

            </li>



            <li>

                <h3 class="head"><a href="javascript:;">MENU-3</a></h3>

                <ul>

                    <<li><a href="http://link-anda.com">title link anda</a></li>

                    <<li><a href="http://link-anda.com">title link anda</a></li>

                    <<li><a href="http://link-anda.com">title link anda</a></li>

                    <<li><a href="http://link-anda.com">title link anda</a></li>

                    <<li><a href="http://link-anda.com">title link anda</a></li>

                </ul>

            </li>



            <li>

                <h3 class="head"><a href="javascript:;">MENU-4</a></h3>

                <ul>

                    <<li><a href="http://link-anda.com">title link anda</a></li>

                    <<li><a href="http://link-anda.com">title link anda</a></li>

                    <<li><a href="http://link-anda.com">title link anda</a></li>

                    <<li><a href="http://link-anda.com">title link anda</a></li>

                    <<li><a href="http://link-anda.com">title link anda</a></li>

                </ul>

            </li>



            <li>

                <h3 class="head"><a href="javascript:;">MENU-5</a></h3>

                <ul>

                    <<li><a href="http://link-anda.com">title link anda</a></li>

                    <<li><a href="http://link-anda.com">title link anda</a></li>

                    <<li><a href="http://link-anda.com">title link anda</a></li>

                    <<li><a href="http://link-anda.com">title link anda</a></li>

                    <<li><a href="http://link-anda.com">title link anda</a></li>

                </ul>

            </li>



          

        </ul></div></div>

Sebelum anda save/simpan Silahkan lakukan pergantian Nama MENU, Link/url,dan beberapa atribut ( perhatikan warna ) sesuai dengan kebutuhan blog anda.

jangan lupa untuk kedua URL script /jquery yang tersedia, anda download lalu upload ke webhost/file host kesukaan anda.

cuma untuk mengingatkan :

Mari bersama kita hindari penggunaan  url sebuah file secara berjama'ah untuk menghindari error massal.



Lanjut ke Vertical menu Accordion yang kedua yang demonya anda dapat lihat disini.

untuk Vertical menu Accordion yang berikut kita sedikit harus bekerja lebih,dikarenakan hasil yang kita dapat juga tentu akan  lebih baik,baik dari sekedar fungsi maupun penampilan.dan saya yakin siapapun anda yang menggunakan Blogspot,baik pemula apalagi yang sudah berkarat didunia Bloggingnya blogspot anda tidak akan menemui kesusahan untuk itu memasang Vertical menu Accordion tersebut

Tinggal copy lalu Paste, atur sesuai selera kemudian save pasti jadi.

berhubung artikel ini sudah terlalu panjang dan jika saya tambahkan pasti akan menjadi 3 x lebih panjang maka  untuk menyingkatnya silahkan download file berikut.semua tinggal pakai,lengkap plus aturan penggunaannya.

download disini

Semoga Bermanfaat,