Rabu, 16 Januari 2013

Cara Membuat Spoiler (AutoHide) di Blog

Cara Membuat Spoiler (AutoHide) di Blog. Setelah saya berkelana membuaka blog teman-teman saya sangat ingin membuat Spoiler (AutoHide) di blog saya. Sebelum saya berbicara panjang lebar di sini, saya ingin bertanya kepada anda apakah anda sudah tau apa itu Spoiler (AutoHide) dan kegunaannya. 

Nah kalau anda belum mengetahui kami akan berbagi informasi dengan anda supaya anda juga tau apa itu Spoiler (AutoHide) dan anda bisa mencobanya di blog anda. Ok kegunaan dari Spoiler (AutoHide) tentunya bisa anda lihat sendiri setelah anda mencobanya yang jelas kita bisa mnyembunyikan Foto, Gambar, ideo atau Scrip Html yang memakan tempat. Jadi intinya kita bisa meringkas apa yang ingin kita tampilkan di blog agar tidak membutuhkan banyak tempat.
Cara Membuat Spoiler (AutoHide) Di Blog

OK langsung aja kita coba.  Cara Membuat Spoiler di Postingan Blog sendiri sangat mudah sekali. Yang perlu kita lakukan hanya memasang kode script pada postingan yang ingin dipasang AutoHide. Dari pada penasaran baiknya kita langsung praktekan saja dibawah ini, sebelumnya berikut contoh Spoiler (Buka Tutup) yang saya terapkan pada beberapa tulisan di blog ini :

 Berikut caranya :
1. Seperti biasa Login ke akunnya masing2
2. Buat Entri Baru/New Post = Membuat postingan
3. Jika sudah, pada menu Entri, Pilih mode penulisan HTML (Bukan Compose) jika ingin menerapkan Spoiler/AutoHide. Jika dipasang pada Mode Compose maka tidak akan berfungsi code scriptnya.
4. Lalu copas Script dibawah ini pada postingan yang akan dipasang autohide

<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;">
Letakkan teks atau kode script (gambar atau video), link di sini  <br>
</div>
</div>
</div>

5. Kita dapat merubah Judul Spoiler, Buka, Tutup dengan bahasa kita masing2, dan Letakkan Teks, gambar, video, kode2 script, atau link yang ingin dimasukkan didalam Spoiler
6. Publikasikan ! dan lihat hasilnya

Kalau anda ingin melihat hasil dari pemasangan Scrip di atas bisa lihat di bawah ini.
Judul Spoiler:

0 komentar:

Posting Komentar

◄ Posting Baru Posting Lama ►
 

Copyright © 2012. Sombhi.blogspot.com - All Rights Reserved B-Seo Versi 4 by Bamz