Saiba"Como adicionar uma resposta ao comentário Widget"

How To Add A Reply to Comment Widget

The fastest way to reply to comments of visitors is by installing the widgetreply to comment on the blog. This method has been widely used webmasters that use wordpress platform, but different with this widget, because we have written comments that are not on the same column with the comments of visitors.
To install this widget is very easy, simply by adding a bit of HTML code on the blog, then reply to comment widget is mounted on the blog.

• Go to Layout
• Select Edit HTML
• Click Expand Widget Templates
• Find the code like this : <data:commentPostedByMsg/>
• Place the following code after the code above :

<span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=YOUR-BLOG-ID&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'>[Reply to comment]</a></span>

• Replace the red code (YOUR-BLOG-ID) with your blog ID. You can see the ID blogs on the web address of your browser.
• 
• Save Template.

fonte e créditos:
blog-zone.info


traduzido                                             

Como adicionar uma resposta ao comentário Widget

O caminho mais rápido para responder aos comentários de visitantes é de instalar o widgetresposta ao comentário no blogue .Este método tem sido amplamente utilizada webmasters que usam plataforma wordpress, mas diferente com este widget , porque temos escrito comentários que não estão na mesma coluna com os comentários de visitantes.
Para instalar este widget é muito fácil, simplesmente adicionando um pouco de código HTML do blog, em seguida, responder a comentar widget é montado no blog.

• Ir para layout
• Selecione Editar HTML
• Clique Expandir modelos de widgets
• Encontre o código como este: <data:commentPostedByMsg/>
• Coloque o seguinte código após o código acima:

 <span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=YOUR-BLOG-ID&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'>[Reply to comment]</a></span>

• Substitua o código vermelho ( SEU-BLOG-ID ) com o ID blog. Você pode ver os blogs ID no endereço web do seu navegador.
• 
• Salvar Modelo .

Continue Lendo ►

Chinelos Personalizados - Simples , Barato e Lindos - Customizado!

Chinelos Personalizados - Simples , Barato e Lindos - Customizado!

Continue Lendo ►

"Aprenda como instalar um Menu Drop Down no seu template/blog. "

    "Aprenda como  instalar

    um

    "Menu Drop Down "

    no seu template/blog.  "

    O  Menu Drop Down, é aquele que quando passamos o mouse em cima de um determinado button  do menu, logo abaixo dele, se abrem diversos sub-menus.

DEMONTRAÇÃO, clique aqui

    Antes de começar,  é aconselhável que se "Salve" o seu template , para que caso  ocorram problemas, você tenha uma cópia de seu template original guardado em seu PC.

    Jamais deixe de fazer um backup do seu Template para evitar determinados problemas...

          Então,

Logado em seu painel blogger,

...clique em:

... design...

...editar HTML...

...expandir modelos de widgets...

 E, procure por:

  

 ]]></b:skin>

encontrado,

 Cole , antes de

]]></b:skin>

o código abaixo:

.nav-container .divider{
display:block;
font-size:1px;
border-width:0px;
border-style:solid;
}
.nav-container .divider-vert{
float:left;
width:0px;
display: none;
}
.nav-container .item-secondary-title{
display:block;
cursor:default;
white-space:nowrap;
}
.clear{
font-size:1px;
height:0px;
width:0px;
clear:left;
line-height:0px;
display:block;
float:none;
}
.nav-container{
position:relative;
zoom:1;
margin: 0 auto;
}
.nav-container a, .nav-container li{
float:left;
display:block;
white-space:nowrap;
}
.nav-container div a, .nav-container ul a, .nav-container ul li{
float:none;
}
.nav-container ul{
left:-10000px;
position:absolute;
}
.nav-container, .nav-container ul{
list-style:none;
padding:0px;
margin:0px;
}
.nav-container li a{
float:none
}
.nav-container li{
position:relative;
}
.nav-container ul{
z-index:10;
}
.nav-container ul ul{
z-index:20;
}
.nav-container ul ul ul{
z-index:30;
}
.nav-container ul ul ul ul{
z-index:40;
}
.nav-container ul ul ul ul ul{
z-index:50;
}
li:hover>ul{
left:auto;
}
#nav-container ul {
top:100%;
}
#nav-container ul li:hover>ul{
top:0px;
left:100%;
}
/*^'^ Primary Items ^'^*/
#nav-container a{
padding:7px 17px 7px 18px;
margin: 10px 0px 0px 0px;
color: #000000;
font-family: Trebuchet MS, Arial, sans-serif, Helvetica;
font-size:14px;
text-decoration:none;
font-weight: bold;
background: #BDB76B   url("");
background-repeat: repeat;
background-position: top;
}
#nav-container a:hover{
color: #6C3600;
background: #BDB76B url("");
background-repeat: repeat;
background-position: center;
}

