Cara Membuat Tombol Show dan Hide di Postingan Blog

Assalamualaikum...

Halo sobat My Blog My Daily apakabar kalian semua? semoga kalian semua dalam keadaan yang baik-baik saja. Oke sob, pada kesempatan kali ini saya ingin membuat sebuah tutorial yang mana tutorial ini masih berhubungan dengan artikel sebelumnya.

Sebelumnya saya sudah membuat tentang Cara Mudah Membuat Daftar Isi di Dalam Artikel atau Postingan Blog. Nah, pada kesempatan kali ini saya ingin membuat sebuah tutorial tentang cara membuat tombol show dan hide, tombol ini akan saya aplikasikan pada daftar isi yang telah saya buat kemarin.

Apa itu tombol show dan hide?

Tombol show dan hide adalah sebuah tombol yang biasanya digunakan dalam sebuah artikel untuk menampilkan dan menyembunyikan sebuah konten di dalamnya. Buat sobat yang suka bermain Kaskus pasti sering melihat tombol ini di salah satu thread di Kaskus.

Untuk lebih jelasnya silahkan sobat perhatikan contoh gambar tombol show dan hide di bawah ini.

Contoh tombol show dan hide yang kontennya di tutup atau di sembunyikan

Contoh tombol show dan hide yang kontennya di tampilkan atau sudah di klik

Nah, kali ini saya ingin mengaplikasikan tombol show dan hide pada daftar isi yang telah saya buat kemarin. Jika sobat penasaran dengan hasilnya, silahkan lihat blog mas Sugeng ini, ya kira-kira hasilnya akan seperti itu walau tidak terlalu mirip.

Baca juga : Cara Mudah Membuat About Me yang Keren di Sidebar Blog

Cara membuatnya sangatlah mudah sob dan sepertinya ini akan jadi tutorial singkat saja. Oke, jika sobat tertarik untuk membuatnya silahkan simak langkah-langkah berikut ini :

1. Pertama-tama siapkan sebuah artikel yang sudah terdapat daftar isi di dalamnya. Jika sobat belum membuat daftar isinya, silahkan buat terlebih dahulu dengan mengikuti langkah-langkahnya disini.
2. Selanjutnya sobat copy kode di bawah ini. 
<div id="Button" style="margin:0 auto;text-align:left"> <input type="button" onclick="document.getElementById('Content') .style.display='block';Button.style.display='none';" value="Tampilkan" /> </div> <div id="Content" style="display:none;width:300px;padding:10px;margin:0 auto; border:1px solid #aaa;text-align:left; box-shadow: 0px 1px 3px 0px rgba(179,179,179,1);background:#fff"> <p> Letakkan kode daftar isi di sini </p> <input type="button" onclick="document.getElementById('Content') .style.display='none';Button.style.display='block';" value="Sembunyikan" /> </div>
3. Lalu ubah mode lembar kerja postingan dari "Compose" ke "HTML". Paste kode tadi tepat dibawah tulisan "Daftar Isi", tentunya di dalam mode "HTML". Jika sudah, pindahkan kode daftar isi ke dalam teks berwarna merah yang bertuliskan "Letakkan kode daftar isi di sini" pada kode tombol show dan hide tadi. Untuk lebih jelasnya perhatikan gambar berikut.

   

   Letakkan kode di bawah tulisan "Daftar Isi"

   
   

   

   Pindahkan kode Daftar Isi ke dalam kode tombol show dan hide

   
   
4. Perhatikan kode pada poin ke 2 diatas, disitu terdapat sebuah teks yang berwarna merah dan biru. Merah adalah teks untuk meletakkan konten yang ingin sobat show dan hide nantinya, sedangkan yang biru adalah teks value atau sebuah teks yang akan tampil pada tombol show dan hide. Pada kode diatas terdapat dua teks berwarna biru yaitu "Tampilkan" dan "Sembunyikan", silahkan sobat ganti teks tersebut sesuai keinginan sobat.
5. Jika langkah-langkah diatas telah sobat lakukan semua, itu berarti tombol show dan hide telah selesai dibuat. Silahkan publikasikan kembali artikel sobat untuk melihat tombol show dan hide tersebut. Hasil saya seperti ini.

   

   Sebelum di klik

   

   Sesudah di klik

   
   

Selain untuk menampilkan sebuah teks dan daftar isi, tombol show dan hide juga dapat disisipkan sebuah gambar di dalamnya sob. Nah, berikut ini adalah cara untuk menyisipkan sebuah gambar di dalam tombol show dan hide.

Baca juga : Tutorial Membuat Teks Efek Pecah di Photoshop

1. Silahkan sobat masukkan sebuah gambar yang sobat inginkan dengan cara klik "Insert Image", lalu "Pilih File" untuk memilih file gambarnya. Jika sudah, sobat bisa klik "Add Selected".

   

   Klik "Insert Image"

   
   
   
2. Langkah selanjutnya adalah sobat ubah mode lembar kerja postingan sobat dari mode "Compose" ke "HTML". Jika sudah, silahkan sobat copy dan paste kode tombol show dan hide yang telah saya berikan tadi ke dalam lembar kerja postingan sobat dengan mode "HTML".
   
3. Sama dengan langkah membuat tombol show dan hide untuk daftar isi di atas, sobat hanya harus memindahkan kode gambar ke dalam teks berwarna merah di kode tombol show dan hide atau diantara tag <p> dan </p>.
   
4. Jika sudah, silahkan di publikasikan dan lihat hasilnya. Oh ya sob, jika ukuran gambar lebih besar daripada kotaknya, sobat bisa atur width dari kotak maupun gambar sobat. Perhatikan gambar di bawah ini.

   

   Ukuran lebar dari kotak dan gambar

5. Yap sudah selesai dan berikut adalah hasilnya.

   

   Sebelum di klik

   
   

   

   Sesudah di klik

Sangat mudah sekali kan sob membuatnya? oh ya jika sobat memiliki kendala dalam hal pembuatan tombol show dan hide ini, silahkan komentar saja di bawah.

Baca juga : Cara Menampilkan Widget Blog Versi Mobile

Oke, mungkin segitu saja untuk tutorial kali ini, semoga dapat bermanfaat. Mohon maaf apabila ada kekurangan dan salah-salah kata, terimakasih untuk yang sudah mampir ke tulisan saya ini, dan sampai jumpa di artikel berikutnya.

Wassalamualaikum...