Translate This Page Here

By Kanwara

Sunday, July 19, 2009

Cara Buat Spoiler di Blogspot

Kali ini saya ingin membahas tentang tutorial cara membuat spoiler di Blogspot. Sebelumnya apakah sobat tahu apa itu spoiler? spoiler berfungsi sebagai widget untuk menyembunyikan (show and hidden) suatu teks atau gambar agar tidak memakan tempat dan terlihat lebih simple. Spoiler ini bagus sekali digunakan bagi sobat yang ingin postingnya tidak terlihat terlalu panjang dan banyak berisi gambar-gambar, fungsi spoiler ini bisa sobat dapati dibeberapa forum-forum lokal atau luar, misal kaskus.us. Nah sekarang yang jadi pertanyaan apakah bisa memasang spoiler di blogspot yang notabenenya gratisan? jawabannya lagi-lagi sangat bisa, malah sobat bisa memodifikasi tampilan spoiler tersebut misalnya dengan warna dan sebagainya. Bagaimana tertarik ingin memasangnya?

Ikuti langkah berikut:

1. Pasang kode berikut dimana spoiler ingin sobat pasang. Misalnya di postingan sobat yang banyak berisi gambar.

Ini dia kodenya:
<div style="margin: 20px; margin-top:5px"><div class="smallfont" style="margin-bottom: 2px;"><input value="Tampilkan" type="button" style="margin: 0px; padding: 5px; width: auto; font-size: 11px;" 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 class="alt2"><div style="display: none;"><div style="border: none; color:none; background-color:none; text-align: justify; padding:10px;">

GAMBAR ATAU TEKS SOBAT LETAKKAN DISINI

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


Contoh ingin memasang sebuah GAMBAR ini:
Contoh spoiler gambar

Maka hasilnya seperti ini:
Spoiler untuk gambar:


Contoh spoiler gambar



contoh spoiler dengan teks:

Ini adalah teks untuk contoh spoiler.
Bagaimana mudahkan?

Maka hasilnya seperti ini:

Spoiler untuk teks:


Ini adalah teks untuk contoh spoiler.
Bagaimana mudahkan?



KETERANGAN

sobat bisa memodifikasi spoiler tersebut dengan mengubah font, warna, background dan lainya. Gunakan keahlian sobat agar spoilernya tampak menarik hehe. Selesai.



Full DEMO Here

Selamat ngeblog!

4 comments:

Ser Artan on July 30, 2009 at 9:18 PM said...

din coba dulu...

Kanwara on August 7, 2009 at 11:21 PM said...

silahkan om a ser artan h dicoba...
tar klo enak balik lg ya... (makanan kali) hehe

GoyangKarawang.Com on February 11, 2010 at 11:20 PM said...

terimakasih ulasannya bos.. kalo spoiler itu digunakan untuk menyembunyikan widget seperti blogcalog, dkk bisa menggangu backlinknya ga ya?

Neody on March 4, 2010 at 5:49 PM said...

wah makasih tutorialnya..

Post a Comment

 

Tutorial Blogspot

Recent Comments

About Us

my logo

TEBE is "Tutorial Blogger". This blog serves as showcase for my project and others blogger. Wanna learn more about web/blog design, css, html, graphic design, photography, programming, etc.
[View my complete profil!]

Connect ith Me


Follow Kanwara on Twitter!Connect with Kanwara on Facebook!Visit my wordpress blog!Join at aRawna Blog Tutorial!

Copyright © 2009 All Rights Reserved TeBe Tutorial Blogger | Designed:Kanwara Dotcom