/*^'^ Secondary Items Container ^'^*/
#nav-container div, #nav-container ul{
padding:10px 4px 10px 4px;
margin:0px 0px 0px 0px;
background:#BDB76B url("");
background-repeat: repeat-x;
background-color: #E2E2A0;
border-bottom: 1px solid #CA6500;
}

/*^'^ Secondary Items ^'^*/
#nav-container div a, #nav-container ul a{
padding:3px 10px 3px 6px;
background-color: #FFFFFF;
background:#FAFAD2 url("");
background-repeat: no-repeat;
background-position: 0px 22px;
font-size:11px;
border-width:0px;
border-style:none;
margin: 0px 0px 0px 0px;
width: 149px;
}
/*^'^ Secondary Items Hover State ^'^*/
#nav-container div a:hover, #nav-container ul a:hover{
background-color: #FFFFFF;
background:#E2E2A0 url("");
background-repeat: no-repeat;
color:#CC0000;
}
/*^'^ Secondary Item Titles ^'^*/

#nav-container .item-secondary-title{
cursor:default;
padding:4px 0px 3px 7px;
color: #6C3600;
font-family: Arial, Trebuchet MS, Arial, sans-serif, Helvetica;
font-size:11px;

/* background:#FAFAD2 url(""); */
background-repeat: no-repeat;
font-weight:bold;

}
/*^'^ Horizontal Dividers ^'^*/
#nav-container .divider-horiz{
border-top-width:1px;
margin:5px 5px;
border-color: #C16100;
}
/*^'^ Vertical Dividers ^'^*/
#nav-container .divider-vert{
border-left-width:1px;
height:15px;
margin:4px 2px 0px 2px;
border-color:#AAAAAA;
}

Salve!

 

 Daí,

Optando pelo  menu acima da header (cabeçalho)

Procure pelo código:

<div id='outer-wrapper'><div id='wrap2'>

E,

abaixo dele ( <div id='outer-wrapper'><div id='wrap2'> )

cole o código a seguir:

<ul class='nav-container' id='nav-container'>

<li><a class='item-primary' href='ENDEREÇO DO SEU BLOG AQUI'>HOME</a>

</li>

<li><span class='divider divider-vert'/></li>

<li><a class='item-primary' href='#'>LINK 1 </a>

<ul style='width:150px;'>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 1.1</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 1.2</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 1.3</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 1.4</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 1.5</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 1.6</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 1.7</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 1.8</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 1.9</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 1.10</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 1.11</a></li>

<li><span class='divider divider-horiz'/></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 1.12</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 1.13</a></li>

</ul></li>

<li><span class='divider divider-vert'/></li>

<li><a class='item-primary' href='#'>LINK 2</a>

<ul style='width:150px;'>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 2.1</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 2.2</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 2.3</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 2.4</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 2.5</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 2.6</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 2.7</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 2.8</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 2.9</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 2.10</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 2.11</a></li>

<li><span class='divider divider-horiz'/></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 2.12</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 2.13</a></li>

</ul></li>

