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 ...
Diposkan oleh di
Label: ,

31 komentar:

  1. Mugniar17 Apr 2014, 14.32.00

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

    BalasHapus
    Balasan
    1. Christanty Putri Arty17 Apr 2014, 14.47.00

      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. Mugniar17 Apr 2014, 18.34.00

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

      Hapus
    3. Christanty Putri Arty17 Apr 2014, 20.59.00

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

      Hapus
  2. astutiana17 Apr 2014, 14.32.00

    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. Christanty Putri Arty17 Apr 2014, 14.49.00

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

      Hapus
  3. Yuni Handono17 Apr 2014, 15.19.00

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

    BalasHapus
    Balasan
    1. Christanty Putri Arty17 Apr 2014, 17.05.00

      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. Efi Fitriyyah17 Apr 2014, 16.37.00

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

    BalasHapus
    Balasan
    1. Christanty Putri Arty17 Apr 2014, 17.18.00

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

      Hapus
  5. Akhmad Muhaimin Azzet17 Apr 2014, 16.46.00

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

    BalasHapus
    Balasan
    1. Christanty Putri Arty17 Apr 2014, 21.01.00

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

      Hapus
  6. Lusi18 Apr 2014, 01.39.00

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

    BalasHapus
    Balasan
    1. Christanty Putri Arty18 Apr 2014, 12.38.00

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

      Hapus
  7. Unknown20 Apr 2014, 13.29.00

    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. Christanty Putri Arty20 Apr 2014, 14.05.00

      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. Catatan Kecilku20 Apr 2014, 15.14.00

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

    BalasHapus
  9. pictalogi22 Apr 2014, 15.39.00

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

    BalasHapus
  10. Nia K. Haryanto25 Apr 2014, 08.57.00

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

    BalasHapus
  11. ASETIAWAN28 Apr 2014, 12.20.00

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

    BalasHapus
    Balasan
    1. Christanty Putri Arty28 Apr 2014, 13.53.00

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

      Hapus
  12. Melly30 Apr 2014, 14.30.00

    Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
    Balasan
    1. Christanty Putri Arty1 Mei 2014, 14.33.00

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

      Hapus
  13. nunu4 Mei 2014, 14.20.00

    Enggak ngerti maksudnya gambat spoiler itu mbak putri

    BalasHapus
    Balasan
    1. Christanty Putri Arty19 Mei 2014, 11.45.00

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

      Hapus
  14. Lidya Fitrian5 Mei 2014, 12.56.00

    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. Christanty Putri Arty19 Mei 2014, 11.46.00

      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. Moocen Susan19 Mei 2014, 06.41.00

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

    BalasHapus
    Balasan
    1. Christanty Putri Arty19 Mei 2014, 11.48.00

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

Langganan: Posting Komentar (Atom)
Template by Blogger Perempuan | Icon by Freepik