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 comments:

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

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

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

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

      Delete
  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

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

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

    ReplyDelete
    Replies
    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 .

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

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

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

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

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

    ReplyDelete
    Replies
    1. Keren nih Mak Lusi terus fokus nulis ya biar nyabet jawara terus...hihihi

      Delete
  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?

    ReplyDelete
    Replies
    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,,,,

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

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

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

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

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

      Delete
  12. This comment has been removed by a blog administrator.

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

      Delete
  13. Enggak ngerti maksudnya gambat spoiler itu mbak putri

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

      Delete
  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

    ReplyDelete
    Replies
    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 :)

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

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

      Delete

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