Macam - macam Spoiler menu show / hide

Belajar SEO dan Blog Bagi pemula
Masih di Variasi Blogger share Macam - macam Spoiler menu show / hide cekidot Silahkan sobat pilih dan Copy Paste script di bawah ini simpan di blog sobat

<style type="text/css"> #headerDiv, #contentDiv { float: left; width: 510px; } #titleText { float: left; font-size: 1.1em; font-weight: bold; margin: 5px; } #myHeader { font-size: 1.1em; font-weight: bold; margin: 5px; } #headerDiv { background-color: #0037DB; color: #9EB6FF; } #contentDiv { background-color: #FFE694; } #myContent { margin: 5px 10px; } #headerDiv a { float: right; margin: 10px 10px 5px 5px; } #headerDiv a:hover { color: #FFFFFF; } </style> <script language="javascript"> function toggle2(showHideDiv, switchTextDiv) {  var ele = document.getElementById(showHideDiv);  var text = document.getElementById(switchTextDiv);  if(ele.style.display == "inline") {       ele.style.display = "none";   text.innerHTML = "<img src='http://i1187.photobucket.com/albums/z389/RICKY_ALDIYANSYAH/plus.gif'/>";    }  else {   ele.style.display = "inline";   text.innerHTML = "<img src='http://i1187.photobucket.com/albums/z389/RICKY_ALDIYANSYAH/minus.gif'/>";  } } </script> <body> <div ;="" style="width: 550px;"> <fieldset> <legend>Judul Spoiler 1</legend> <div id="headerDiv"> <div id="titleText"> Judul Spoiler 2 =&gt;</div> <a href="javascript:toggle2('myContent','myHeader');" id="myHeader"><img src="http://i1187.photobucket.com/albums/z389/RICKY_ALDIYANSYAH/plus.gif" /></a></div> <div style="clear: both;"> </div> <div id="contentDiv"> <div id="myContent" style="display: none;"> DI SINI ISI SPOILER ( BISA IMAGE, JAVASCRIPT DLL ) </div> </div> </fieldset> </div> </body><small><center><a href="http://variasiblogger.blogspot.com/2012/04/macam-macam-spoiler-menu-show-hide.html" target="_blank">Get-Widget-Blog</a></center></small>

<div><div style="margin: 5px;"> <div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Judul Spoiler</span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; " 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/> </div> <div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"> <div style="display: none;"> DI SINI ISI SPOILER ( BISA IMAGE, JAVASCRIPT DLL ) </div></div></div></div><small><center><a href="http://variasiblogger.blogspot.com/2012/04/macam-macam-spoiler-menu-show-hide.html" target="_blank">Get-Widget-Blog</a></center></small>

<br /><div> <input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'LIHAT LAGI'; }" type="button" name="button" value="BUKA" /></div> <div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;"> <div style="color: #000000; background: none repeat scroll 0% 0% #ebf3fb; border: 1px solid #aaccee; padding: 7px; margin: 0px;"> LETAKKAN KODENYA DISINI</div> <div id="hide"> </div> </div><small><center><a href="http://variasiblogger.blogspot.com/2012/04/macam-macam-spoiler-menu-show-hide.html" target="_blank">Get-Widget-Blog</a></center></small>

Silahkan edit kembali kode script di atas sesuai variasi spoiler yang sobat inginkan , Oia sobat untuk melihat Contohnya seperti apa bisa klik DEMO , semoga bermanfaat


Share to

9 Responses to "Macam - macam Spoiler menu show / hide"

  1. sip kang.. kadang perlu juga nih spoiler untuk gambar :D

    BalasHapus
  2. mau nanya ah sama senior,
    spiler tuh apa sob?
    terus bisa di pake buat apa aja di blog?

    BalasHapus
    Balasan
    1. waduh senior, masih belajar kok sob aku juga hehehe... spoiler tuh buat simpen kode script,gambar,widget dll.. begitulah hehehe.. :D

      Hapus
  3. wah share yg sangat oke mantab.

    BalasHapus
  4. Anonim04:59

    bagus2 sob spoilernya,
    alhamdulillah saya sudah pake ,,,

    wilujeng ngeblog

    BalasHapus
  5. wah makash sob ats infonya. . nicepost. ditunggu kunjungan baliknya. :-)

    BalasHapus
    Balasan
    1. semoga bermanfaat sob, ya saya pasti berkunjung balik ke websitenya sobat hehehe.. :)

      Hapus

Jika ada Tutorial Info Blog Indonesia ini, yang kurang dimengerti silahkan luangkan saja waktu anda untuk berkomentar, karena pertanyaan anda sangat berharga untuk perkembangan dan kemajuan blogs ini.

Soalnya diblogs ini adalah wadah untuk belajar mengenal webs/blogs, disini kita sama - sama belajar, seandainya anda adalah seorang pakar blogger profesional atau pakar seo indonesia bimbinglah saya, untuk menulis artikel berkualitas.

Oia sebelum menyisipkan script silahkan gunakan tools konversi terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar.

Terimakasih.. salam kenal dan salam hangat untuk blogger indonesia, yang selalu setia di Info blog Indonesia variasi blogger.

¯\(◕ ‿◕)/¯



convert TOS

Panduan, Bimbingan Cara Belajar Blogs dan Seo