Menu com submenus usando CSS no Blogger

DEMO

Um menu bem facinho de instalar e que pode fazer a diferença se você tem muitos links para disponibilizar a seus visitantes. Instale-o diretamente no HTML/Javascript.

Clique em Adicionar um Gadget

Ao abrir, clique em  HTML/Javascript

Cole então o próximo código fazendo as modificações necessárias.

<style>
/*Menu ------------------------------------------------*/
#nav {
background: #808080;
width:100%;
font: bold 14px "ms sans serif", verdana, arial;
color: #AA0000;
margin: 0 auto 0px;
padding: 0px auto 0px;
height:55px;
}
#navleft {
width: 700px;
float: left;
margin: 0;
padding: 0;
}
#navright {
width: 250px;
font-size: 11px;
float: right;
margin:0px;
padding:0px;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding:0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
background: #ccc;
color: #fff;
display: block;
font-weight: bold;
text-transform: none;
padding: 15px 10px 17px 10px;
margin: 3px 5px 0 0;
}
#nav li a:hover, #nav li a:active {
background:#AA0000;
color:#000000;
padding: 15px 10px 17px 10px;
margin: 0 5px 0 0;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #AA0000;
width: 220px;
color: #FFF;
font: normal 14px "ms sans serif", verdana, arial;
text-transform: none;
float: none;
margin: 0;
padding:5px 10px;
border-bottom:1px dotted  #363636;
border-right:1px solid #363636;
border-left:1px solid #363636;
}
#nav li li a:hover, #nav li li a:active {
background: #fff;
color: #AA0000;
padding:5px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}

</style>

<div id='nav'>
<div id='navleft'>
     
<ul>
<li><a expr:href='data:blog.homepageUrl'>Início</a></li>
<li><a href='ENDEREÇO LINK DO 1'>Link 1</a>
<ul>
<li><a href='ENDEREÇO DO LINK 2'>Link 2</a></li>
</ul>
</li>

<li><a href='ENDEREÇO DO LINK 3'>Link 3</a>
<ul>
<li><a href='ENDEREÇO DO LINK 3A'>Link 3A</a></li>
<li><a href='ENDEREÇO DO LINK 3B'>Link 3B</a></li>
<li><a href='ENDEREÇO DO LINK 3C'>Link 3C</a></li>
<li><a href='ENDEREÇO DO LINK 3D'>Link 3D</a></li>
<li><a href='ENDEREÇO DO LINK 3E'>Link 3E</a></li>
<li><a href='ENDEREÇO DO LINK 3F'>Link 3F</a></li>
</ul>
</li>


<li><a href='ENDEREÇO DO LINK 4'>Link 4</a>
<ul>
<li><a href='ENDEREÇO DO LINK 4A'>Link 4A</a></li>
<li><a href='ENDEREÇO DO LINK 4B'>Link 4B</a></li>
<li><a href='ENDEREÇO DO LINK 4C'>Link 4C</a></li>
<li><a href='ENDEREÇO DO LINK 4D'>Link 4D</a></li>
<li><a href='ENDEREÇO DO LINK 4E'>Link 4E</a></li>
<li><a href='ENDEREÇO DO LINK 4F'>Link 4F</a></li>
</ul>
</li>


<li><a href='ENDEREÇO DO LINK 5'>Link 5</a>
<ul>
<li><a href='ENDEREÇO DO LINK 5A'>Link 5A</a></li>
<li><a href='ENDEREÇO DO LINK 5B'>Link 5B</a></li>
<li><a href='ENDEREÇO DO LINK 5C'>Link 5C</a></li>
<li><a href='ENDEREÇO DO LINK 5D'>Link 5D</a></li>
<li><a href='ENDEREÇO DO LINK 5E'>Link 5E</a></li>
<li><a href='ENDEREÇO DO LINK 5F'>Link 5F</a></li>
</ul>
</li>
<li><a href='ENDEREÇO DO LINK 6'>Link 6</a></li>
<li><a href='ENDEREÇO DO LINK 7'>Link 7</a></li>

</ul></div>
   </div>

»»Leia mais...

Template para o Blogger:. download e instalação

