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:
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:
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:
