Colocando um menu horizontal CSS3 brilhante na Blogger


O menu horizontal é a melhor opção alternativa para marcadores ou seções. 
A importância do menu  horizontal inclui: reduzir o espaço ocupado pelas  seções / marcadores e distorcer a aparência do blog, coordenar e embelezar o estilo de blog. 
Este widget é projetado pela tecnologia CSS3e você pode adicionar  este gadget ao seu blog de maneira muito fácil:


Adicionando o widget ao blog do Blogger:

1.  Vá para o  Painel de Controle do Blogger →  Layout  →  clique em "Adicionar um gadget".   
2.  Selecione  "HTML / java script"  e adicione o código abaixo:


<style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS8-_lQetnTYG1zgOtYnc8k6XqjzmEtp1n5GlAeYmkpR0AFY5HnC-CrX7liNw6g2yGkecT4Fa_-9njJ0mPRVsff7yohCoKavIy9VVi6a_FXifquKZ5hdWXA39Fody95DAr13twaikonK4/s1600/noop-menu-blogger.png") repeat scroll 0 0 transparent;border:1px solid #1357AF!important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style> <div class="wg-shining-menu">     <ul class="menu">         <li><a href="http://odneysalestutoriais.blogspot.com.br/">Home</a></li>         <li><a href="http://odneysalestutoriais.blogspot.com.br/search/label/Widgets">Features</a></li>         <li><a href="http://odneysalestutoriais.blogspot.com.br/search/label/Redes%20Sociais">Redes Sociais</a></li>         <li><a href="http://odneysalestutoriais.blogspot.com.br/search/label/Menu">Menus</a></li>         <li><a href="http://odneysalestutoriais.blogspot.com.br/search/label/SEO">Seo</a></li>         <li><a href="http://odneysalestutoriais.blogspot.com.br/search/label/css">CSS</a></li>         <li><a href="http://odneysalestutoriais.blogspot.com.br/search/label/jquery">jQuery</a></li>     </ul> </div>

3. Coloque o URL em azul com o seu próprio. Recoloque o nome da guia em vermelho com o seu próprio.
4. Finalmente, clique em salvar e pronto.

Até a próxima!

Postar um comentário

0 Comentários