Kamis, 13 September 2012

Cara Bikin Spoiler Di Blog

Beberapa di antara kita pasti sudah tahu apa itu spoiler, apalagi kalau sering bermain di forum. Spoiler sudah pasti sering digunakan.
Lalu bagaimana kalau mau menerapkan atau membuat spoiler di blog? Sebelumnya kalau ada yang belum tahu apa itu spoiler. Embun Oengoe jelasin singkat saja. Spoiler adalah tombol yang digunakan untuk menyingkat tempat atau menyembunyikan konten (teks, foto atau video) dengan buka tutup.

Contohnya bisa dilihat di atas atau di bawah halaman ini.

Spoiler bisa juga dibuat di blog, lebih khusus dipostingan. Biasanya digunakan untuk membuat penasaran si pembaca dengan menyembunyikan terlebih dahulu. Untuk melihatnya dengan mengklik tombol spoiler itu. Selain itu juga untuk menghemat tempat, ya karena buka tutup itu (spoiler). Lalu bagaimana cara membuat spoiler di blog? Silakan sobat Embun Oengoe Langsung simak yang berikut ini.

Cara Membuat Spoiler di Blog
1. Login ke Blogger
2. Pilih New Post atau Entri Baru seperti membuat postingan biasa
3. Pilihlah pada mode Edit HTML saat membuat postingan
4. Gunakan kode script berikut ini untuk membuat spoiler:

<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) di sini
 <br>
</div>
</div>
</div>

5. Kita dapat mengganti Judul Spoiler sesuai kehendak kita, begitu juga Buka dan Tutup.
6. Klik Publish atau Terbitkan Entri jika sudah selesai.
7. Sebelum sobat Embun oengoe memasukan file yang akan digunakan spoiler, upload dulu file nya  di situs http://tinypic.com untuk mengetahui kode script, pilih pada kolom yang paling atas untuk copy kode script tersebut.Cara mendapatkan kode script file bisa sobat Embun Oengoe melihatnya DISINI.



CONTOH:
Image and video hosting by TinyPic

Tidak ada komentar:

Poskan Komentar

Buat sahabat yang mau sedot gambar DLL, silakan..
Jangan lupa tuk tinggalin jejak sobat dengan komentar pada blog ini supaya ane juga gampang berkunjung ke blog sobat.

Entri Populer

BACKLINK SITE

Memasang banner site yang menyediakan backlink otomatis sangatlah membantu tuk meningkatkan traffic blog kita karena selain anda pengunjungpun akan klik banner site baclink otomatis yang ada diblog anda nah hal ini yang akan membuat link anda akan terus nonggol diurutan pertama. survei membuktikan bahwa link yang nonggol di urutan pertama itu yang sering diklik visitor. Anda tertarik pasang banner backlink otomatis silahkan copy paste kode di bawah ini yang saya dapatkan dari site beberapa negara.
EMBUN OENGOESERIBU KAWANbacklinkgratis4ufreebanner4uSERIBU KAWANbertaubatlahiklanseribuartissexy17freebacklinks4usatriopiningitkatamutiara4usehatwalafiahiniinfo4uFree Automatic Linkiklansahabat2billiontraffic4uiklanwargaechange de liensseribusayangDAHOAM Free Backlinksbloggratiss4usurgalokaSERBA SERBISENI LUKISTEMPLATE GRATISWARGA BISNISAGUS FAUZYUnlimited BacklinkFree Automatic LinkFree Automatic Link4905GOBLOGANEKA VIDEOFree BacklinksBacklink ExchangeCalendario BiblicoFree Automatic LinkDie Gute SaatFree Automatic LinkFree Automatic LinkFECEBLOG 4UIFree Automatic LinksangrajamayaIntercambio de enlacessurgawebEnlaces GratisFree Automatic LinkFree Automatic LinkFree Automatic LinkbabulfatahFree Automatic Elvira Linksbacklinkgratis4uFree Automatic LinkFree Automatic LinkBUSANA MUSLIMFree BacklinksUnlimited Backlink ExchangeseribukatamutiaraUnlimited Backlink ExchangeTradiciones Peruanas de Ricardo PalmaAutomatic Backlink ExchangeFree Automatic LinkPlugboard Free Backlink ExchangeMariachi Backlink ExchangeWeb Link ExchangemajelisrasulullahText Backlink ExchangesLinkon Bedava - Free BacklinkText Back Links Exchangebedava - Free Backlink - www.linkdevi.comText Back Links Exchangesbedava - Free Backlink - www.v8link.com