17 Apr 2014

Cara Mudah Buat Gambar Spoiler Dalam Spoiler

Credit :Petty.Images

Salam Sobat blogger  semua

Cara mudah buat gambar spoiler dalam spoiler postingan kali ini merupakan lanjutan lebih dari artikel sebelumnya Tips Cara Mudah Membuat Spoiler di Blog yang pernah dibahas sebelumnya.

Mungkin ada yang mengalami sedikit kebingungan bagaimana agar gambar spoiler bisa nampak dalam spoiler. Wah, ribet juga kata-katanya. 


Mengingat ini ada permintaan juga dari teman blogger yang menanyakan bagaimana cara membuat spoiler gambar tersebut :



Namun lanjut, deh lihat cara simple yang biasa saya gunakan dalam membuat Spoiler berupa KODE SCRIPT yakni :

1. LOGIN ke Blogger
2. Pilih perintah Postingan Baru (NEW POST) seperti biasa akan menulis
3. Ubah tab COMPOSE  menjadi tab HTMLsaat membuat postingan
4.Pakailah kode Script seperti berikut ini:

Kode Script SPOILER :

Lihat Kode Scipt:
<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>

Setelah kode script dicopas jangan lupa letakkan kode gambar pada kode script spoiler.
Cara mendapatkan kode script gambar bisa dilihat cara pada artikel DISINI. (Baca Kode Banner/Logo/Gambar prosedurnya sama) :)

Tinggal masukkan kode script atau teks semisal GAMBAR IKAN (seperti cara dari link atas)


Godluck lhooo ^_^


Latihan Buat Spoiler Gambar Ikan:
follow @cputriarty on twitter

Untuk membuat spoiler Video sebagai berikut :
Latihan Buat Spoiler Video OmahAntik:
Video Dalam Spoiler:
http://www.youtube.com/watch?v=nTTUCk__7Io&feature=youtu.be

Bagaimana sobat blogger sekalian, cukup menantang bukan untuk jeli menempatkan kode, gambar ataupun video. Selamat mencoba ya :)
Salam Ngeblog selalu ...

31 komentar:

  1. Mak, spoiler gambar ikannya kenapa pindah ke tab lain ya?
    Mak ini rajin banget ya belajar script, saya gak betah :D

    BalasHapus
    Balasan
    1. Terimakasih atas pujian dan masukannya..udah saya benerin tadi kode mak.. iya gara2 kurang tutup, eh pict ikan bisa pindah ke tab lain :)

      Hapus
    2. Ooh masalah tanda kurungnya ya? Hihi ribet ya .. itu salah satunya yang bikin saya gak betah dengan utak-atik script. :D

      Hapus
    3. Hihii...begitulah mak Niar...emang kudu jeli kan. Ga boleh grusa-grusu kan :)

      Hapus
  2. Mak keren banget ilmunya. Tapi jujur tuk bisa buat yang begini harus ada yang nemani tuk nanya2.Insyaallah tar dipraktekin biar punya blog yang wow
    Thanks ya Mak

    BalasHapus
    Balasan
    1. Aku siaaap nemenin mak...kalo dibutuhkan...hehehe..
      Ayo belajar lebih semangat deh biar tertantang lebih ulet en rajin :)

      Hapus
  3. seneng utak atik blog ya mbak...keren banget ilmunya, ntar aku sering mampir kemari ya, mraktekin ilmunya....tengkiyu mbakyu....

    BalasHapus
    Balasan
    1. MAturnuwun mbakyu yang cuaeem ini...senengnya di datangi mbak yang punya seabreg aktifitas. Silakan mba coba tutorialnya ntar kalo kurang ngeh tinggal nyeluk2 namaku .oyee ?? Slm ngeblog .

      Hapus
  4. Siap dipraktekin ah. Makasih banya,Mak! btw kalau mau aplikasiin blog dengan template bawaan wordpress (kayak di blogdetik) ada caranya kah?

    BalasHapus
    Balasan
    1. Sama-sama mbaa...hmm kalo WP mungkin ada cuma ga mendalami sih mba, lebih fleksibel di BS yang bisa dioprek2 kodenya hehehe

      Hapus
  5. Cukup menantang neh... sungguh membutuhkan kejelian, hehe... Makasih banyak ya, Mbak :)

    BalasHapus
    Balasan
    1. benar sekali mas... semua usaha itu seperti menaklukan tantangan. Kalo berhasil wow alhamdullilah merasa puas dengan kinerja. Meski kecil namun sungguh berarti :)

      Hapus
  6. Wah mataku yang gak bisa telaten gini mak. Aku masih konsisten di tulisan aja :D

    BalasHapus
    Balasan
    1. Keren nih Mak Lusi terus fokus nulis ya biar nyabet jawara terus...hihihi

      Hapus
  7. Cara menyisipkan beberapa spoiler di satu artikel gimana mbak, apa ada kode lagi?
    Terus kadang muncul "HTML anda tidak bisa diterima: tag tidak tertutup:DIV" itu cara mengantisipasinya gimana mbak?

    BalasHapus
    Balasan
    1. yaa pakainya cuma kode utk spoiler it saja. ga ada tambahan.
      Nah, kalo ada keterangan seperti itu berarti ada kode yang kurang, maksutku ketinggalan. Coba diteliti lagi. Karena saya pernah ngalami kejadian itu kurang tanda seperti ini misalnya <div <br dsb,,,,

      Hapus
  8. Emang utak atik kode html itu wow banget deh hehehe...
    Aku sering nyerah kalo urusan spt ini Mak.

    BalasHapus
  9. nice tutorial, bisa ngebuat artikel makin enak di pandang nih kalau ada spoilernya :)

    BalasHapus
  10. Wah... postingan yang berguna banget. Cobain ah!
    Makasih banyak sudah sharing, Mak. ^^

    BalasHapus
  11. wah nambah tahu,blognya enteng banget :D
    kritiknya ya mbak--->sugatangguh.blogspot.com

    BalasHapus
    Balasan
    1. terimakasih ya masbro Agus,,,,atas kunjungannya..suka banget sama ilustratornya, bikin sendiri yaa...kereen :) udah meninggalkan jejak disana

      Hapus
  12. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
    Balasan
    1. naaah itu dia non aku blm nyoba di WP ato blogdetik...??? bisa ga ya ??

      Hapus
  13. Enggak ngerti maksudnya gambat spoiler itu mbak putri

    BalasHapus
    Balasan
    1. Hahaha... spoiler itu seperti tab window mba...bisa diopen n dihide, fungsinya biar artikel ga terlalu memanjang ke bawah :)

      Hapus
  14. makasih banget mbak tutorialnya. btw mbak wa nya udah gak aktif ya? aku kirim message gak sampai, sudah di add juga ke group loh

    BalasHapus
    Balasan
    1. Hikks sori mbaa..baru bales secara gonta ganti modem bikin ga keruan..aduuh , hpku diinjek kaki sama anakku sulung mba..so jadi almarhum deeh :( doain bisa punya yang baru ya :)

      Hapus
  15. spoiler videonya kok ga bisa jalan ya mba? :D apa cm berupa gambar aja?

    BalasHapus
    Balasan
    1. kalo dklik gambarnya, otomatis nanti akan dibawa ke situs youtube, kan uploadnya di sono...hhehe.
      aku klik yaa jalan kok :)

      Hapus

Terimakasih sudah mampir dan berkomentar, insyaalah saya akan berkunjung balik. Sukses selalu :)