Um menu horizontal é a forma mais fácil de organizar seus links principais, facilitando o leitor a encontra-los, a caixa de busca também é uma forma de ajudar a buscar o que procura-se mais rapidamente sem ter que ficar navegando muito na página para achar. Como os dois são importantes para o blog o melhor é uni-los, é isso que você vai ver neste tutorial abaixo:
Dando Estilo ao menu
1.Acesse o painel do Blogger (blogger.com)
2.Vá para "Layout"->"Editar HTML"
3.Procure pelo trecho abaixo em seu template "Utilize Ctrl e F":
]]>
Antes do trecho acima adicione o código seguinte referente a CSS:
/*-- CSS Menu Superior-- */
#navtop { background: #dcdcdc ; height: 26px; width: 100%; margin: 0px auto 24px auto; font-family: "Century Gothic", Palatino Linotype, Trebuchet MS, sans-serif; font-variant: small-caps; font-weight: bold; color:#737374; font-size: 14px; border-bottom: 1px solid #afafaf;}
.nav {width: 950px; margin: auto;}
ul.navtop { padding: 0px;}
ul.navtop li { list-style: none; display: inline;}
ul.navtop li a { background: transparent; color:#737374; display: block; float: left; padding: 4px 7px 3px 7px; margin-right: 3px; text-decoration: none; border-right: 1px solid #afafaf; border-left: 1px solid #afafaf;}
ul.navtop li a:visited { text-decoration: none; color: #737374;}
ul.navtop li a:hover { background: #e1477d; color: #ffffff; text-decoration: none; border-right: 1px solid #afafaf; border-left: 1px solid #afafaf; }
ul.navtop li a:active { text-decoration: none; color: #737374; }
ul.navtop li a:focus { color: #41a5c3; outline: 1px dotted #e1477d; }
ul.navtop li.current_page_item a { text-decoration:none; color:#fff; background: #E1477D ; }
ul.navtop li ul { float:left; margin:0; padding:0; }
#searchcont { width: 100%; margin: 12px auto 12px auto; }
#searchform { height:26px; line-height:25px; float:right; margin: 0px; padding: 0px;}
input#s {color: #e1477d; width: 283px; background:#fcfcfc; padding: 2px 4px 2px 4px; border: 1px solid #afafaf;}
input#searchsubmit{ background:#afafaf; color:#fff; font-size:13px; padding: 2px;}
Inserindo o menu
4.Agora vamos inserir o menu no template, procure pelo seguinte código:
Abaixo dele adicione o seguinte código:
5.Substitua os trechos em negrito pelas respectivas urls.
6.Salve as alterações e visualize.
Categories : 