Cara Membuat Fungsi Hide And Show (Sembunyikan/Tampilkan) Pada Blog

11 komentar
Cara Membuat Fungsi Hide And Show (Sembunyikan/Tampilkan) Pada Blog , Siang ini ical akan sedikit memberikan tips yang tidak kalah menariknya lagi, yah ical akan ngebahas lagi cara meringkas elemen blog agar tidak terlalu mengabil tempat setelah sebelumnya ical pernah berikan cara membuat efek scrool pada komentar postingan, untuk kali ini ical akan membahas fungsi hide and show (spoiler). Dengan FUngsi Hide And Show ini maka diperuntukkan untuk hal-hal yang ingin disembunyikan, agar terkesan membuat orang penasaran dan berkeingin untuk membukanya, dan juga untuk lebih memperindah tampilan blog teman-teman semua. Langsung cekidot dibawah.

oke langsung aja pada langkah membuatnya:

Kode script hide/show untuk blog.

<div><div style="margin: 5px;">
<div style="margin-bottom: 2px;" class="bigfont"><input style="margin: 0px; padding: 0px; width: 95px; " value="Tampilkan" 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 = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan'; }" type="button"/>
</div>
<div style="border: 0px inset ; margin: 0px; padding: 6px;" class="alt2">
<div style="display: none;">

Silahkan diisi apa saja di sini, yang memang dirasa perlu tuk disingkat

</div></div></div></div>

caranya tambah kode diatas ke blog, bisa pada elemen baru, atau di halaman posting, tergantung kebutuhan sech.

seterusnya ganti tulisan Tampilkan/sembunyikan dengan kata2 lain yang menurut kamu bagusLah.

terus ada tulisan silahkan diisi apa saja ... , silahkan ganti dengan kode/elemen yang akan diberi efek hide/show, cukup jelas bukan!!!!

Sebagai contoh , perhatikan dibawah!!!



Mudah bukan caranya, monggo dipraktekkan....

Related Posts

11 komentar

  1. Waah..mantap kali ini tutorial bah..

    BalasHapus
  2. Tutorial yang sangat menarik...

    BalasHapus
  3. Good and interesting information. thanks

    BalasHapus
  4. pren bukan yang ini tapi itu lho menu navigasi yang kalo mouse di atasnya dia muncul kaya punya you diatas , (Home)(tutorial blog )(BISNIS)

    BalasHapus
  5. sudah saya coba sobat terima kasih mau berbagi ilmu sobat ..o iya aku sudah follow ....

    BalasHapus
  6. makasi mas tutornya langsung bisa ni....

    ^_^y

    BalasHapus
  7. Cara Membuat Fungsi Hide And Show (Sembunyikan/Tampilkan) Pada Blog

    Kode HTMLnya mana Bozz... kok cuman kotak putih az

    BalasHapus
  8. @Belajar BLog : ada koq gan kodenya, coba dilihat lagi diatas.........

    BalasHapus

Posting Komentar

Subscribe Our Newsletter