Menu suspenso com imagem para Blogger

Olá amigos Mult-focos, neste post trazemos mais uma ferramenta importante para seu blog, um prático menu suspenso com imagem para blogger.
Este menu ao passar o mouse destaca uma imagem correspondente ao link  contido em sua aba.
Veja a DEMO ao vivo.

DEMO

Para adiciona-lo em seu blog siga estes passos:  

>>acesse seu Blogger, vá em "Modelo" e depois "Editar HTML".
>>Clique no código de seu template, pressione "CTRL+F" e pesquise por
]]></b:skin>
>>Logo ACIMA desta tag cole o seguinte código:
 /*------------ CSS MENU SUSPENSO -----------*/
ul#navigation {
 position:fixed;
 margin:0px;
 padding:0px;
 top:0px;
 right:10px;
 list-style:none;
 z-index:999999;
 width:735px;
 font:normal 11px Arial,Sans-Serif;
 -webkit-animation:2s fxhompinav ease-in-out;
 -moz-animation:2s fxhompinav ease-in-out;
 -ms-animation:2s fxhompinav ease-in-out;
 animation:2s fxhompinav ease-in-out;
}


ul#navigation li {
 width:103px;
 display:inline;
 float:left;
 margin:0 0 0 2px;
}


ul#navigation li a {
 display:block;
 float:left;
 margin-top:-78px;
 width:100px;
 height:22px;
 background-color:#111;
 background-repeat:no-repeat;
 background-position:50% 150px;
 border:2px solid #e6e6e6;
 -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
 -moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
 box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
 -moz-border-radius:0px 0px 10px 10px;
 -webkit-border-bottom-right-radius:10px;
 -webkit-border-bottom-left-radius:10px;
 -khtml-border-bottom-right-radius:10px;
 -khtml-border-bottom-left-radius:10px;
 border-radius:0px 0px 10px 10px;
 color:#ccc;
 text-decoration:none;
 text-align:center;
 text-shadow:0 1px 1px #000;
 padding-top:85px;
 -webkit-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
 -moz-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
 -o-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
 transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
}


ul#navigation li a:hover {
 margin-top:-3px;
 background-position:50% 10px;
 color:#fff;
 position:relative;
}


ul#navigation li a:hover:after {
 content:"";
 width:0px;
 height:0px;
 position:absolute;
 top:100%;
 left:45%;
 margin-top:-10px;
 border-width:5px;
 border-style:solid;
 border-color:transparent transparent #e6e6e6 transparent;
}


ul#navigation li:nth-child(1) a {
 background-image:url(http://i1316.photobucket.com/albums/t609/Multfocos/Home_zps212fb161.png);
}
ul#navigation li:nth-child(2) a {
 background-image:url(http://i1316.photobucket.com/albums/t609/Multfocos/Blogger_zpsd73cb144.png);
}
ul#navigation li:nth-child(3) a {
 background-image:url(http://i1316.photobucket.com/albums/t609/Multfocos/Entretenimento_zps767fba69.png);
}
ul#navigation li:nth-child(4) a {
 background-image:url(http://i1316.photobucket.com/albums/t609/Multfocos/Sobre_zps7cd04e6c.png);
}
ul#navigation li:nth-child(5) a {
 background-image:url(http://i1316.photobucket.com/albums/t609/Multfocos/Conecte-se_zpsfc69aee3.png);
}
ul#navigation li:nth-child(6) a {
 background-image:url(http://i1316.photobucket.com/albums/t609/Multfocos/Contato_zps79327d90.png);
}
ul#navigation li:nth-child(7) a {
 background-image:url(http://i1316.photobucket.com/albums/t609/Multfocos/Sitemap_zpse264dd27.png);
}


@-webkit-keyframes fxhompinav {
 from{margin-right:-1000px;}
 to {margin-right:0px;}
}


@-moz-keyframes fxhompinav {
 from{margin-right:-1000px;}
 to {margin-right:0px;}
}


@-ms-keyframes fxhompinav {
 from{margin-right:-1000px;}
 to {margin-right:0px;}
}


@keyframes fxhompinav {
 from{margin-right:-1000px;}
 to {margin-right:0px;}
}

 

Agora pesquise por <body>
Logo ABAIXO desta tag cole o seguinte código:


 <nav>
<ul id='navigation'>
 <li><a href='LINK AQUI'>Home</a></li>
 <li><a href='LINK AQUI'>Blogger</a></li>
 <li><a href='LINK AQUI'>Entretenimento</a></li>
 <li><a href='LINK AQUI'>Sobre</a></li>
 <li><a href='LINK AQUI'>Conecte-se</a></li>
 <li><a href='LINK AQUI'>Contato</a></li>
 <li><a href='LINK AQUI'>Sitemap</a></li>
</ul>
</nav>

 
OBS: Copie e cole o código acima em um documento de texto, ante de adiciona-lo abaixo da tag

<body>

e faça as devidas alterações. isto irá facilitar seu trabalho. 
Bom pessoal isto é tudo.

0 comentários:

Postar um comentário

Todos comentários são lidos e moderados previamente.
São publicados apenas aqueles que respeitarem as regras abaixo:
-Ter relação com o assunto do post.
-Não conter propagandas de outro site ou blog.
-Não incluir links no conteúdo do comentário.
-Se quiser deixar sua URL, comente usando a opção OpenID;
Obrigado(a) por comentar!

free website hit counter