Muitas vezes não estamos com paciência ou tempo para ficar personalizando o nosso blog.
Então uma das soluções é "baixar" algum template disponível na Web.
Hoje estou passando como baixar,fazer "backup" do seu template original e instalar o template novo.

1)Fui no "tio Google" e coloquei na busca:. templates download.Escolhi este site.

2)Dei um clique para entrar no site__

3)Depois de olhar e analizar os templates, escolhi este:.

4)Cliquei em "Demo" para conhecer melhor o template.

5)Apareceu esta janela com o template.

6)Cliquei para fazer o download

7)O arquivo que foi baixado(Sky Blue) está zipado como vocês podem observar.

8)Temos que descompactar o arquivo.Vá até a pasta que se encontra o arquivo zipado(geralmente na Pasta Meus Downloads ou Meus Documentos)

9)Clique no arquivo com o lado direito do mouse e clique em "Extrair Arquivos"

10)Vai aparecer esta janela(clique em OK)

11)Vá na pasta onde foi descompactado o arquivo(Meus Downloads)

12)Esta é a pasta(SkyBlue) onde se encontra o arquivo em .xml.

Vamos dar uma olhada nele.Depois de dar dois cliques vai aparecer esta janela. onde se encontra o teu arquivo xml "SkyBlue"

13)Agora vamos fazer BackUp " do seu template original para depois trocarmos pelo SkyBlue.Vá em Blogger e escolha o  blog  que você vai fazer o Backup e trocar o template.

14)No meu caso escolhi o "Rochinha Testes" e fui até o "Modelo"

Fiz este procedimento que está nas imagens seguintes.

15)Agora vai aparecer esta janela clique em "Fazer Backup/restauração"

16)Feito isto vai aparecer esta janela.Clique em "Fazer o download do modelo completo"

17)Depois de feito o download você pode ficar tranquilo que seu template original do blog está salvo.Agora vamos trocar o seu template original pelo novo template, o "SkyBlue".

Clique em "Escolher arquivo" depois "Fazer Upload" e depois Visualizar blog com seu novo template.

18)Você caso você não gostou do novo template ,troque-o por outro e assim por diante.

19)Para fazer mudança de algum detalhe no seu novo template, você precisa ter um pouco de conhecimento dos códigos HTML ou CSS.Muitas vezes no local onde está o template tem os comentários dos usuários etc..

20)Bom é isto daí .Salvar e trocar template não é uma operação tão difícil de efetuar.

21)Abraço e até a próxima. 

»»Leia mais...

Inserindo cabeçalho personalizado no seu blog

Um cabeçalho padrão tem as seguintes dimensões :. 950 x 175 (Largura x Altura).
Estas dimensões podem ser alteradas na largura ou na altura.
O primeiro passo é trabalhar uma imagem com estas dimensões no Photoshop(ou qualquer programa de edição de imagem) e depois inserir a imagem no Layout do seu blog.

Para colocar um “cabeçalho” ou “trocar um cabeçalho” siga este procedimento:.

1) Vá em “Layout”

>>>>>clicar em “layout”





depois vá em (Cabeçalho>> Editar)

Depois de clicar em Editar vai aparecer esta janela

Escolher arquivo (Do seu computador) caso você não tenha nenhuma imagem no cabeçalho.

Se caso você for trocar a imagem

escolha esta opção “”Remover Imagem”

Depois escolha o Posicionamento e habilite este box.”Em vez de título e descrição” e clique em “Salvar”

OK __see you later__

Rochinha HTML e CSS no Jantar

»»Leia mais...

Como descobrir e trocar a senha do wireless do modem Thomson do Net virtua

Por conta de um maldito mallware que peguei ao baixar um programa, para justamente limpar o meu notbook no Baixaki,  tive que configurar novamente meu computador. Nessa, acabei por não conseguir me conectar ao wireless. Podem imaginar a raiva, o apuro que passei por infinitas 14 horas ?  Quatorze horas sem computador porque não sabia como poderia conseguir a senha do bendito roteador em questão. Perguntei ao oráculo e depois de inúmeras tentativas frustradas, eis que encontrei este bendito vídeo que resolveu minha vida,  além de ter conseguido mudar a senha complicadíssima do roteador. Tô feliz e aproveito pra deixar pra vocês a dica.

»»Leia mais...