Spoiler Widget For Blogger And Wordpress

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:

Share To Facebook |

Tweet! This

Published on Thursday, 16 July 2009 | Category Web and Applications

Search another post that related to Spoiler Widget For Blogger And WordPress ? Using search form.

1 Comment. Leave Comment Or Trackback.

#1 • Date 22 June 2010, Wordpress Business Website said:

This is really a great idea. It will also help in the improvement of white space in your page. Using this will give you more spaces in your side bar. Thanks for sharing it.
Reply