Como colocar Menu para Blog

Oiie povo, hoje ensinarei a como colocar Menu para blog.

Vamos lá . 

1-Copie o código abaixo : 

<center/><style> .pctricksguru-ribmenu span { background:#A81B6A; display:inline-block; font-family:verdana; line-height:3em; padding:0 1em; margin-top:0.5em; position:relative; -webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2+, Chrome */ -moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4+ */ -ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */ -o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5+ */ transition: background-color 0.2s, margin-top 0.2s; } .pctricksguru-ribmenu a:hover span { background:#DB7093; margin-top:0; } .pctricksguru-ribmenu span:before { content: ""; position:absolute; top:3em; left:0; border-right:0.5em solid #9B8651; border-bottom:0.5em solid #fff; } .pctricksguru-ribmenu span:after { content: ""; position:absolute; top:3em; right:0; border-left:0.5em solid #9B8651; border-bottom:0.5em solid #fff; } .pctricksguru-ribmenu a:link, .pctricksguru-ribmenu a:visited { color:#fff; text-decoration:none; float:left; height:3.5em; overflow:hidden; } .pctricksguru-ribmenu:after, .pctricksguru-ribmenu:before { margin-top:0.5em; content: ""; float:left; border: 1.5em solid #A81B6A; } .pctricksguru-ribmenu:after { border-right-color:transparent; } .pctricksguru-ribmenu:before { border-left-color:transparent; } </style> <div class='pctricksguru-ribmenu'> <a href='#'><span>Home</span></a> <a href='#'><span>Quem somos</span></a> <a href='#'><span>Sobre o Blog </span></a> <a href='#'><span>Produtos</span></a> <a href='#'><span>Como Comprar</span></a> <a href='#'><span>Dicas</span></a> <a href='#'><span>Novidades</span></a> <a href='#'><span>Contato</span></a> </div> </center>

Agora vamos entender os códigos : 

No primeiro "background :" tem um código assim "#A81B6A" esse código é a cor do menu, você pode alterar por outra que combine com seu blog.

No segundo "background :" tem um código assim "#DB7093" esse código é a cor do realce do menu quando você passar o mouse por cima, altere para uma cor que combine com seu blog.

No código "border-bottom:0.5em solid" tem um código assim "#fff;" é a cor das letras do menu, altere para uma de sua preferência.

No código "<div class='pctricksguru-ribmenu'>" embaixo tem o código "<a href='#'><span>Home</span></a>" você altera de acordo com seu blog: onde estiver "#" você coloca o link correspondente com o nome que você vai colocar na frente. Ex: "<a href='#'><span>Quem somos</span></a>" Altere "#" pelo link e "Quem Somos" pelo nome do link.

Clique aqui para ir na Tabela de Cores.

2-Entre no painel do blog

3-Clique em "Layout" depois em "Adicionar Gadget" e em "HTML/Javascript" e salve.


Créditos : Layout Para Blog 

Bom, é isso pessoal espero que tenham gostado. Até a próxima.