» » » Expandable/Collapse navigation elements

Expandable/Collapse navigation elements

Penambahan widgets pada blog memang mempercantik atau memperbagus tampilan blog kita, tetapi ada kalanya jika kita lihat blog kita, serasa sempit sekali dengan bertumpuknya widgets yang kita pasang, apalagi dengan tampilan widgets yang memanjang pada halaman sidebar kita. Nah kali ini saya akan mensadur tutorial bagaimana membuat expandable/collapse navigation elements, seperti blogger mania lihat pada sidebar ShoutMix, Blog Friends dan Recents Reader and Viewers di blog saya , kecuali pada Labels nanti akan di jelaskan pada postingan berikutnya. Mau tahu cara buatnya?



  1. Login ke blogspot, setelah blogger mania login jangan lupa backup template blog sobat, simpan file tadi di tempat aman.
  2. Kemudian sobat ke Tata Letak > Edit HTML, taruh kode di bawah ini di style sheet template blog sobat.

.commenthidden {display:none}
.commentshown {display:inline}


NB : Style Sheet > di antara kode <b:skin> ]]></b:skin> atau lebih gampangnya taruh di comments section, biasanya kodenya seperi ini :


/* Comments


----------------------------------------------- */


.commenthidden {display:none}


.commentshown {display:inline}


Taruh kode yang berwarna merah sehingga hasilnya akan seperti di atas


  1. Setelah itu taruh kode di bawah ini di antara <head> </head> tapi bukan di bagian style sheet.

<script type="text/Javascript">
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
} </script>

  1. Simpan hasil pekerjaan kita, kemudian ke Tata Letak , Copy kode ini di sidebar blogger mania, dengan cara klik Tambah Elemen Halaman pilih HTML/Javascript, setelah itu paste

<a aiotitle="click to expand" href="javascript:togglecomments('UniqueName')"
>Click Here…..[+/-]</a><br />
<div class="commenthidden" id="UniqueName">


Kode HTML/Javascript/Content


</div>

Keterangan : UniqueName isi sesuai keinginan sobat, terus taruh kode HTML/JavaScsript atau content sesuai keinginan blooger mania.


Contoh kode di blog saya untuk ShoutMix

<a aiotitle="click to expand" href="javascript:togglecomments('shoutmix')"><center>Click Here...+/-</center></a><br/><br/>


<div id="shoutmix" class="commenthidden">


<center><!-- Begin ShoutMix - http://www.shoutmix.com -->


<iframe scrolling="auto" width="200" frameborder="1" src="http://www4.shoutmix.com/?mochal1" height="400" title="mochal1">


<a href="http://www4.shoutmix.com/?mochal1">View shoutbox</a>


</iframe>


<br/><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">Free chat widget @ ShoutMix</a><br/>


<!-- End ShoutMix --></center>


</div>

Jika, masih mengalami kesulitan dengan hack ini, bisa kasih info ke saya atau kunjung di sini , beri komentar ya setelah praktek dengan tutorial ini.
Posted by at
Labels: ,

11 comments:

  1. Kuchel SandozJuly 30, 2008 at 10:06 AM

    YES.....
    Pertamax Woi....
    Mantap Fren artikelnya.
    Gue coba dulu ya.Thanks

    ReplyDelete
  2. GunJuly 30, 2008 at 10:51 AM

    akhirnya ilmunya dikeluarin juga..

    gak sia2 kemaren Jovie request..hehe
    mo nyoba akh..

    ini gak bikin Lola (loading lama) kan??

    ReplyDelete
  3. GunJuly 30, 2008 at 10:59 AM

    btw, Mas...
    top komentatornya gak di hide kan?? soalnya Jovie pasti jadi komentator paling ng'TOP niyh..hehe

    nambah lagi : tab view udah jadi (untuk sementara Jovie taro d halaman paling bawah), silahkan ke sana..udah tahu kan jalan menuju ke sana..

    ayo..ayo..lewat sin mas..yukk ikutin Jovie aja..hihikz

    ReplyDelete
  4. SubagyaJuly 30, 2008 at 2:15 PM

    @ Koechel > Selamat bung koechel anda pertamax, dapat hadiah dari saya berupa voucher menginap di sarang singa 2 hari 2 malam

    @> Jovie > Yups, ni tutorial buat Jovie, tapi ada sambungannya kalau memakai expandable ini di Labels.

    @> Jovie > ada rencana sih mau di pasang di accordian menu :))

    ReplyDelete
  5. uNieQJuly 30, 2008 at 9:34 PM

    seep deyh.. keren niyh.. dapat info lagi.,,. makasih ya??

    ReplyDelete
  6. AnonymousJuly 31, 2008 at 8:10 PM

    he..he.. satu lagi karya bu annie (kaya yang kenal).

    Makasih ya bro infonya.. thx.

    ReplyDelete
  7. AnonymousAugust 13, 2008 at 5:50 PM

    @ Uniqe > silahkan mba cc :D
    @ firdaus > yups betul salah satu karya bu annie :D

    ReplyDelete
  8. artiirhamnaJanuary 13, 2009 at 7:47 PM

    bagus, ini yang saya cari!!
    thx infonya!!

    ReplyDelete
  9. Berpikir dan Berjiwa besarApril 16, 2009 at 9:20 PM

    waa kerennnnnnn, tengs very much

    ReplyDelete
  10. velshadowMay 31, 2009 at 9:21 PM

    sep timakasih.. infonya

    http://www.cybervels.co.cc/

    ReplyDelete
  11. sinjay schoolFebruary 26, 2010 at 8:42 AM

    woke, di coba

    ReplyDelete

Subscribe to: Post Comments (Atom)