Ads (728x90)

Latest Post

Kesehatan

Tips






1. Log in to your dashboard--> layout- -> Edit HTML

2. Click on "Expand Widget Templates"

3. Search "Ctrl+F" and find </head>.

4. Before </head> add next code:

<script src='http://descarca.googlecode.com/files/jquery.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){

$(&quot;.menu2 a&quot;).append(&quot;<em/>&quot;);

$(&quot;.menu2 a&quot;).hover(function() {
$(this).find(&quot;em&quot;).animate({opacity: &quot;show&quot;, top: &quot;50&quot;}, &quot;slow&quot;);
var hoverText = $(this).attr(&quot;title&quot;);
$(this).find(&quot;em&quot;).text(hoverText);
}, function() {
$(this).find(&quot;em&quot;).animate({opacity: &quot;hide&quot;, top: &quot;50&quot;}, &quot;fast&quot;);
});


});
</script>

5. Search for ]]></b:skin> and before it paste the next code:

<style type="text/css">
body {
margin: 10px auto;
width: 570px;
font: 80%/120% Arial, Helvetica, sans-serif;
}
.menu2 {
margin-left: 315px;
padding-bottom: 31px;
list-style: none;

}
.menu2 li {
padding: 0;
margin: 0 2px;
float: left;
position: relative;
text-align: center;
}
.menu2 a {
padding: 14px 10px;
display: block;
color: #000;
width: 135px;
text-decoration: none;
font-weight: bold;
background: url('http://img443.imageshack.us/img443/3980/buttony.gif') no-repeat center center;
}
.menu2 li em {
font-weight: normal;
background: url('http://img443.imageshack.us/img443/5159/hovermenuitem.png') no-repeat;
width: 135px;
height: 45px;
position: absolute;
top: 85px;
left: 0px;
text-align: center;
padding: 20px 12px 10px;
font-style: normal;
z-index: 2;
display: none;
}
</style>

You can change the widht height, padding etc. values according to your needs.

6. Search for <div id='art-main'> and before it paste the next code:

<<ul class='menu2'>
<li>
<a href='http://www.artistutorial.co.cc' title='Go to homepage'> Home</a>
</li>
<li>
<a href='http://www.artistutorial.co.cc/about/' title='Find out who I am'>About</a>
</li>
<li>
<a href='http://feeds.feedburner.com/Artistutorial' title='Subscribe RSS feeds'>Subscribe RSS</a>
</li>

</ul>

Save the template and your done.

 DEMO

Post a Comment