<li><span class='divider divider-vert'/></li>

<li><a class='item-primary' href='#'>LINK 3</a>

<ul style='width:150px;'>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 3.1</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 3.2</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 3.3</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 3.4</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 3.5</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 3.6</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 3.7</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 3.8</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 3.9</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 3.10</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 3.11</a></li>

<li><span class='divider divider-horiz'/></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 1.12</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 1.13</a></li>

</ul></li>

<li><span class='divider divider-vert'/></li>

<li><a class='item-primary' href='#;'>LINK 4</a>

<ul style='width:150px;'>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 4.1</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 4.2</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 4.3</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 4.4</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 4.5</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 4.6</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 4.7</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 4.8</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 4.9</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 4.10</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 4.11</a></li>

<li><span class='divider divider-horiz'/></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 4.12</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 4.13</a></li>

</ul></li>

<li><span class='divider divider-vert'/></li>

<li><a class='item-primary' href='#;'>LINK 5</a>

<ul style='width:150px;'>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 5.1</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 5.2</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 5.3</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 5.4</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 5.5</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 5.6</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 5.7</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 5.8</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 5.9</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 5.10</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 5.11</a></li>

<li><span class='divider divider-horiz'/></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 1.12</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 1.13</a></li>

</ul></li></ul>

nota:                                                                                                                                      
# = ' ENDEREÇO DO SEU LINK AQUI '  ...     ou , se preferir não coloque nada

Atente:

    Este presente tutorial aplica-se aos antigos modelos de lay-out (Template Mínima).  Nos  novos Designer de Modelo, ainda não foi testado.

Optando pelo menu abaixo da header (cabeçalho)

Procure por:

<div id='content-wrapper'>

ao encontrar o código, 

 
cole  abaixo dele,

o código a seguir:

<ul class='nav-container' id='nav-container'>

<li><a class='item-primary' href='ENDEREÇO DO SEU BLOG AQUI'>HOME</a>

</li>

<li><span class='divider divider-vert'/></li>

<li><a class='item-primary' href='#'>LINK 1 </a>

<ul style='width:150px;'>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 1.1</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 1.2</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 1.3</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 1.4</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 1.5</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 1.6</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 1.7</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 1.8</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 1.9</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 1.10</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 1.11</a></li>

<li><span class='divider divider-horiz'/></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 1.12</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 1.13</a></li>

</ul></li>

<li><span class='divider divider-vert'/></li>

<li><a class='item-primary' href='#'>LINK 2</a>

<ul style='width:150px;'>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 2.1</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 2.2</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 2.3</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 2.4</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 2.5</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 2.6</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 2.7</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 2.8</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 2.9</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 2.10</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 2.11</a></li>

<li><span class='divider divider-horiz'/></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 2.12</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 2.13</a></li>

</ul></li>

<li><span class='divider divider-vert'/></li>

<li><a class='item-primary' href='#'>LINK 3</a>

<ul style='width:150px;'>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 3.1</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 3.2</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 3.3</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 3.4</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 3.5</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 3.6</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 3.7</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 3.8</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 3.9</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 3.10</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 3.11</a></li>

<li><span class='divider divider-horiz'/></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 1.12</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 1.13</a></li>

</ul></li>

<li><span class='divider divider-vert'/></li>

<li><a class='item-primary' href='#;'>LINK 4</a>

<ul style='width:150px;'>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 4.1</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 4.2</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 4.3</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 4.4</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 4.5</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 4.6</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 4.7</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 4.8</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 4.9</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 4.10</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 4.11</a></li>

<li><span class='divider divider-horiz'/></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 4.12</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 4.13</a></li>

</ul></li>

<li><span class='divider divider-vert'/></li>

<li><a class='item-primary' href='#;'>LINK 5</a>

<ul style='width:150px;'>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 5.1</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 5.2</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 5.3</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 5.4</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 5.5</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI'>LINK 5.6</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 5.7</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 5.8</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 5.9</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 5.10</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 5.11</a></li>

