Menu Css warna warni como efeito Para blogger

menu warni warna blogger degan

Hoje vamos compartilhar esse menu diferenciado, isso tem um efeito de transição e pode ser utilizando em qualquer template do Blogger se você deseja ter um menu diferenciado siga os passos abaixo para adicionar no seu template



Adicionando o menu Css warna warni com efeito no Blogger


Faça login no blogger então va no menu layout procure por o gadget JavaScript então copie e cole o seguinte código:


<div id="colormenu">
<span class="blue"><a href="#">internet</a></span>
<span class="red"><a href="#">learn how to</a></span>
<span class="green"><a href="#">newspaper</a></span>
<span class="yellow"><a href="#">twitter</a></span>
<span class="green2"><a href="#">rss feeds</a></span>
</div>
<style type="text/css">
#colormenu {
margin: 5px;
padding: 5px
}

#colormenu a {
font-family: Arial, Helvetica, sans-serif;
padding: 6px 20px 9px 20px;
font-size: 15px;
color: #000;
text-decoration: none;
font-weight: bold;
text-transform: uppercase
}

#colormenu .blue a, #colormenu .red a, #colormenu .green a, #colormenu .yellow a, #colormenu .green2 a {
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out
}

#colormenu .blue a {
border-top: 6px solid #326abd
}

#colormenu .red a {
border-top: 6px solid #b8462c
}

#colormenu .green a {
border-top: 6px solid #a5cc3b
}

#colormenu .yellow a {
border-top: 6px solid #e6ab07
}

#colormenu .green2 a {
border-top: 6px solid #2b9435
}

#colormenu .blue a:hover {
color: #FFF;
background-color: #326abd;
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
border-bottom-left-radius: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
border-bottom-right-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-moz-border-radius-bottomright: 9px
}

#colormenu .red a:hover {
color: #FFF;
background-color: #b8462c;
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
border-bottom-left-radius: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
border-bottom-right-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-moz-border-radius-bottomright: 9px
}

#colormenu .green a:hover {
color: #FFF;
background-color: #a5cc3b;
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
border-bottom-left-radius: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
border-bottom-right-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-moz-border-radius-bottomright: 9px
}

#colormenu .yellow a:hover {
color: #FFF;
background-color: #e6ab07;
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
border-bottom-left-radius: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
border-bottom-right-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-moz-border-radius-bottomright: 9px
}

#colormenu .green2 a:hover {
color: #FFF;
background-color: #2b9435;
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
border-bottom-left-radius: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
border-bottom-right-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-moz-border-radius-bottomright: 9px
}
</style>


Salve e pronto.


Click to comment