Expandable/Collapse for Labels
Sebelumnya saya sudah memposting mengenai expandable/collapse navigation elements, silakan membaca artikel tersebut bagi yang belum membacanya. Jika sudah membacanya, bisa kita lanjutkan ke tutorial baru yaitu expandable/collapse for labels, tutorial ini juga atas permintaan teman blogger baru saya yaitu Jovie. Kalau mau lihat contoh blogger hack ini bisa blogger mania lihat di blog ini di sidebar samping kanan dengan title Labels, kalau di Click Here…..+/- akan keluar labels blog sobat. Prinsipnya hampir sama dengan cara membuat expandable/collapse navigation elements, hanya ada sedikit tambahan yang menurut saya tidak terlalu rumit. Mau tahu cara buatnya?
- Login ke blogspot, setelah blogger mania login jangan lupa backup template blog sobat, simpan file tadi di tempat aman.
- Kemudian sobat ke Tata Letak > Edit HTML, taruh kode di bawah ini di style sheet template blog sobat.
.commenthidden {display:none}
.commentshown {display:inline}
.commentshown {display:inline}
NB : Style Sheet > di antara kode <b:skin> ]]></b:skin> atau lebih gampangnya taruh di comments section, biasanya kodenya seperti ini :
/* Comments
----------------------------------------------- */
.commenthidden {display:none}
.commentshown {display:inline}
Taruh kode yang berawarna merah sehingga hasilnya akan seperti di atas
- 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>
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
} </script>
NB : Jika sobat sudah menggunakan blogger hack expandable/collapse navigation elements di blog sobat, tidak perlu lagi menaruh kode-kode yang saya jelaskan di atas atau abaikan saja dan bisa loncat ke langkah selanjutnya, tetapi jika belum silakan ikuti langkah-langkah diatas.
- Kemudian ke Tata Letak > add page elements pilih tambahkan Labels, terus simpan, setelah selesai di simpan, buka browser baru (usahakan pakai browser firefox versi terbaru> kemudian isikan alamat blog sobat, setelah loading halaman selesai, klik kanan mouse sobat di area halaman blog di mana saja, pilih view page source, setelah terbuka view sourcenya cari kode seperti di bawah ini
<div class='widget-content'>
NB : Cari yang mirip seperti kode di bawah, saya contohkan kode dalam halaman blog saya
<div class='widget-content'>
<ul>
<li>
<a dir='ltr' href='http://subagya.blogspot.com/search/label/Blogger%20Hack'>
Blogger Hack
</a>
<span dir='ltr'>(4)</span>
</li>
<li>
<a dir='ltr' href='http://subagya.blogspot.com/search/label/Blogger%20Trik'>
Blogger Trik
</a>
<span dir='ltr'>(3)</span>
</li>
<li>
<a dir='ltr' href='http://subagya.blogspot.com/search/label/Free%20download'>
Free download
</a>
<span dir='ltr'>(1)</span>
</li>
<li>
<a dir='ltr' href='http://subagya.blogspot.com/search/label/Humanities'>
Humanities
</a>
<span dir='ltr'>(1)</span>
</li>
<li>
<a dir='ltr' href='http://subagya.blogspot.com/search/label/Personal'>
Personal
</a>
<span dir='ltr'>(4)</span>
</li>
<li>
<a dir='ltr' href='http://subagya.blogspot.com/search/label/Serba-serbi'>
Serba-serbi
</a>
<span dir='ltr'>(1)</span>
</li>
<li>
<a dir='ltr' href='http://subagya.blogspot.com/search/label/Tips%20Komputer'>
Tips Komputer
</a>
<span dir='ltr'>(1)</span>
</li>
<li>
<a dir='ltr' href='http://subagya.blogspot.com/search/label/Tips%20Sehat'>
Tips Sehat
</a>
<span dir='ltr'>(2)</span>
</li>
<li>
<a dir='ltr' href='http://subagya.blogspot.com/search/label/Tools%20Blogger'>
Tools Blogger
</a>
<span dir='ltr'>(1)</span>
</li>
</ul>
Jangan lupa di copy pindahkan ke text editor seperti Note Pad, kita akan membutuhkan kode ini lagi.
- Kembali ke blogger , pilih add page elements terus tambahkan HTML/JavaScripts kemudian masukan kode ini :
<a aiotitle="click to expand" href="javascript:togglecomments('UniqueName')"
>Click Here…..[+/-]</a><br />
<div class="commenthidden" id="UniqueName">
>Click Here…..[+/-]</a><br />
<div class="commenthidden" id="UniqueName">
Kode HTML/Javascript/Content
</div>
Keterangan : UniqueName isi sesuai keinginan sobat misal ganti dengan Labels jangan lupa untuk mengganti UniqueName yang ke 2 dengan Labels juga , terus paste kode yang kita ambil tadi di view page source yang kita simpan di Notepad. Paste kode tersebut dibagian Kode HTML/Javascripts/Content.
- Simpan dan lihat hasilnya, dan jangan lupa untuk menghapus Labels yang kita pertama buat tadi agar tidak ada 2 Labels di blog kita.
Read more: http://subagya.blogspot.com/2008/07/expandablecollapse-for-labels.html#ixzz1giH0uNql
Under Creative Commons License: Attribution
0 comments:
Post a Comment