Cara Mudah Membuat Tombol Klik Show Pada Postingan Blog. Hallo Sobat Blogger.. Dengan Membaca Judul artikel ini saya yakin sobat blogger sudah paham, paling tidak sudah mengetahui apa itu Tombol Klik Show pada Postingan blog.
Fungsi dari Tombol menu Klik show ini sebenarnya tidak hanya untuk mempercantik tampilan blog, namun ada hal yang lebih penting yaitu mempersingkat atau memperpendek isi postingan blog sehingga tidak terlalu panjang serta bisa mempercepat loading ketika membuka sebuah artikel pada blog. selain itu juga bisa sebagai salah satu cara untuk memberikan tulisan kejutan untuk tujuan tertentu.
Masih penasaran ...???? Oke langsung saja di simak tutorialnya langsung di bawah ini ya:
Cara Mudah Membuat Tombol Klik Show Pada Postingan Blog:
Caranya Cukup simple sobat, Sobat Cukup memasukkan atau Meng Copy Paste Kode di bawah ini Pada Postingan Blog, Ingat ya Copy Pastenya Di Kolom HTML bukan di Kolom Compose.
lihat gambar di bawah ini.
Kode Html:
<div><div style="margin-bottom: 2px;"><b><small>Klik Show Untuk Melihat</small></b>
<input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"></div>
<div style="border: 1px inset; margin: 0px; padding: 6px;"><div style="display: none;">
Masukkan Tulisan atau Kata Kata yang sobat inginkan di sini
</div></div></div>
<input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"></div>
<div style="border: 1px inset; margin: 0px; padding: 6px;"><div style="display: none;">
Masukkan Tulisan atau Kata Kata yang sobat inginkan di sini
</div></div></div>
Catatan.
Tulisan warna Biru silahkan ubah sesuai selera sobat.
Tulisan warna Pink Silahkan Masukkan Tulisan Sesuai keinginan Sobat.
Hasilnya Bisa anda lihat seperti di bawah ini:
Klik Show Untuk Melihat
Demikian tutorial tentang Cara Mudah Membuat Tombol Klik Show Pada Postingan Blog, semoga bermanfaat bagi sobat Blogger semua.
SELAMAT BERKREASI.. HAPPY BLOGGING..
Artikel Terkait
Tidak ada komentar:
Posting Komentar