<li><span class='divider divider-horiz'/></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 1.12</a></li>

<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 1.13</a></li>

</ul></li></ul>

"Salve"

nota:                                                                                    

# = ' ENDEREÇO DO SEU LINK AQUI '                                                               



Querendo, pode-se realizar  mudanças , como  em cores,  inserir links ...

e,

"salvando tudo de novo"




Atenção:




Querendo que o sub-menu abra em outra janela,


utilize o código abaixo:


<li><a href="URL A SER ABERTA NOUTRA PÁGINA" target="_blank">TEXTO</a></li>


ao invéz de apenas:


<li><a href='ENDEREÇO DO SEU LINK AQUI;'>LINK 4.13</a></li>  (exemplo)

http://ahsotestandocurioso.blogspot.com

Continue Lendo ►

Mega-Sena pode pagar R$ 29 milhões em 20/08/2011

Mega-Sena pode pagar R$ 29 milhões em 20/08/2011






http://ahsotestandocurioso.blogspot.com

Continue Lendo ►

visitas

Continue Lendo ►

..." menu horizontal no Blogger, acima ou abaixo do cabeçalho"

Instalando o menu horizontal no Blogger, acima ou abaixo do cabeçalho

"Esta dica se aplica ao antigo Blogger, anterior a julho de 2010. "
"Se o seu Blogger é o novo, veja a dica nova AQUI"

Para instalar um menu horizontal em seu Blogger, no painel clique em "Design"

Agora clique em "Editar HTML"

Agora procure por:




]]></b:skin>

"Agora...
acima dele ( ]]></b:skin>)
cole o código a seguir"

#navcontainer
{
background: #808080;
margin: 0 auto;
padding:4px 0;
font-family: georgia, serif;
text-transform: lowercase;
}


/* to stretch the container div to contain floated list */
#navcontainer:after{
content: ".";
display: block;
line-height: 10px;
font-size: 12px;
clear: both;
}


ul#navlist{
height: 20px;
list-style: none;
padding: 10px;
margin: 0 auto;
width: 90%;
font-size: 0.8em;
}


ul#navlist li{
display: block;
float: left;
width: 15%;
margin: 0;
padding: 2x;
}


ul#navlist li a{
display: block;
width: 100%;
padding: 0.5em;
border-width: 1px;
border-color: #ccc #cccc #ccc #fff;
border-style: solid;
color: #000;
text-decoration: none;
background: #eee;
}


#navcontainer>ul#navlist li a { font-size: 12px;width: auto; padding: 14px 3px; }


ul#navlist li#active a{
background: #ccc;
color: #800000;
}


ul#navlist li a:hover, ul#navlist li#active a:hover{
color: #800000;
background: transparent;
border-color: #000 #fff #fff #ccc;
}

*CÓDIGO NA COR VERMELHA ACIMA SÃO AS CORES DO MENU, TROQUE-AS SE QUISER."

"Se você quer o menu acima da header (cabeçalho)"

Agora procure pelo seguinte código:  



<div id='header-wrapper'>

..." e, depois   dele ( <div id='header-wrapper'>)...
..."cole este código abaixo "

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="AQUI O ENDEREÇO DO SEU LINK" id="current">Item 1</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 2</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 3</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 4</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 5</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 6</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 7</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item8</a></li> </ul>
</div>

"Se você quer o menu abaixo da header (cabeçalho)"

Procure por:


<div id='content-wrapper'>

e cole o código abaixo dele (<div id='content-wrapper'>)

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="AQUI O ENDEREÇO DO SEU LINK" id="current">Item 1</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 2</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 3</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 4</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 5</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 6</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 7</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item8</a></li> </ul>
</div>

"Salve" 
e depois faça as modificações como cores, inserir links ..."salvando novamente"




fonte e créditos:
templateseacessorios.

Continue Lendo ►