Saturday, June 20, 2009

Clear space on blogger page

Practically, too much gadgets (much more than the height of web page) look very ugly.

The simplest way to save space is remove gadgets that actually never used by users.

For example, If you are really doesn't need followers, and satisfied with people, who found you through search engine, than you don't need funny followers gadget, that actually makes page ugly.

Another way is making some blocks invisible, until users really need them.

On the right of this blog, there is the string "[+]unhide my info".

If the reader of the blog really need info, he can click and unfold this information.
All information from list or text gadget could be packed there.

How to make existing text and list packed into html/javascript box foldable (hidden)?

For my case, I just enveloped the existing text in following HTML/javascript code:


<div id="div_contacts" onmouseover=
"javascript:div_contacts.style.cursor=pointer;"
style="color:#0000FF;cursor:pointer;cursor:hand" onclick=
"javascript:switch_direction()
"><b>[+] unhide my info and legal notice</b></div><
span id="my_contacts" style="display:none">
<pre>
<b>

your text/list/links there

</b>

</span>

<script type="text/javascript">
function switch_direction(direction)
{
var val = document.getElementById("div_contacts");
if(val.innerHTML=="<b>[+] unhide my info and legal notice</b>")
{
val.innerHTML="<b>[-] hide my info and legal notice<b>";
var val2=document.getElementById("my_contacts");
val2.style.display="";
}
else
{
val.innerHTML="<b>[+] unhide my info and legal notice</b>";
var val2=document.getElementById("my_contacts");
val2.style.display="none";
};
}
</script>


tested with firefox 3

No comments: