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
More about → Macam - macam Spoiler menu show / hide
<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