• Edyn Laskar
  • Bandar Bloger
  • Contact
  • Daftar isi

Edyn Laskar

Technology, SEO, Blogger

  • Edyn Laskar
  • Daftar isi
  • Follow Blog
  • Blogger
    • Mengatasi Error OpenID
    • Tips SEO
    • Tips Blog Baru
    • Komentator Blog
  • Bitcoin
    • Mining Bitcoin
    • Trik Bitcoin
    • Trik Mirbox
    • Tips Cari Referral
    • Hack Bitcoin
    • Software Bitcoin
  • Tukar Link
  • BTC Mirbox
Home » Blogger » Cara Membuat Spoiler dengan Scroll di Blog

Cara Membuat Spoiler dengan Scroll di Blog

Unknown
28 Comments
Blogger
Wednesday, June 13, 2012

Cara Membuat Spoiler dengan Scroll di Blog

Spoiler merupakan salah satu fitur diblog maupun wordpress yang memiliki fungsi selain Merapikan tulisan, kode atau gambar pada postingan juga membuat blog makin menarik. Spoiler yang akan kita pasang tidak hanya bisa dipasang pada postingan tapi bisa jg dipasang pada widget2 sidebar/footer. Cara Membuat spoiler tentu sudah banyak dibahas pada blog-blog master, tapi gak ada salahnya kita bahas lagi sebagai penyegaran kembali.. terutama admin blog Technology is Informatica ini.

Tampa berlama-2 marih segarkan kembali otak anda... :

  1. Cara membuat Spoiler dengan Scroll :

    Copy skript berikut dan tempel pada postingan/widget anda.
  2. <div style="margin: 3px;"> <div class="bigfont" style="margin-bottom: 2px;"> <input 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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div') [1].getElementsByTagName('div') [0].style.display = 'none'; this.innerText = ''; this.value = 'Lihat lagi dong !!!'; }" style="margin: 0px; padding: 0px; width: 240px;" type="button" value="Hasil spoiler" /> </div> <div class="alt2" style="border: 0px inset; margin: 0px; padding: 0px;"> <div style="display: none;"> <center><div style="border: 1px solid #0F0; height: 200px; overflow: auto; padding: 10px; width: 250px;"> Disini tempat text atau link gambar </div> </center> </div> </div> </div>
    Disini tempat text atau link gambar
    NB : warna merah adalah lebar dan nama button spoilernya. warna hijau adalah tinggi dan lebar spoilernya. silahkan ganti sesuai kebutuhan sobat.
  3. Cara membuat spoiler biasa atau tampa scroll

    Copy skript berikut dan tempel pada postingan/widget anda.
  4. <div style="margin: 3px;"> <div class="bigfont" style="margin-bottom: 2px;"> <input 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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div') [1].getElementsByTagName('div') [0].style.display = 'none'; this.innerText = ''; this.value = 'Lihat lagi dong !!!'; }" style="margin: 0px; padding: 0px; width: 240px;" type="button" value="Hasil spoiler" /> </div> <div class="alt2" style="border: 0px inset; margin: 0px; padding: 0px;"> <div style="display: none;"> <center><div style="border: 1px solid #000; overflow: auto; padding: 10px; width: 80%;"> Disini tempat text atau link gambar </div> </center> </div> </div> </div>
    Disini tempat text atau link gambar

Sekian Tutorial cara membuat Spoiler dengan Scroll diBlog Semoga bermanfaat sebagai penyegaran kembali.

"saya hanyalah manusia biasa yang tidak pernah luput dari kesalahan. jika ada kesalahan dalam tutorial yang saya bahas sesungguhnya itu asalnya dari saya pribadi dan yang benar itu datangnya dari sang pemilik kebenaran."


Edyn Laskar

Cara Membuat Spoiler dengan Scroll di Blog
Tweet

28 komentar

Tambah komentar
avatar
Reply
Unknown Author delete 13/6/12 7:20 PM

keren sob tips nya,,makasih udah share...

avatar
Reply
Yusa delete 13/6/12 7:35 PM

Main main kesini dong bang. :) Aku sudah follow back gan

avatar
Reply
Edyn Laskar delete 14/6/12 1:13 AM

