Maluko Design©: Tutorial - Como Colocar CatNav no Blog

Avalie:

Author: ..::Igor::..

Categorias: Truques

Email

Meu Site: Create Evolution

Add No Twitter

Tutorial - Como Colocar CatNav no Blog

Bom Galera venho aqui hoje postar esse tutorial e eu uso aqui na Create Evolution

Para quem nao sabe o CatNav e Uma Luz Sobre o Menu !

Bom Vamos Começar Va no Painel do Seu Blogger Aperte Crtl+F e localize a Seguinte Tag ]]></b:skin> e cole acima esse codigo:

/* Começo.Catnav */
.catnav {
position: relative;
background: none;
height: 76px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
padding-left: 10px;
margin:10px 0px 0 0px;
margin:auto;
overflow: hidden;
}
.catnav li {
float: left;
list-style: none;
top: 22px;
}
.catnav li.back {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr5d1kc-EqEmpPCYM2T_YUSSOjvzUQGBQ6n3bi6ydmZfurKdpRlaR7bM4BrQt0svFPBW20zquBmcUEyubR-n4ZYE0HJ_WQKGSvi6Qss6y-zGAkq98zSVSYUEAOvgU6u-kCHk7ywVBRXPg/s1600/catnav.png) no-repeat right -38px;
width: 9px; height: 38px;
z-index: 8;
position: absolute;
}
.catnav li.back .left {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr5d1kc-EqEmpPCYM2T_YUSSOjvzUQGBQ6n3bi6ydmZfurKdpRlaR7bM4BrQt0svFPBW20zquBmcUEyubR-n4ZYE0HJ_WQKGSvi6Qss6y-zGAkq98zSVSYUEAOvgU6u-kCHk7ywVBRXPg/s1600/catnav.png) no-repeat top left;
height: 38px;
margin-right: 7px;
}
.catnav li a {
font:bold 12px tahoma !important;
color:#000 !important;
text-shadow: #ccc 1px 1px;
outline: none;
text-align: center;
top: 28px;
z-index: 10;
display: block;
float: left;
height: 30px;
position: relative;
overflow: hidden;
padding:3px 15px 10px 15px;
margin: auto 0px;
}
.catnav li a:hover, .catnav li a:active, .catnav li a:visited {
border: none;
}
/* Final.Catnav*/

E agora Procure por </head> e acima cole esse codigo

<script src='http://matheuss-files.webs.com/script.js' type='text/javascript'/>
<script src='http://matheuss-files.webs.com/jquery-1.2.3.min.js' type='text/javascript'/>
<script src='http://matheuss-files.webs.com/jquery.easing.min.js' type='text/javascript'/>
<script src='http://matheuss-files.webs.com/menu%20lavamp.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[/*
$(function() { $("#1, #2, #3").lavaLamp({ fx: "backout", speed: 700, click: function(event,menuItem) { return true;}});});
//]]>
</script>

e por Ultimo coloque esse codigo abaixo de <body>

<ul class='catnav' id='1'>
<li class='current'><a href='URL PRIMEIRO LINK'>NOME DO PRIMEIRO LINK</a></li>

<li><a href='URL SEGUNDO LINK'>NOME DO SEGUNDO LINK</a></li>
<li><a href='URL TERCEIRO LINK'>NOME DO TERCEIRO LINK</a></li>
<li><a href='URL QUARTO LINK'>NOME DO QUARTO LINK</a></li>
<li><a href='URL QUINTO LINK'>NOME DO QUINTO LINK</a></li>
<li><a href='URL SEXTO LINK'>NOME DO SEXTO LINK</a></li>
</ul>

Tutorial - Como Colocar CatNav no Blog

0 comentários