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.
Kalau masih bingung bisa tanyakan ke saya lewat YM, bisa di klik di Status YM pada sidebar saya atau berkomentar di kotak komentar, bisa juga berkunjung ke situs ini. Untuk teman baru saya Jovie mudah-mudahan puas dengan tutorial ini.
thanks banget nih Bro..
ReplyDeletewaduh jadi terharu di link dua kali..itu awardnya buat Jovie juga kan?? hehe
btw, thanks ilmunya akhirnya keluar lagi..
gak sia2 yah punya temen kayak gw yang mintanya macem2 jadi bisa buat inspirasi nge post baru..hehe *kok GR sendiri??*
nanti Jovie coba deh Bro..thanks sekali lagi..
ngga ngarti... hahahaha... :(
ReplyDeleteBro..Jovie mau nyobain ini..tapi kok males banget yah..padahal perlu banget nih..swear perlu banget...soalnya lumayan biar blogku gak lola...
ReplyDeletemm...bantuin dunk Broo..hehe
@ Jovie > Ok nanti tak bantuin
ReplyDelete@ panas hujan > kok bisa gak mengerti? di mananya yg gak ngert?
@JOVIE: GAK PA2 Mbak jOV,BIAR KANG SUBAGYA YG BAEK NI jd ada kerjaan, hhehehee
ReplyDeleteBos, lapor ko' hosting gratisnya nampilin tab kosong setelah di klik? terima kasih..
ReplyDelete