Encontre outros modelos de Menus clicando AQUI
Veja um demo clicando no botão abaixo ou em Result no Box de códigos.
- Copie o código CSS do Box de códigos Vá ao painel do Blogger->modelo->editar HTML->use Ctrl+F e localize ]]></b:skin>
- Acima desta tag cole o código CSS
- Ir para o painel do blogger->layout
- Clique em Adicionar um Gadget.
- Na janela Adicionar um gadget->HTML/JavaScript.
- Copie o código HTML abaixo e cole-o dentro da caixa de conteúdo.
- Salvar o gadget. Arraste o gadget e reposicione-o onde você quer mostrá-lo.
- Clique no botão Salve (canto superior direito).
- No código HTML onde esta "AQUI URL" você deve substituir pela URL correspondente ao link desejado.
- Outras configurações são possíveis desde que saiba ex: cores, ícones, etc.
<ul id="navbt">
<li><a href="AQUI URL"><img src="https://lh4.googleusercontent.com/-rrMdnTRy6JM/VEt_u9whFiI/AAAAAAAAHw4/LoryXNGXGsk/s24-no/pagina%2Binicial%2B24x24.png" /> Página
Ínicial</a></li>
<li><a href="AQUI URL"><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHWmVIweTtn16omtCiLitSmH0ZAtidearPNOZZzs6SHsHVwyz3-6NXnwvqWj2pHGIhva6RZCZoXbWhpxV7btBLzxUjw31KYFdt9Nbz-jB5d3MBL5G6b1gxJyOxXyTCYmytmqv53bpcepzh/s24-no/Blogger-icon
%2B24x24.png" /> Blogger</span></a>
<div class="subs">
<div class="col">
<ul>
<li><a href="AQUI URL"><img src="https://lh4.googleusercontent.com/-DjHwGJAaFXI/VEuATEbZ2tI/AAAAAAAAHxk/f0gvNBwmgC8/s16-no/seta%2Bp%2B
%2Bdire%2B16x16.png" /> Link 1</a></li>
<li><a href="AQUI URL"><img src="https://lh4.googleusercontent.com/-DjHwGJAaFXI/VEuATEbZ2tI/AAAAAAAAHxk/f0gvNBwmgC8/s16-no/seta%2Bp%2B
%2Bdire%2B16x16.png" /> Link 2</a></li>
<li><a href="AQUI URL"><img src="https://lh4.googleusercontent.com/-DjHwGJAaFXI/VEuATEbZ2tI/AAAAAAAAHxk/f0gvNBwmgC8/s16-no/seta%2Bp%2B
%2Bdire%2B16x16.png" /> Link 3</a></li>
<li><a href="AQUI URL"><img src="https://lh4.googleusercontent.com/-DjHwGJAaFXI/VEuATEbZ2tI/AAAAAAAAHxk/f0gvNBwmgC8/s16-no/seta%2Bp%2B
%2Bdire%2B16x16.png" /> Link 4</a></li>
<li><a href="AQUI URL"><span><img src="https://lh4.googleusercontent.com/-DjHwGJAaFXI/VEuATEbZ2tI/AAAAAAAAHxk/f0gvNBwmgC8/s16-no/seta
%2Bp%2B%2Bdire%2B16x16.png" /> Sublinks</span></a>
<div class="subs">
<div class="col">
<ul>
<li><a href="AQUI URL"><img src="https://lh4.googleusercontent.com/-
DjHwGJAaFXI/VEuATEbZ2tI/AAAAAAAAHxk/f0gvNBwmgC8/s16-no/seta%2Bp%2B%2Bdire%2B16x16.png" /> Link 41</a></li>
<li><a href="AQUI URL"><img src="https://lh4.googleusercontent.com/-DjHwGJAaFXI/VEuATEbZ2tI/AAAAAAAAHxk/f0gvNBwmgC8/s16-no/seta%2Bp%2B%2Bdire%2B16x16.png" /> Link 42</a></li>
<li><a href="AQUI URL"><img src="https://lh4.googleusercontent.com/-
DjHwGJAaFXI/VEuATEbZ2tI/AAAAAAAAHxk/f0gvNBwmgC8/s16-no/seta%2Bp%2B%2Bdire%2B16x16.png" /> Link 43</a></li>
<li><a href="AQUI URL"><img src="https://lh4.googleusercontent.com/-
DjHwGJAaFXI/VEuATEbZ2tI/AAAAAAAAHxk/f0gvNBwmgC8/s16-no/seta%2Bp%2B%2Bdire%2B16x16.png" /> Link 44</a></li>
<li><a href="AQUI URL"><img src="https://lh4.googleusercontent.com/-
DjHwGJAaFXI/VEuATEbZ2tI/AAAAAAAAHxk/f0gvNBwmgC8/s16-no/seta%2Bp%2B%2Bdire%2B16x16.png" /> Link 45</a></li>
</ul>
</div>
<div class="col">
<ul>
<li><a href="AQUI URL"><img src="https://lh4.googleusercontent.com/-
DjHwGJAaFXI/VEuATEbZ2tI/AAAAAAAAHxk/f0gvNBwmgC8/s16-no/seta%2Bp%2B%2Bdire%2B16x16.png" /> Link 46</a></li>
<li><a href="AQUI URL"><img src="https://lh4.googleusercontent.com/-
DjHwGJAaFXI/VEuATEbZ2tI/AAAAAAAAHxk/f0gvNBwmgC8/s16-no/seta%2Bp%2B%2Bdire%2B16x16.png" /> Link 47</a></li>
<li><a href="AQUI URL"><img src="https://lh4.googleusercontent.com/-
DjHwGJAaFXI/VEuATEbZ2tI/AAAAAAAAHxk/f0gvNBwmgC8/s16-no/seta%2Bp%2B%2Bdire%2B16x16.png" /> Link 48</a></li>
<li><a href="AQUI URL"><img src="https://lh4.googleusercontent.com/-
DjHwGJAaFXI/VEuATEbZ2tI/AAAAAAAAHxk/f0gvNBwmgC8/s16-no/seta%2Bp%2B%2Bdire%2B16x16.png" /> Link 49</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<div class="col">
<ul>
<li><a href="AQUI URL"><img src="https://lh4.googleusercontent.com/-DjHwGJAaFXI/VEuATEbZ2tI/AAAAAAAAHxk/f0gvNBwmgC8/s16-no/seta%2Bp%2B
%2Bdire%2B16x16.png" /> Link 6</a></li>
<li><a href="AQUI URL"><img src="https://lh4.googleusercontent.com/-DjHwGJAaFXI/VEuATEbZ2tI/AAAAAAAAHxk/f0gvNBwmgC8/s16-no/seta%2Bp%2B
%2Bdire%2B16x16.png" /> Link 7</a></li>
<li><a href="AQUI URL"><img src="https://lh4.googleusercontent.com/-DjHwGJAaFXI/VEuATEbZ2tI/AAAAAAAAHxk/f0gvNBwmgC8/s16-no/seta%2Bp%2B
%2Bdire%2B16x16.png" /> Link 8</a></li>
<li><a href="AQUI URL"><img src="https://lh4.googleusercontent.com/-DjHwGJAaFXI/VEuATEbZ2tI/AAAAAAAAHxk/f0gvNBwmgC8/s16-no/seta%2Bp%2B
%2Bdire%2B16x16.png" /> Link 9</a></li>
<li><a href="AQUI URL"><img src="https://lh4.googleusercontent.com/-DjHwGJAaFXI/VEuATEbZ2tI/AAAAAAAAHxk/f0gvNBwmgC8/s16-no/seta%2Bp%2B
%2Bdire%2B16x16.png" /> Link 10</a></li>
</ul>
</div>
</div>
</li>
<li><a href="AQUI URL"><span><img src="https://lh5.googleusercontent.com/-82WW7tcdKJI/VEuBgDCgQqI/AAAAAAAAHx4/ysQZXoF0vCs/s16-no/div%2B24x24.png" />
Diversos</span></a>
<div class="subs">
<div class="col">
<ul>
<li><a href="AQUI URL"><img src="https://lh4.googleusercontent.com/-DjHwGJAaFXI/VEuATEbZ2tI/AAAAAAAAHxk/f0gvNBwmgC8/s16-no/seta%2Bp%2B
%2Bdire%2B16x16.png" /> Link 1</a></li>
<li><a href="AQUI URL"><img src="https://lh4.googleusercontent.com/-DjHwGJAaFXI/VEuATEbZ2tI/AAAAAAAAHxk/f0gvNBwmgC8/s16-no/seta%2Bp%2B
%2Bdire%2B16x16.png" /> Link 2</a></li>
<li><a href="AQUI URL"><img src="https://lh4.googleusercontent.com/-DjHwGJAaFXI/VEuATEbZ2tI/AAAAAAAAHxk/f0gvNBwmgC8/s16-no/seta%2Bp%2B
%2Bdire%2B16x16.png" /> Link 3</a></li>
<li><a href="AQUI URL"><img src="https://lh4.googleusercontent.com/-DjHwGJAaFXI/VEuATEbZ2tI/AAAAAAAAHxk/f0gvNBwmgC8/s16-no/seta%2Bp%2B
%2Bdire%2B16x16.png" /> Link 4</a></li>
<li><a href="AQUI URL"><img src="https://lh4.googleusercontent.com/-DjHwGJAaFXI/VEuATEbZ2tI/AAAAAAAAHxk/f0gvNBwmgC8/s16-no/seta%2Bp%2B
%2Bdire%2B16x16.png" /> Link 5</a></li>
</ul>
</div>
<div class="col">
<ul>
<li><a href="AQUI URL"><img src="https://lh4.googleusercontent.com/-DjHwGJAaFXI/VEuATEbZ2tI/AAAAAAAAHxk/f0gvNBwmgC8/s16-no/seta%2Bp%2B
%2Bdire%2B16x16.png" /> Link 6</a></li>
<li><a href="AQUI URL"><img src="https://lh4.googleusercontent.com/-DjHwGJAaFXI/VEuATEbZ2tI/AAAAAAAAHxk/f0gvNBwmgC8/s16-no/seta%2Bp%2B
%2Bdire%2B16x16.png" /> Link 7</a></li>
<li><a href="AQUI URL"><img src="https://lh4.googleusercontent.com/-DjHwGJAaFXI/VEuATEbZ2tI/AAAAAAAAHxk/f0gvNBwmgC8/s16-no/seta%2Bp%2B
%2Bdire%2B16x16.png" /> Link 8</a></li>
<li><a href="AQUI URL"><img src="https://lh4.googleusercontent.com/-DjHwGJAaFXI/VEuATEbZ2tI/AAAAAAAAHxk/f0gvNBwmgC8/s16-no/seta%2Bp%2B
%2Bdire%2B16x16.png" /> Link 9</a></li>
<li><a href="AQUI URL"><img src="https://lh4.googleusercontent.com/-DjHwGJAaFXI/VEuATEbZ2tI/AAAAAAAAHxk/f0gvNBwmgC8/s16-no/seta%2Bp%2B
%2Bdire%2B16x16.png" /> Link 10</a></li>
</ul>
</div>
</div>
</li>
<li><a href="AQUI URL"><img src="https://lh4.googleusercontent.com/-4dmfnF3dCgE/VEuCABwgk7I/AAAAAAAAHyM/0YILcOBUq10/s24-no/quem-somos%2B24x24.png" />
Quem somos</a></li>
<li><a href="AQUI URL"><img src="https://lh4.googleusercontent.com/-eWxsqyr-QDA/VEuCQKiWufI/AAAAAAAAHyg/SgahCGTQ--M/s24-no/Contato%2B24x24.png" />
Contato</a></li>
<li><a href="AQUI URL"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYEuAWGekAJv3dYgQw0lO92ZCOJ6tZ1AbOnfAuo1BpmLzirjz_VOdlinJJwehBlUbRXh_UZT8hQtgqn1sUch_kXQQvKVsXKocoWO82IbpYZdhJuTH32hVdh6C_aZ-iPDGYdaB8LVbI45WG/s24-no/sitemap+24x24.png" /> Mapa
do site</a></li>
</ul>
See the Pen Menu multinível com icones CSS3 para Blogger by Mairink (@Oemes) on CodePen.
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!