Spoiler Widget For Blogger And WordPress

When your widget at sidebar full or looks crowded, so maybe there is two options, you can remove some of them, or moving to footer. Both options are not good. But if you can put some of them in the spoiler, may be can be better.

Spoiler is useful for hiding or wrap some content into a button, for example like this :
+[show]

and of course you can change the button or background styles because spoiler is drive by Javascript and CSS.

Ok to create spoiler on your WordPress or Blogger widget, follow these step:
Put these code inside your header:

<script language="javascript">
function show(obj)
{
        var x = document.getElementById(obj);
        if (x.style.visibility == "hidden") {
                x.style.display = "block";
                x.style.visibility = "visible";
        }
        else{
                x.style.display = "none";
                x.style.visibility = "hidden";
        }
}
</script>
<!– css below can inserted into your css file –>
<style type="text/css">
.Spoiler_Title{ background:#D9D9D9; cursor:pointer; width:200px; border:inset 1px;}
.Spoiler_Content{background:#F5F5F5; font-size:kecil; font-style:italic; display:none}
.kecil {font-size: small}
</style>

Look At Some Options There

.Spoiler_Title{ background:#D9D9D9; cursor:pointer; width:200px; border:inset 1px;}
You can change background, width of spoiler button and border size

.Spoiler_Content{background:#F5F5F5; font-size:kecil; font-style:italic; display:none}
Here you can customize what looks like the content of spoiler (background, font size, font style)

Now we start to displaying spoiler, put these code on your widget:

<div class="Spoiler_Title" onclick="show(’YourSpoiler’);">
Type the spoiler title here, some html is allowed
<div id="YourSpoiler" class="Spoiler_Content">
This is content of spoiler, you can put in html or javascript language, for example ads, or your shoutbox
</div>

Sample:

Notes: “This is not only for WP and Blogger, but work in others content platform”

Let me know if you have any questions.

Related posts:

1. Paypal Transaction Fees Calculator Widget
2. Linkadage Code Not Detected In WordPress
3. Monetize Your Blogger Account With Amazon Associates Now Easier