Kamis, 03 Mei 2012

Home » , » Tutorial Cara Membuat Spoiler di (postingan) Blogger

Tutorial Cara Membuat Spoiler di (postingan) Blogger

Tutorial Cara Membuat Spoiler di (postingan) Blogger. Spoiler merupakan fasilitas yang digunakan untuk menyembunyikan sebagian atau keseluruhan isi posting untuk menghemat ruang. Biasanya yang paling sering disembunyikan adalah gambar. Selain untuk untuk menghemat ruang, spoiler juga bisa membantu mempercepat loading blog. Karena itulah banyak yang menggunakan fasilitas ini di dalam postingan blognya

Sekarang bagaimana membuat spoiler di dalam postingan blog? Membuat spoiler di blog memang sedikit lebih ribet dari pada membuat spoiler di forum. Tapi tenang saja. Toh kita tinggal mengkopi script yang ada dan mempastenya di postingan blog.


Berikut adalah caranya:

  1. Perhatikan Kode di bawah ini:

    Kode Spoiler di Blog




    <div><div style="margin: 5px;">
    <div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Tentang bla..bla.bla.. </span></i><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 class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
    <div style="display: none;">

    isi spoiler...

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


  2. Ganti "isi Soiler..." dengan isi spoiler Anda, seperti gambar

  3. Anda tentu membutuhkan kode gambar untuk dimasukkan sebagai isi spoiler. Untuk mudahnya Anda bisa mengupload gambar terlebih dahulu ke postingan blog, kemudia Ambil gambarnya, contonya seperti di bawah:

    Kode Gambar




    <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLJwIDvT4UG-DqmEpn8x8GMtt_V_pc-SLxKzAzPNqOWh-wtk3vZDJlD032qNWj9nir5_MEeLJ3PEEkSD7x2nktgke2waBP7CYVFVHW8yCLl6ZEKbILvJPLCf3RBOsZdATu8ZDqqNQM8tXI/s1600/Foto+Dewi+Persik+Bugil.jpeg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 251px; height: 201px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLJwIDvT4UG-DqmEpn8x8GMtt_V_pc-SLxKzAzPNqOWh-wtk3vZDJlD032qNWj9nir5_MEeLJ3PEEkSD7x2nktgke2waBP7CYVFVHW8yCLl6ZEKbILvJPLCf3RBOsZdATu8ZDqqNQM8tXI/s320/Foto+Dewi+Persik+Bugil.jpeg" border="0" alt="Gambar Dewi persik"id="BLOGGER_PHOTO_ID_5655546849953461618" /></a>


  4. Ganti "Tentang bla.. bla.. bla.." dengan judul gambar

  5. Anda juga bisa mengganti tulisan "Show" dan "Hide" dengan tulisan lain

  6. Maka Kode lengkapnya akan seperti ini:

    Contoh Lengkap




    <div><div style="margin: 5px;">
    <div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Dewi Persik </span></i><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 class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
    <div style="display: none;">

    <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLJwIDvT4UG-DqmEpn8x8GMtt_V_pc-SLxKzAzPNqOWh-wtk3vZDJlD032qNWj9nir5_MEeLJ3PEEkSD7x2nktgke2waBP7CYVFVHW8yCLl6ZEKbILvJPLCf3RBOsZdATu8ZDqqNQM8tXI/s1600/Foto+Dewi+Persik+Bugil.jpeg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 251px; height: 201px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLJwIDvT4UG-DqmEpn8x8GMtt_V_pc-SLxKzAzPNqOWh-wtk3vZDJlD032qNWj9nir5_MEeLJ3PEEkSD7x2nktgke2waBP7CYVFVHW8yCLl6ZEKbILvJPLCf3RBOsZdATu8ZDqqNQM8tXI/s320/Foto+Dewi+Persik+Bugil.jpeg" border="0" alt="Gambar Dewi persik"id="BLOGGER_PHOTO_ID_5655546849953461618" /></a>

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


  7. Dan hasilnya akan seperti ini:

    Dewi Persik




    Gambar Dewi persik


  8. Kalau Anda mengerti html maka silahkan otak-otik kode di atas agar lebih menarik

  9. Selamat!!! Anda sudah bisa membuat spoiler di postingan blogger

Sekian []

Caraku Membuat

Related Post

Website
Blog


Label: ,