pasti sob... makasi udah berkunjung...
saya jg sudah follback..

avatar
Reply
Edyn Laskar delete 14/6/12 1:16 AM

Sama-2 sob smoga bisa menyegarkan kembali...

avatar
Reply
d3no delete 15/6/12 9:00 PM

wah keren tutorialnya, makasih ilmunya

avatar
Reply
Technology is Informatica delete 16/6/12 1:41 AM

Sama2 gank... ditunggu kunjungan baliknya...

avatar
Reply
Nurfani delete 18/6/12 5:43 AM

Baru ngerti bos ane hehehe :)

avatar
Reply
Nurfani delete 18/6/12 5:45 AM

Baru tahu ane gan hehehe.

avatar
Reply
Unknown Author delete 18/6/12 8:48 AM

Wih keren gan

happy blogwalking:
nidusmays.blogspot.com

avatar
Reply
Edyn Laskar delete 20/6/12 12:15 AM

Jangan sungkan2 tuk mampir kembali...

avatar
Reply
mitha delete 14/9/12 9:13 AM

makasih ya

avatar
Reply
Unknown Author delete 17/9/12 11:07 PM

terima kasih gan tutorialnya, kunjungi juga blog ane di http://ermawatisweet.blogspot.com

avatar
Reply
bencho citty delete 27/9/12 9:37 PM

sip bgt....mantab sob

avatar
Reply
Edyn Laskar delete 27/9/12 9:40 PM

@SOERATNO Makasi sob sudah berkunjung....

avatar
Reply
ViperGoy delete 1/10/12 11:14 PM

Thanks Infonya gan^^

avatar
Reply
Guru Pantura delete 18/10/12 12:41 PM

Kunjungan perdana pak,
Apakah dengan pemasangan spoiler ini bisa meringankan load gambar/widget yang ditaruh di dalamnya??
Maklum pak masih newbie :D

salam,

avatar
Reply
Edyn Laskar delete 18/10/12 3:27 PM

@Guru Pantura Betul sekali pak,,, seperti yg saya habahas diatas, selain membuat penamilannya menarik, tidak banyak makan tempat,, juga membuat loading blog semakin ringan,,, Bapak bisah mencobanya diblog sendiri,,,
Terimakasi sudah berkunjung pak....

avatar
Reply
Staff Administrator delete 18/10/12 11:42 PM

Wah..blm pernah coba pasang ni sob... :)
Mantapp nih..baru tau caranya :)
Trims ya udh berbagi :)

avatar
Reply
Edyn Laskar delete 19/10/12 12:27 AM

@budi os 19 sama-sama sob...

avatar
Reply
Unknown Author delete 14/11/12 7:52 AM

Ini yang lagi aku cari mkasih bgt ya....

avatar
Reply
Unknown Author delete 15/11/12 3:59 AM

sama-sama,,, semoga bisa membantu...

avatar
Reply
adit delete 15/12/12 4:47 PM

Terima kasih mas, postingan nya sangat bermanfaat,

avatar
Reply
lovely delete 22/1/13 4:09 PM

ini yang ku cari.. thanks ya sdah berbagi

avatar
Reply
Unknown Author delete 22/1/13 5:03 PM

@adit Sama-sama sob, makasih atas kunjungannya...

avatar
Reply
Anonymous delete 22/1/13 5:07 PM

@lovely Sama-sama, thanks juga yah udah berkunjung...

avatar
Reply
Haikal Sulaiman delete 10/3/13 9:23 PM

kapan2 ane coba Bos

avatar
Reply
Edyn Laskar delete 10/3/13 9:52 PM

@Haikal Sulaiman iya, silahkan sob...

avatar
Reply
Anonymous delete 10/3/13 10:29 PM

kereen ..
apalagi spoiler yg paling bawah tuh ..
ada foto model'a. xixi

Berkomentarlah dengan baik dan bijak.
Not Spam !!!, Not Living Links !!!

Thanks For Your Comment Here
← Newer Post Older Post → Home
Subscribe to: Post Comments (Atom)

Info Admin

Copyright 2014 Edyn Laskar - All Rights Reserved
Re-Design by Edyn Laskar - Powered by Blogger