Social Icons

Sabtu, 16 Februari 2013

Cara membuat spoiler

Hai! saya si blogger newbie akan ngajarin beberapa hal untuk sesama newbie yang mungkin lagi membutuhkan!

lah...kok?? newbie ngajar newbie??

ya nggak papa dong... cuma pengen ngasi info aja. kebetulan pas lagi belajar buat Blog, nemuin hal-hal yang mungkin saja para newbie sekalian lagi kebingungan nyarinya  :D

nah, yang pertama saya akan ngajarin
gimana cara membuat spoiler pada Blog!

Sebelumnya, apa itu spoiler ? Menurut pengertian saya, spoiler adalah tombol yang dapat digunakan untuk mempersingkat postingan blog. Mau tau kenapa?? cek aja spoiler di bawah ini!

Contoh Spoiler:
spoiler akan menyembunyikan sebagian dari postingan dan bagian itu hanya dapat ditampilkan jika tombol spoiler diklik, dan dapat disembunyikan kembali jika tombol spoiler diklik lagi. Dengan begini, postingan kita tidak terlalu memakan tempat pada blog. Dalam spoiler ini, dapat digunakan untuk menyembunyikan teks, gambar, maupun video (untuk gambar dan video diubah ke bentuk script text terlebih dahulu).
 Terus cara buatnya gimana??

gampang kok, tinggal ikutin aja langah-langkah berikut ini!!

1. Login ke akun Blogger anda

2. Pilih New Post atau Entri Baru seperti membuat postingan biasa

3. Pilihlah pada mode HTML saat membuat postingan

4. Gunakan script berikut ini untuk membuat spoiler:



<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Contoh Spoiler</b>: <input value="Lihat" 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 = 'Lihat'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
Letakkan teks atau script anda disini
 <br>
</div>
</div>
</div>



Catatan :

  1. Kata Contoh Spoiler adalah judul dari spoiler itu (yang terletak di sebelah kiri tombol Lihat/Tutup). Anda dapat menggantinya sesuai keinginan anda.
  2. Kata Lihat dan Tutup adalah kata yang terdapat pada tombol. Anda dapat menggantinya sesuai keinginan

5. Klik Publish jika sudah selesai

Sekian tips cara membuat spoiler dari saya. semoga dapat bermanfaat dan Terima Kasih telah berkunjung ke Blog saya  ;D

Tidak ada komentar:

Posting Komentar

 
Blogger Templates