Vertical Menu Accordion + Jquery

SHARE:

Vertical Menu Accordion,mungkin semua sudah pada tau,jadi saya tidak perlu di menjelaskan lagi apa fungsi dari script/Jquery ini,sayangnya s...

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.
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,

COMMENTS

Name

Albino,1,ANDROID,1,Aplikasi dan Internet,13,Asal Tau Saja,73,Asal-Tau-Saja,1,Berita Konawe,1,Blogger,1,Catatan Kopral,14,Film,2,Islam,17,Java Script / jquery,3,Kabar Sultra,1,Kendari pos,1,Kesehatan,13,Kopi Luwak,3,Lagu Nasional indonesia,1,Musik Indonesia,1,News Nyus,14,Nusantara,9,salah tempat,1,Symbian,9,Tanaman hias,4,Teknologi,16,Tips trik Internet,1,ukraina,1,Unik,56,video dan Animasi,2,
ltr
item
Kopral Blog's: Vertical Menu Accordion + Jquery
Vertical Menu Accordion + Jquery
http://1.bp.blogspot.com/_vMhpt0SPN0c/TRROYs83JnI/AAAAAAAAFXM/fWwZL3eKjTA/accordion.gif
http://1.bp.blogspot.com/_vMhpt0SPN0c/TRROYs83JnI/AAAAAAAAFXM/fWwZL3eKjTA/s72-c/accordion.gif
Kopral Blog's
http://kopral80.blogspot.com/2010/12/vertical-menu-accordion-jquery.html
http://kopral80.blogspot.com/
http://kopral80.blogspot.com/
http://kopral80.blogspot.com/2010/12/vertical-menu-accordion-jquery.html
false
8845574620345040223
UTF-8
Loaded All Posts Not found any posts + Index Baca berita... Reply Cancel reply Delete Oleh Home PAGES POSTS View All Disarankan untuk anda Kategori ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy