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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA5-UF46EXErclDfgF2BQ3ywRccoLJInTPGDq353TWlTwClqsLwgK9tdvV5iX0lKd-5fe8j0P779rumjzTxkYZQz6XJSPUGbIv4tvxrKAN2k_UgHtXICOkdLXDo2HCXRcqllmCThJnJUdm/s24-no/pagina+inicial+24x24.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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLop_EQTShVH3a2TIx5uPcikCN-CV2HkOezXRqMmmaBqd1wna3ddzbj5Ky0fjSMUXmUjNlzrN6_2_7vFTkK7FOOLoo6tjzhFqqefzKU0loA3CKq39OIZxUf4YK8yQd_3WFHIGWBqQvL0Fl/s16-no/seta+p+
%2Bdire%2B16x16.png" /> Link 1</a></li>
<li><a href="AQUI URL"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLop_EQTShVH3a2TIx5uPcikCN-CV2HkOezXRqMmmaBqd1wna3ddzbj5Ky0fjSMUXmUjNlzrN6_2_7vFTkK7FOOLoo6tjzhFqqefzKU0loA3CKq39OIZxUf4YK8yQd_3WFHIGWBqQvL0Fl/s16-no/seta+p+
%2Bdire%2B16x16.png" /> Link 2</a></li>
<li><a href="AQUI URL"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLop_EQTShVH3a2TIx5uPcikCN-CV2HkOezXRqMmmaBqd1wna3ddzbj5Ky0fjSMUXmUjNlzrN6_2_7vFTkK7FOOLoo6tjzhFqqefzKU0loA3CKq39OIZxUf4YK8yQd_3WFHIGWBqQvL0Fl/s16-no/seta+p+
%2Bdire%2B16x16.png" /> Link 3</a></li>
<li><a href="AQUI URL"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLop_EQTShVH3a2TIx5uPcikCN-CV2HkOezXRqMmmaBqd1wna3ddzbj5Ky0fjSMUXmUjNlzrN6_2_7vFTkK7FOOLoo6tjzhFqqefzKU0loA3CKq39OIZxUf4YK8yQd_3WFHIGWBqQvL0Fl/s16-no/seta+p+
%2Bdire%2B16x16.png" /> Link 4</a></li>
<li><a href="AQUI URL"><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLop_EQTShVH3a2TIx5uPcikCN-CV2HkOezXRqMmmaBqd1wna3ddzbj5Ky0fjSMUXmUjNlzrN6_2_7vFTkK7FOOLoo6tjzhFqqefzKU0loA3CKq39OIZxUf4YK8yQd_3WFHIGWBqQvL0Fl/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLop_EQTShVH3a2TIx5uPcikCN-CV2HkOezXRqMmmaBqd1wna3ddzbj5Ky0fjSMUXmUjNlzrN6_2_7vFTkK7FOOLoo6tjzhFqqefzKU0loA3CKq39OIZxUf4YK8yQd_3WFHIGWBqQvL0Fl/s16-no/seta+p++dire+16x16.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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLop_EQTShVH3a2TIx5uPcikCN-CV2HkOezXRqMmmaBqd1wna3ddzbj5Ky0fjSMUXmUjNlzrN6_2_7vFTkK7FOOLoo6tjzhFqqefzKU0loA3CKq39OIZxUf4YK8yQd_3WFHIGWBqQvL0Fl/s16-no/seta+p+
%2Bdire%2B16x16.png" /> Link 6</a></li>
<li><a href="AQUI URL"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLop_EQTShVH3a2TIx5uPcikCN-CV2HkOezXRqMmmaBqd1wna3ddzbj5Ky0fjSMUXmUjNlzrN6_2_7vFTkK7FOOLoo6tjzhFqqefzKU0loA3CKq39OIZxUf4YK8yQd_3WFHIGWBqQvL0Fl/s16-no/seta+p+
%2Bdire%2B16x16.png" /> Link 7</a></li>
<li><a href="AQUI URL"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLop_EQTShVH3a2TIx5uPcikCN-CV2HkOezXRqMmmaBqd1wna3ddzbj5Ky0fjSMUXmUjNlzrN6_2_7vFTkK7FOOLoo6tjzhFqqefzKU0loA3CKq39OIZxUf4YK8yQd_3WFHIGWBqQvL0Fl/s16-no/seta+p+
%2Bdire%2B16x16.png" /> Link 8</a></li>
<li><a href="AQUI URL"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLop_EQTShVH3a2TIx5uPcikCN-CV2HkOezXRqMmmaBqd1wna3ddzbj5Ky0fjSMUXmUjNlzrN6_2_7vFTkK7FOOLoo6tjzhFqqefzKU0loA3CKq39OIZxUf4YK8yQd_3WFHIGWBqQvL0Fl/s16-no/seta+p+
%2Bdire%2B16x16.png" /> Link 9</a></li>
<li><a href="AQUI URL"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLop_EQTShVH3a2TIx5uPcikCN-CV2HkOezXRqMmmaBqd1wna3ddzbj5Ky0fjSMUXmUjNlzrN6_2_7vFTkK7FOOLoo6tjzhFqqefzKU0loA3CKq39OIZxUf4YK8yQd_3WFHIGWBqQvL0Fl/s16-no/seta+p+
%2Bdire%2B16x16.png" /> Link 10</a></li>
</ul>
</div>
</div>
</li>
<li><a href="AQUI URL"><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBaHmlKFpb3I2EkGfYFItOtMDoXCw83-FsGZy73ZfIT7OJNM8DeWkVqA9HqCjCxB0sOCfcqEu1-yV3RPUlDl-w-sQ8VtRh-B-X8sc79CQaMwSLRGCL4BU3sua7x9JVe2c4ff07moLWkX3z/s16-no/div+24x24.png" />
Diversos</span></a>
<div class="subs">
<div class="col">
<ul>
<li><a href="AQUI URL"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLop_EQTShVH3a2TIx5uPcikCN-CV2HkOezXRqMmmaBqd1wna3ddzbj5Ky0fjSMUXmUjNlzrN6_2_7vFTkK7FOOLoo6tjzhFqqefzKU0loA3CKq39OIZxUf4YK8yQd_3WFHIGWBqQvL0Fl/s16-no/seta+p+
%2Bdire%2B16x16.png" /> Link 1</a></li>
<li><a href="AQUI URL"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLop_EQTShVH3a2TIx5uPcikCN-CV2HkOezXRqMmmaBqd1wna3ddzbj5Ky0fjSMUXmUjNlzrN6_2_7vFTkK7FOOLoo6tjzhFqqefzKU0loA3CKq39OIZxUf4YK8yQd_3WFHIGWBqQvL0Fl/s16-no/seta+p+
%2Bdire%2B16x16.png" /> Link 2</a></li>
<li><a href="AQUI URL"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLop_EQTShVH3a2TIx5uPcikCN-CV2HkOezXRqMmmaBqd1wna3ddzbj5Ky0fjSMUXmUjNlzrN6_2_7vFTkK7FOOLoo6tjzhFqqefzKU0loA3CKq39OIZxUf4YK8yQd_3WFHIGWBqQvL0Fl/s16-no/seta+p+
%2Bdire%2B16x16.png" /> Link 3</a></li>
<li><a href="AQUI URL"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLop_EQTShVH3a2TIx5uPcikCN-CV2HkOezXRqMmmaBqd1wna3ddzbj5Ky0fjSMUXmUjNlzrN6_2_7vFTkK7FOOLoo6tjzhFqqefzKU0loA3CKq39OIZxUf4YK8yQd_3WFHIGWBqQvL0Fl/s16-no/seta+p+
%2Bdire%2B16x16.png" /> Link 4</a></li>
<li><a href="AQUI URL"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLop_EQTShVH3a2TIx5uPcikCN-CV2HkOezXRqMmmaBqd1wna3ddzbj5Ky0fjSMUXmUjNlzrN6_2_7vFTkK7FOOLoo6tjzhFqqefzKU0loA3CKq39OIZxUf4YK8yQd_3WFHIGWBqQvL0Fl/s16-no/seta+p+
%2Bdire%2B16x16.png" /> Link 5</a></li>
</ul>
</div>
<div class="col">
<ul>
<li><a href="AQUI URL"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLop_EQTShVH3a2TIx5uPcikCN-CV2HkOezXRqMmmaBqd1wna3ddzbj5Ky0fjSMUXmUjNlzrN6_2_7vFTkK7FOOLoo6tjzhFqqefzKU0loA3CKq39OIZxUf4YK8yQd_3WFHIGWBqQvL0Fl/s16-no/seta+p+
%2Bdire%2B16x16.png" /> Link 6</a></li>
<li><a href="AQUI URL"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLop_EQTShVH3a2TIx5uPcikCN-CV2HkOezXRqMmmaBqd1wna3ddzbj5Ky0fjSMUXmUjNlzrN6_2_7vFTkK7FOOLoo6tjzhFqqefzKU0loA3CKq39OIZxUf4YK8yQd_3WFHIGWBqQvL0Fl/s16-no/seta+p+
%2Bdire%2B16x16.png" /> Link 7</a></li>
<li><a href="AQUI URL"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLop_EQTShVH3a2TIx5uPcikCN-CV2HkOezXRqMmmaBqd1wna3ddzbj5Ky0fjSMUXmUjNlzrN6_2_7vFTkK7FOOLoo6tjzhFqqefzKU0loA3CKq39OIZxUf4YK8yQd_3WFHIGWBqQvL0Fl/s16-no/seta+p+
%2Bdire%2B16x16.png" /> Link 8</a></li>
<li><a href="AQUI URL"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLop_EQTShVH3a2TIx5uPcikCN-CV2HkOezXRqMmmaBqd1wna3ddzbj5Ky0fjSMUXmUjNlzrN6_2_7vFTkK7FOOLoo6tjzhFqqefzKU0loA3CKq39OIZxUf4YK8yQd_3WFHIGWBqQvL0Fl/s16-no/seta+p+
%2Bdire%2B16x16.png" /> Link 9</a></li>
<li><a href="AQUI URL"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLop_EQTShVH3a2TIx5uPcikCN-CV2HkOezXRqMmmaBqd1wna3ddzbj5Ky0fjSMUXmUjNlzrN6_2_7vFTkK7FOOLoo6tjzhFqqefzKU0loA3CKq39OIZxUf4YK8yQd_3WFHIGWBqQvL0Fl/s16-no/seta+p+
%2Bdire%2B16x16.png" /> Link 10</a></li>
</ul>
</div>
</div>
</li>
<li><a href="AQUI URL"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhliBJJE581k5z0EmqBRxW0B8R3Y75SSxGKe9nde3lBJ-K5bzMRB8UYlu76CLdzZjy8rMuZ6pJmDrRvrIf2U3FTA6VaWT5ppO1eXvOjRzj69bkn1AW25gf4fbGhWfAZkm-RyQU5RO-RnDj_/s24-no/quem-somos+24x24.png" />
Quem somos</a></li>
<li><a href="AQUI URL"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFpearswjFzOuGNo-llgvAhuY2000nK2NC0scmTcS3MptP9MSGKKT0fW4M4gUqtwFvw_0Esgk9Fs-9vIyt_3ngvIo-9iaKTJAX9c3BKbdm2Riob5w06TS6xFWD16cK-fQcXnoQnJK9gzcb/s24-no/Contato+24x24.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!