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
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
<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 =></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
sip kang.. kadang perlu juga nih spoiler untuk gambar :D
BalasHapusiya sob betul :)
Hapusmau nanya ah sama senior,
BalasHapusspiler tuh apa sob?
terus bisa di pake buat apa aja di blog?
waduh senior, masih belajar kok sob aku juga hehehe... spoiler tuh buat simpen kode script,gambar,widget dll.. begitulah hehehe.. :D
Hapuswah share yg sangat oke mantab.
BalasHapussemoga bermanfaat sob :D
Hapusbagus2 sob spoilernya,
BalasHapusalhamdulillah saya sudah pake ,,,
wilujeng ngeblog
wah makash sob ats infonya. . nicepost. ditunggu kunjungan baliknya. :-)
BalasHapussemoga bermanfaat sob, ya saya pasti berkunjung balik ke websitenya sobat hehehe.. :)
Hapus