Hover Boxes

Tutorial by Unzo - http://unzo.tumblr.com/

01- Paste the following code before "<style type="text/css">" in your HTML code (ctrl+f to search)

<link rel="stylesheet" href="http://static.tumblr.com/kjtbii3/0hEn3de7f/boxes.css">

<meta name="text:Favorites Box Size" content="100"/>

----------------------------------------------------------------------------------------------------

02- Paste before "</style>" the following code

.unzo{
    top:30px;
    right:10px;
}

#statstab, #musictab, #favestab{
    background:white;
    border:1px solid #efefef;
}

#favestab:hover{
    height:{text:Favorites Box Size}px;
}

----------------------------------------------------------------------------------------------------

03- Paste under "<body>" the following code

<div class="unzo">

<div id="statstab">
<div class="tabcontent">
<div class="tabtitle">Stats</div>

<div id="stats">

COUNTERS

</div>

</div>
</div>


<div id="musictab">
<div class="tabcontent">
<div class="tabtitle">Music</div>

<div id="music">

PLAYER

</div>

</div>
</div>


<div id="favestab">
<span class="title">Favorites</span>

<!-- Link --->
<br>
<a target="blank" title="TITLE ON HOVER" href="URL">LINK TITLE</a>
<!-- Link end --->

</div>

</div>

----------------------------------------------------------------------------------------------------

04- Update Preview -> Save. Refresh the page.

----------------------------------------------------------------------------------------------------

05- In your "Appearance" section you will see an option to customize the height of Favorites Box.

Favorites Box Size (Change the value to resize when you hover over the mouse)

----------------------------------------------------------------------------------------------------

06- Customize it, then save and done!

PS. In the step "03-" customize the content of the boxes.
    If you want to add more links on Favorites Box just copy and paste "Link" to "Link end".