--

Thursday, 15 December 2011

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 MUSKAAN at 07:47

0 comments:

Post a Comment