2 Cara Membuat Efek Show Hide (Expand Collapse) di Postingan Blog

2 Cara Membuat Efek Show Hide (Expand Collapse) di Postingan Blog Rating: 4.5 Reviewer: Dhika - ItemReviewed: 2 Cara Membuat Efek Show Hide (Expand Collapse) di Postingan Blog

Cara Membuat Efek Show Hide - Pernakah kamu mengunjungi blog ataupun website yang memiliki tampilan efek show hide pada artikel yang kamu baca ? Pada artikel tersebut, biasanya terdapat paragraf yang memiliki tombol tampilkan atau sembunyikan. Jika kita mengklik tampilkan maka paragraf yang disembunyikan akan terlihat. Kemudian jika kita mengklik sembunyikan maka paragraf yang ditampilkan akan disembunyikan. Efek ini juga dinamakan efek expand collapse yang dapat menyembunyikan text, gambar, javascript dan sebagainya dalam postingan blog. Bagaimana cara membuat efek ini.

Cara membuat efek show hide (expand collapse) di postingan blog tersebut mudah saja. Yang diperlukan adalah javascript tertentu untuk membuatnya. Pada umumnya, efek ini dibuat bertujuan untuk mempercantik postingan atau untuk mempersingkat tampilan postingan karena text yang ditulis sudah terlalu panjang, yang membutuhkan scroll lebih lama. 

Untuk membuat efek ini, ada dua cara yang akan saya berikan. Cara pertama adalah dengan menempatkan javascript di dalam template kemudian memanggilnya di dalam postingan. Kemudian untuk cara yang kedua adalah langsung saja menempatkan javascript pada postingan tanpa menempatkan di dalam template. Tinggal pilih yang mana yang kamu suka. Javasript ini tidak akan mempengaruhi kecepatan loading blog kamu.

# 1. Cara Pertama :

1. Login ke akun blogger

2. Masuk ke mode edit template

3. Tempatkan kode javascript di bawah ini tepat di atas kode </head>

<script type="text/javascript"> function showhide(toggle) { //change target element mode var elementmode = document.getElementById(toggle).style; elementmode.display = (!elementmode.display) ? 'none' : ''; } function openclose(toggle) { showhide(toggle); } </script>

4. Simpan template blog
5. Buat postingan baru
3. Gunakan mode penulisan HTML dan copy paste kode HTML di bawah ini

<a href="javascript:openclose('toggle');" style="text-decoration: none; padding: 3px 7px 3px 7px; border: 1px solid #ccc;">+ Tampilkan / Sembunyikan</a> <div id='toggle' style='display: none; padding: 10px; background: #ffffff;'> <em><font color="red">"Letakkan Teks ato kode anda disini"</font color="red"></em> </div>

4. Publikasikan postingan kamu

Hasilnya akan terlihat seperti di bawah ini :

+ Tampilkan / Sembunyikan

"Gimana... hasilnya keren kan ? mantab..."

# 2. Cara Kedua :
1. Buat postingan baru
2. Copy paste kode HTML di bawah ini

<div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;"> <b>Judul Spoiler</b>: <input value="Buka" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button"> </div> <div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"> <div style="display: none;"> Tempatkan teks atau kode script (gambar atau video), link di sini <br> </div> </div> </div>

3. Publiskan postingan kamu

Hasilnya akan terlihat seperti ini :

Tulis Judul Spoiler:

Tempatkan teks atau kode script (gambar atau video), link di sini

Membuatnya mudah sekali kan, javascript ini tidak akan memberatkan loading blog kamu. Semoga bermanfaat...