Cara Membuat Sidebar Akordion dengan JQuery di Blog | Sidebar akordion memang sangat menarik untuk di pasang di blogger, keunikannya widget-widgetnya yang muncul hanya 1, maksudnya widget paling atas muncul pertama kali saat blog di buka, widget yang ke 2 ke 3 ke 4 dan seterusnya, disembunyikan, maksudnya yang muncul hanya judul-judulnya saja, jika kurang jelas lihat gambar di bawah ini.
Sebelum mencoba artikel ini ada baiknya template sobat di back up dulu, untuk memasang sidebar akordion sobat harus mengenal ID sidebar dan ID sidebar h2 masing-masing, untuk lebih jelasnya lihatlah gambar dibawah ini :
ID #sidebar :
ID #sidebar h2 ( judul widget di sidebar ) :
- Pertama-tama masuklah ke halaman editor HTML template Anda, lalu temukan kode </head> (kode javascript ini dengan ID #sidebar-wrapper :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>Demo : http://dte-dummy.blogspot.com/
<script type='text/javascript'>
//<![CDATA[
$(function() {
// Sembunyikan semua tubuh widget (tutup semua panel)
$('#sidebar-wrapper .widget-content').hide();
// Tambahkan class 'active' pada elemen <h2> pertama
// kemudian tampilkan elemen berikutnya dengan efek .slideDown(), sehingga panel akordion paling atas akan tampak terbuka
$('#sidebar-wrapper h2:first').addClass('active').next().slideDown('slow');
// Saat elemen <h2> yang berada di dalam elemen #sidebar-wrapper diklik...
$('#sidebar-wrapper h2').click(function() {
if($(this).next().is(':hidden')) {
// Sembunyikan semua panel yang terbuka dengan efek .slideUp()
$('#sidebar-wrapper h2').removeClass('active').next().slideUp('slow');
// Lalu buka panel yang berada di bawah elemen ini (elemen <h2> yang diklik) dengan efek .slideDown()
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
//]]>
</script>
Jika mau bisa dibuka lalu ditutup lagi pakai kode ini :
<!-- Sidebar Akordion dengan JQuery dari Blog Krizeer (www.yoga-tc.blogspot.com) -->Demo : http://demo-anak-layangan.blogspot.com/
<script type='text/javascript'>
//<![CDATA[
// sidebar
$(function(){$('#sidebar-wrapper .widget-content').hide();$('#sidebar-wrapper h2:first').addClass('active').next().slideDown('slow');$('#sidebar-wrapper h2').css('cursor','pointer').click(function(){$('#sidebar-wrapper h2').removeClass('active').next().slideUp('slow');if($(this).next().is(':hidden')){$(this).addClass('active').next().slideDown('slow')}else{$(this).removeClass('active').next().slideUp('slow')}})});
//]]>
</script>
Jika di template sobat sudah memasang jQuery, jangan copy kode di atas, karena satu template hanya memasang satu jQuery, jika lebih beberapa widget tidak akan berfungsi.
Tidak berhasil?
Oke, mungkin Anda mempunyai sidebar dengan ID yang berbeda. Coba periksa kembali template Anda dan temukan baris kode yang menggambarkan deretan widget sidebar blog Anda. Kurang lebih tampilannya seperti ini:
<div id='sidebar-wrapper-2'>Atau seperti ini dengan memakai ID #sidebar
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' title='Kategori' type='Label'/>
<b:widget id='PopularPosts1' locked='false' title='Entri Populer' type='PopularPosts'/>
<b:widget id='Stats1' locked='false' title='Statistik' type='Stats'/>
<b:widget id='HTML2' locked='false' title='Komunitas' type='HTML'/>
<b:widget id='HTML4' locked='false' title='Facebook Suka' type='HTML'/>
</b:section>
</div>
<div id='sidebar'>Saya rasa artikel ini sudah cukup jelas, jika ada yang mau ditanyakan, silahkan berkomentar dibawah, klo saya tau, pasti saya jawab, klo saya gk tau saya alihkan pertanyaan sobat pada DTE. Source : DTE
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' title='Kategori' type='Label'/>
<b:widget id='PopularPosts1' locked='false' title='Entri Populer' type='PopularPosts'/>
<b:widget id='Stats1' locked='false' title='Statistik' type='Stats'/>
<b:widget id='HTML2' locked='false' title='Komunitas' type='HTML'/>
<b:widget id='HTML4' locked='false' title='Facebook Suka' type='HTML'/>
</b:section>
</div>
Awas jangan copas sembarangan, apalagi tanpa link sumber ke blog ini, bisa-bisa blog sobat di banned oleh google, karena semua artikel blog ini dilindungi oleh DMCA
Label:
jQuery,
Tutorial Blog
pada
8/16/2013
Ikut Nyimakk Gan.. :D
BalasHapusoke gan teng eh salah :o
HapusKomentar ini telah dihapus oleh pengarang.
HapusKok aku gagal terus ya kak, kira-kira kesalahannya dimana ya, mohon bantuannya ?
BalasHapuscoba pake kode ini, pastikan di template sobat sudah memakai jQuery versi terbaru :
Hapus<!-- Sidebar Akordion dengan JQuery dari Blog Krizeer (www.yoga-tc.blogspot.com) -->
<script type='text/javascript'>
//<![CDATA[
// sidebar
$(function(){$('#kanan .widget-content').hide();$('.sidebar h5:first').addClass('active').next().slideDown('slow');$('.sidebar h5').css('cursor','pointer').click(function(){$('.sidebar h5').removeClass('active').next().slideUp('slow');if($(this).next().is(':hidden')){$(this).addClass('active').next().slideDown('slow')}else{$(this).removeClass('active').next().slideUp('slow')}})});
//]]>
</script>
oke sob, tapi koment baliknya besok ya, sekarang saya lagi pusing mikirin, comments author yg agak error sedikit ;(( ada solusinya gk ? :-s
BalasHapushttp://i.imgur.com/BNPlEOC.png
alhamdulilah akhirnya nemu juga solusinya, masalahnya upload kembali gambarnya, hehe :-s
BalasHapusdulu pernah coba ini gan :D keren banget si..
BalasHapushaha, iya sih lumayan, tapi buat HTML tanpa judul tidak akan muncul widgetnya :) solusinya buat 2 sidebar, #sidebar-wrapper dan #sidebar-wrapper2 :-#
Hapusowh gitu ya gan.. ribet juga si..
Hapuslumayan lahh :-s tapi hasilnya top (h)
HapusNice Share Sob
BalasHapushttp://gilang-cyber4rt.blogspot.com/2013/08/widget-krizeer.html
oke sob, akan ku lihat :>)
Hapuscara pasang emot d bok komentar gimana ya..
BalasHapusdipelajari disini nih : http://blog.kangismet.net/2013/05/membuat-judul-pada-pesan-formulir-kommentar.html
HapusWah keren gan..Rinci Banget code code nya..
BalasHapusVisit Back ..http://www.center60.com/
makasih sob, saya akan kunjungi blog sobat setelat selesai memasang infox ya, soalnya mau ada perubahan sedikit pada tampilan homepage, hehe x-)
Hapusakhirnya selesai juga tampilan baru di postingan :-s
HapusSaya juga sempet mau pasang ini, soalnya masih bingung modifikasi jsnya. Sya mau pasang ini pada beberapa widget saja, tapi nice share sob. :D
BalasHapussama-sama sob, tapi klo masalah Javascript saya cuman ngerti 10%, hehe cuman bisa ganti ID dan Class yang ada di Javascript itu doang :-s
Hapussaya juga sama sob, cuman ngerti dikit kalau masalah JS. :D
Hapushaha, harus banyak belajar dari DTE yahh :-)
HapusBner tuh harus banyak belajar dari DTE, dewanya masalah kayak ginian. :-d
Hapustapi saat saya belajar di DTE, banyak kode-kode yang tidak saya mengerti, jadi saya menyimak saja komentar dari postingannya, hehe :D
Hapusbener gan.
HapusSaran : gan tanggal icon infoxnya gk nyambung, coba ganti dg ini. Biar mantep. :)
.infox:hover .d-header{ background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAVtJREFUKJGVkDFrFFEUhb87M/sei6YRwSDY2oRokUawUxCxsDD/IX9BUMtUYv6ApYK9ta12FiJsI2ijblIljWb33nkzx8Igw8SNeLp37vle8cEgkjIrMpvN0qobEfHd3d+Oe3d/7+5fhl0jqY6Id8AnSZfN7Ke7vwGuA5jZB0mXgItt277o+/5qSummRcTmZDL5GBGHwB5QAY/qup4CdF23AJ4Cx8DDlNKFtm2vEREb+s9ExEYDpIg4AnbM7PxKAb/l/QCem1kiIrbcfX4WMBI1j4it5kTA0OwusC3plaRDM9sBXuacnw23zfjHlNKT5XL5raqqOznnBxFxV9K58e4UWEq53ff9/ZTSvZPqs5lt/hPsuu6xma1HxJ6kI0k3gNenwFJKVdf1nyLnfGu02R0+JNF1XdUA+8Cau8+Hkv4WSQBrwL4BLBaLK5LWm6bpzwJLKZWZHUyn06+/AJMu26P2Y5ymAAAAAElFTkSuQmCC"); background-position:0 50%; background-repeat:no-repeat }
baru sadar nih, wkwkwkwkk gk nyambung ya ?, saking kecilnya tuh gambar saya belum sempet cek, yang ada dipikiran saya cuman berhasil doang tutorialnya, haha, makasih sob udah bantu :)
Hapussama-sama sob.
Hapuskalo kutak katik Jquery..saya angkat tangan dech :-)
BalasHapussaya juga dapatkan kode Javascriptnya dari DTE,hehe saya juga angkat tangan sob :-s
HapusSip gan, di simak untuk plajaran
BalasHapussilahkan disimak dan dipelajari gan, itung-itung latihan saya juga harus banyak latihan lagi, hehe :)
HapusIjin nyoba dulu sob madereastu.blogspot.com
BalasHapussilahkan sob :)
HapusWaow... Nice Tutorial Izin Nyoba ya... :)
BalasHapusComment Back: http://bleaz3ers-id.blogspot.com
silahkan sob, koment meluncur :>)
HapusMas .. Boleh Minta kode yang sorot Informasi langsung muncul Poskan oleh , komentar , dan labelnya gak? (htmlnya,js) kalo css nya udah ada .. :) Izin dlu ya .. mau ubah tampilan lagi , hehe :)
BalasHapusdari pertama kali saya pake info di homepage, pasti ada yang menanyakannya sama saya, ehh bener ada nih simpan HTML ini tepat di atas kode HTML gambar, atau HTML judul postingan, maaf klo ngawur, hehe :-s
Hapus<!-- Infox dari Blog Krizeer (www.yoga-tc.blogspot.com) -->
<b:if cond='data:blog.pageType != "static_page"'>
<div class='infox'>
<div class='post-author vcard'>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn'>
<a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='Admin'>
<data:post.author/>
</a>
</span>
<b:else/>
<span class='fn'><data:post.author/></span>
</b:if>
</div>
<div class='d-header'><span class='timestamp-link'><abbr class='published updated' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></span></div>
<div class='d-kmtr'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a></div>
</div>
<!-- Infox dari Blog Krizeer (www.yoga-tc.blogspot.com) Selesai -->
<i rel="pre">
Hapus<a class='d-kmtr' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:post.commentLabelFull/>
</a></i> kode mu berbeda jauh dengan ku . . aku boleh cekidot dari template lama :P http://mafia-darktheme.blogspot.com/ tapi thanks ya :D
sama-sama sob :D
Hapussilahkan de :)
BalasHapusinteresting articles and commentaries friend, I became interested in reading, I introduce a new blogger from Indonesia origin. greetings
BalasHapusMas jika saya menerapkan cara ini untuk bagian halaman home saja alias sidebar dibagian beranda apa saya perlu menambah tag kondisional? dan kira2 penerapanya seperti apa ya?
BalasHapusYou should discuss the competition comparison of the web log. you'll highlight it's remarkable. Your web log exploration/tour can broaden your conversions. agenibcbet.us
BalasHapus