SELAMAT DATANG & SELAMAT MENIKMATI BLOG INI

Kamis, 27 Desember 2012

Tip Sederhana Membuat Menu Menarik Dengan Spoiler


SPOILER
Kali ini saya men-share-kan pengalaman saya tentang penggunaan Spoiler di blog Pandawa Lima ini. Mungkin kalau sohib mencarinya dengan search engine seperti google ataupun yahoo,  sudah barang tentu akan banyak sohib dapatkan informasi ataupun postingan mengenai Spoiler ini. Dan salah satu sohib Pandawa Lima yaitu Mulkan hanim ada menanyakan hal tersebut. Dan baru hari ini bisa saya mem-posting Tip Sederhana Membuat Menu Menarik Dengan Spoiler. Semoga bisa bermanfaat buat semua orang terutama sohib Pandawa Lima

Spoiler adalah sebuah kolom yang bisa dibuka dan ditutup serta ada border atau garis yang membentuk kolom. Fungsinya adalah sama seperti fungsi scroll yang bertujuan untuk menghemat ruang halaman saat memposting gambar atau tulisan yang banyak sehingga terlihat tertata dan rapi. Bisa sohib lihat contohnya pada menu BANER SOHIB di footer blog Pandawa Lima ini.


Berikut ini cara membuatnya :

1. Login Ke blog sohib
2. Klik Rancangan / Design
3. Klik Tambah gadget
4. Klik html / javascript
5. Lalu Copy paste kode di bawah ini

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>BANNER SOHIB</b>: <input value="TAMPILKAN" style="margin: 0px; padding: 0px; width: 70px; font-size: 11px;" onclick="if (this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39;Close&#39;; } else { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39;TAMPILKAN&#39;; }" type="button" />
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">

Isikan kode, script, HTML atau Teks anda disini..

<br>
</div>
</div>
</div>


Keterangan:
1. Tulisan BANNER SOHIB adalah judul,bisa ganti sesuai keinginan Sohib
2. Tulisan yang berwarna biru bisa sohib ganti sesuai dengan tulisan/scrip yang ingin sohib masukkan pada kolom bagian dalam spoiler.

Contohnya :
Contoh Spoiler dalam keadaan tertutup

Contoh Spoiler dalam keadaan terbuka

Semoga bermanfaat ya..
PANDAWA LIMA

sumber :
http://kumboyono-software.blogspot.com

