Realizar busca mais rápida com Ctrl + F
e Cole antes dele isto:
Clique para salvar as alterações, ainda não é possível ver nenhuma modificação no blog. Agora vamos começar a segunda parte da instalação da sua barra de menu, clique para expandir modelos de widgets, localize e logo depois dessa linha coloque isso:
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li>
<a href='#'>Sample Page</a>
<ul>
<li>
<a href='#'>Sub Page #1</a>
<ul>
<li><a href='#'>Sub Sub Page #1</a></li>
<li><a href='#'>Sub Sub Page #2</a></li>
<li><a href='#'>Sub Sub Page #3</a></li>
</ul>
</li>
<li><a href='#'>Sub Page #2</a></li>
<li><a href='#'>Sub Page #3</a></li>
<li><a href='#'>Sub Page #4</a></li>
<li><a href='#'>Sub Page #5</a></li>
</ul>
</li>
<li><a href='#'>Sample Post</a></li>
<li><a href='#'>Blog Page</a></li>
</ul>
</div><div id='NavbarMenuright'>
E já está quase pronto se clicar para visualizar o blog verá que apareceu uma barra de menu embaixo da barra padrão do blogspot, se quiser ocultar a barra padrão coloque junto com o código CSS que fizemos na primeira parte a linha:
#navbar-iframe { height:0px; visibility:hidden; display:none }
Isso ocultará a barra do blogger. Então terminamos a instalação da barra de menu no topo da pagina, mas ainda falta personalizar e fazer alguns ajustes veja que na parte <input name="sitesearch" value="endereço do seu blog" type="hidden"> precisa colocar o endereço do seu blog. Além disso, veja abaixo onde alterar a aparência da barra de menu (veja aqui como alterar cores de fonte, cor de fundo, tipo de letra dos botões), isso fazemos também no estilo CSS:
#NavbarMenu – esse é o modo normal da barra, ou seja, como ela é vista quando entramos no blogquando passamos o mouse sobre o menu principal.
- aparência do submenu
- sub menu quando o mouse está sobre ele
Os links dos menus e sub menus são fáceis de alterar: home e item que aparecem no menu são o que aparecerá quando alguém entrar no blog, os sub page é o submenu que aparece sobre o item 2 e os Sub Sub Page são os links do terceiro sub menu. Para retirar esse sub menu que aparece dentro do submenu do item 2 apague o trecho do código:
Nenhum comentário:
Postar um comentário
Por favor leia antes de Comentar