Slider[Style1]

Style2

Style3[OneLeft]

Style3[OneRight]

Style4

Style5

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.


About Subagya

Hello readers, im Guruh Subagya, i'm start blogging at 2008, i'm person who interest with technology, blogger, and others stuff related to internet marketing. Hope you enjoy with my post information. Happy Blogging
«
Next
Newer Post
»
Previous
Older Post

11 comments:

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

    ReplyDelete
  2. akhirnya ilmunya dikeluarin juga..

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

    ini gak bikin Lola (loading lama) kan??

    ReplyDelete
  3. 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. @ 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. seep deyh.. keren niyh.. dapat info lagi.,,. makasih ya??

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

    Makasih ya bro infonya.. thx.

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

    ReplyDelete
  8. bagus, ini yang saya cari!!
    thx infonya!!

    ReplyDelete
  9. sep timakasih.. infonya

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

    ReplyDelete


Top