86 komentar:

  1. Terima kasih sobat atas postingannya ..sangat membantu saya.

    BalasHapus
    Balasan
    1. terima kasih juga atas supportnya ya sohib...

      Hapus
    2. sayang bgt contohnya pake image :)
      coba contohnya yg lbh real pasti gak penasaran jdnya.. hehe..



      [ Gabung yuk ke Direktori Backlink Gratis Berkualitas No.1 Indonesia ]

      Hapus
    3. Sayangnya Mbak sweatangel ini gak baca sampai habis postingan saya ini dan oo kamu ketahuan.. kalo cuma lihat sekilas doang. kecian deh....
      Btw, terima kasih sudah berkunjung

      Hapus
  2. ini sangat cocok utk template yg sederhana. sangat membantu proses loading. mksh share nya kang

    BalasHapus
    Balasan
    1. Yup, terima kasih juga atas supportnya ya...

      Hapus
  3. Wah mantap sekali sobat, ijin sedot utk persiapan yah
    terima kasih sudah berbagi

    BalasHapus
    Balasan
    1. Terima kasih juga atas supportnya ya Om...

      Hapus
    2. sama sama sahabatku, yang jelas ini sangat bermanfaat buat menambah wawasan saya
      terima kasih kembali sahabatku

      Hapus
  4. wah jadi seperti forum dunk pake spoiler.. keren deh,,, sukses selalu masbro

    BalasHapus
    Balasan
    1. Sama-sama sukses ya sohib..
      Btw, terima kasih juga atas supportnya ya...

      Hapus
  5. Mantef banget nih bang,sayang jauh nih bang kalo dekat bisa juga gabung kita buat liburan bareng..hahahahyyy..moga selamat berangkat dan pulangnya jangan lupa oleh2nya ya bang Twong..hahahahyyy

    BalasHapus
    Balasan
    1. wah.. Makasih atas niat baik dan do'anya ya bg Icah....

      Hapus
    2. Bang kalo masalah Adsense saya kasih saran ke abang agar membuat artikel yang bahasa inggris biar hasil kopi paste namun abang rubah sedikit minimal abang bikin 12 artikel,coba abang liat diblog dummy saya ini http://hajinorman.blogspot.com

      Hapus
    3. Wow.... Tp gak pake koprol ya bg Icah...hehehehe
      Mantap neh... Makasih banget atas pencerahnnya ya.

      Hapus
  6. terimakasih tutornya sob,keren nih boleh dicoba juga.

    BalasHapus
    Balasan
    1. selamat mencoba dan semoga berhasil..
      Btw, terima kasih juga atas supportnya ya...

      Hapus
  7. blogwalking sobatku :D :D :D

    http://www.cheathelps31.com/deus-ex-human-revolution-1-4-651-0-steam-19-trainer/

    BalasHapus
    Balasan
    1. Terima kasih atas kunjungannya ya sohib, segera berkunjung balik nih...

      Hapus
  8. keren tips y gan :>



    http://your-income-solution.blogspot.com/2013/01/wisbuxcom-terobosan-baru-ptc-anak.html

    BalasHapus
    Balasan
    1. Semoga bermanfaat ya..
      Btw, Terima kasih atas kunjungannya ya sohib

      Hapus
  9. mantap tenan iki.. saiia Ctrl+D dulu kang iia.. :)

    Ikhlas - The Secret

    BalasHapus
    Balasan
    1. Semoga bermanfaat ya .
      Btw, makasih juga atas supportnya ya sohib...

      Hapus
    2. saiia kebetulan lewat.. ngeliad dari luar.. mampir dee sambil bawa es teh manis kang.. :)

      betewe... itu kartun/animasi/ilustrasi para pandawa nya keren banged kang.. dimana nyarinya iia?!?? hmm... baru tau saiia ada yg kek gitu.. ;(

      Belajar Photoshop

      Hapus
    3. Wah, gak bawakan yg punya rumah? hehehe..
      Mengenai gambar Para Pandawa itu saya comot dari website kompasiana.com. Dan nama-namanya saya yang pasang, karena saya sekeluarga merupakan keluarga yg mirip Pandawa Lima. 5 saudara laki2 kandung satu Ibu & Ayah dan 1 saudara laki2 kandung 1 ayah lain Ibu. (mirip benar kan seperti cerita Pamdawa Lima aslinya)...

      Hapus
  10. kunjungan di hari minggu, sambil baca-baca...

    BalasHapus
    Balasan
    1. Terima kasih atas kunjungan dan supportnya ya sohib...

      Hapus
  11. Sudah lama tidak berkunjung ke blog ini, maklum sibuk di dunia nyata. hehehe btw izin nyobain mas, ini info penting banget buat saya yang masih baru belajar ini. heheheh

    BalasHapus
    Balasan
    1. Semoga bermanfaat ya and makasih juga atas supportnya..

      Hapus
  12. Balasan
    1. gak pakai koprol kan?,,.. Btw, makasih atas supportnya ya...

      Hapus
  13. met siang sobat sembari baca postingan yang menarik untuk di praktekan hehehe mksh 4share

    BalasHapus
    Balasan
    1. Semoga bermanfaat ya..
      Btw, makasih juga atas supportnya..

      Hapus
  14. kunjungan perdana mas...follow dan komentar telah sukses d lakukan...d tunggu kunjungan baliknya :D

    BalasHapus
    Balasan
    1. Terima kasih atas supportnya ya, btw, segera ke TKP memenuhi undangan sohib..

      Hapus
  15. menarik juga tu...boleh difikirkan thanks ya

    BalasHapus
    Balasan
    1. Tq atas supportnya ya Mbak Sohib.. Btw, jangan lama2 mikirnya, ntar kematangan dan akhirnya jadi rusak deh...

      Hapus
  16. Balasan
    1. terima kasih juga atas supportnya ya sohib...

      Hapus
  17. Balasan
    1. Silahkan sohib, semoga bermanfaat ya..
      Btw, terima kasih juga atas supportnya ya...

      Hapus
  18. ada banner saya ya kakak :D :D
    ,

    oya maju terus blognya eehh maksutnya update terus :D
    .

    BalasHapus
    Balasan
    1. Yup, kan keren tuh...
      Btw, terima kasih atas motivasi dan supportnya ya ...

      Hapus
  19. Terimakasih sob udah share tips sederhananya semoga bermanfaat...happy blogging...!!

    BalasHapus
    Balasan
    1. Terima kasih juga atas supportnya ya sohib...

      Hapus
  20. Weys mantap tips nya, boleh aku coba ya... gratis kan?

    BalasHapus
    Balasan
    1. Gratis kok sohib..
      Btw, memangnya selama ini selalu bayar ya?

      Hapus
  21. nice post...Tutor yang mudah dan simple..!!

    dicoba dulu gan...

    BalasHapus
  22. wah mantab sob.. jadi kelihatan lebih menarik ya sob.. tengkyu..

    BalasHapus
  23. Mantap ilmunya bang...
    dan tidak pelit untuk berbagi ilmu...
    semoga sukses blognya bang..

    BalasHapus
  24. Makasih sob infonya, saya malah baru tahu :D
    Maap saya baru nongol lagi

    BalasHapus
    Balasan
    1. Semoga bermanfaat ya sohib..
      Btw. terima kasih juga atas support & kunjungannya ya...

      Hapus
  25. berkunjung siang bang,,trimakasih tutornya good job

    BalasHapus
  26. thanks tipsnya. di tunggu kunjungan baliknya gan

    BalasHapus
    Balasan
    1. Yup, makasih atas supportnya ya sohib. Segera ke TKP

      Hapus
  27. wah bikin spoiler yah..
    mantep nih bisa buat menghemat ruang di blog,makasih sob :)

    BalasHapus
    Balasan
    1. Sama sama sohib... Btw, terima kasih juga atas supportnya ya...

      Hapus
  28. Mantap sob...!

    kunjungan rutin...!

    http://khaeseven.blogspot.com/

    BalasHapus
    Balasan
    1. terima kasih juga atas supportnya.
      Segera berkunjung ke blog sohib nih...

      Hapus
  29. wuihhhh...tips yang mak nyus banget bang.... tak simpen dlu ntr diaplikasikan mas....semangatttt

    BalasHapus
    Balasan
    1. yup. silahkan sohib.. Semoga bermanfaat ya..

      Hapus
  30. Bikin koneksi lemot atau tidak sob?
    Makasih infonya :D

    BalasHapus
    Balasan
    1. Tergantung apa yang mau isi dalam widgetnya sohib..
      Btw, terima kasih juga atas supportnya ya..

      Hapus
  31. informasi yang menarik.. cuma belum sempet mau nerapin di blog ku.
    Oh ya sampean Punto Dewo ya...

    BalasHapus
  32. muanteb banget mas...jadi menarik kalo dikasih spoiler gtu ya

    BalasHapus
    Balasan
    1. Yup, botul kata orang Medan
      Btw, semoga bermanfaat ya sohib...

      Hapus
  33. wow keren.... bagus banget mas

    BalasHapus
  34. Tidak Basi juga menurut saya om, hehehe.. lanjutkan om :*

    BalasHapus
  35. Belum basi min, masih anget-anget ko

    BalasHapus

Silahkan berkomentar menggunakan hati nurani dan tidak mengandung SARA, SEX dan POLITIK"