Menu multinível com ícones CSS3 para Blogger ~ Mult-focos

Olá e bem-vindo ao Mult-focos. Temos neste post um menu multinível com ícones CSS3 para Blogger. Este menu tem um visual muito bonito além de ter 34 links para melhor atender um blog que precisa de muitos links, você pode também diminuir ou aumentar esta quantidade conforme sua necessidade.

Encontre outros modelos de Menus clicando AQUI

Veja um demo clicando no botão abaixo ou em Result no Box de códigos.

DEMO
Como adicionar em seu blog

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

Próximo passo

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).

Configurações

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.

Isto é tudo.

<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://lh6.googleusercontent.com/-NL4I7M55TGU/VEuADZRZMvI/AAAAAAAAHxQ/dYCilhKEHuE/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://lh3.googleusercontent.com/-aG8qGOmwO9w/VEuCbovnxiI/AAAAAAAAHy0/6ZTFWDZBwQU/s24-no/sitemap%2B24x24.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!

Menu multinível com ícones CSS3 para Blogger

0 comentários:

Postar um comentário

Categorias

Estatísticas Mult-focos