Como colocar dois blocos de anúncios do Adsense Lado a lado

1. Primeiramente você deve adicionar seu códigos Adsense ao código abaixo, porém antes você tem que convertê-los.

Acesse: Parse HTML for Blogger XML Templates cole seu código Adsense, clique em "Parse" e em seguida substitua  onde indicado em vermelho no código abaixo:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
&lt;div align=&quot;center&quot;&gt;&lt;!-- Inicio --&gt; &lt;b:if cond=&#39;data:blog.pagetype == &amp;quot;item&amp;quot;&#39;&gt; &lt;br /&gt; &lt;table border=&#39;0&#39; cellpadding=&#39;0&#39; cellspacing=&#39;0&#39; unselectable=&#39;on&#39;&gt;&lt;tbody&gt; &lt;tr&gt; &lt;td valign=&#39;top&#39;&gt; &lt;!-- Inicio --&gt;Seu codigo adsense covertido aqui&lt;!-- Final --&gt; &lt;/td&gt; &lt;td valign=&#39;top&#39;&gt; &lt;!-- Codigo Artigos Relacionados Inicio --&gt;Seu codigo adsense covertido aqui&lt;!-- Final --&gt;&lt;br /&gt; &lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt; &lt;!-- final --&gt;&lt;/b:if&gt; &lt;!-- Rodape dos artigos Final --&gt;&lt;/div&gt;
</b:if>

 2. Agora você deve escolher o local onde você deseja que os anúncios apareçam, vou dar umas dicas dos melhores lugares.

Para adicionar os anúncios dentro de todas suas postagens abaixo do título de cada uma:

Vá até "Modelo", "Editar HTML" selecione "Expandir modelos de widgets" e procure por <div class=’post-header-line-1&#8242;/> 

Se não achar procure por: <div class='post-header-line-1'/> 

Logo abaixo de um destes cole o código que você deixou esperando anteriormente.

Para adicionar os anúncios no final de todas suas postagens antes dos comentários:

Vá até "Design", "Editar HTML" e "Expandir modelos de widgets" e procure por <div class=’post-footer’> 

Se não encontrar procure por: <div class=’post-footer-line post-footer-line-1&#8242;> 

E imediatamente abaixo de uma destas linhas cole o código que você deixou esperando anteriormente. 

3. Clique em Salvar Modelo e veja o resultado. 

Concluindo:

Espero que com esta dica você possa alcançar melhores resultados no Adsense e também melhorar aparência e usabilidade de seu Blog, deixe comentários sobre qualquer dúvida e também se ocorreu tudo certo.

»»Leia mais

Nova edição HTML no Blogger

O Blogger nos surpreendeu com uma nova e moderna edição de HTML profissional. Esta nova interface no Editar HTML inclui uma visualização sem abrir uma nova guia, numeração e códigos de cores para nos permitir identificar cada uma das partes do modelo; menu de gadgets para acessá-los rapidamente; expandimiento de gadgets individualmente; os códigos de organizar adequadamente adicionado, e seu próprio motor de busca.

Sim, tudo isso mudou no novo projeto que foi uma surpresa para todos nós. Então, o que é cada coisa?

As cores dos códigos é algo que tem confundido muitos, porque alguns pensam que têm uma função específica, mas não é, é apenas para ajudar a diferenciar cada setor da força de trabalho e não ver apenas um monte de letras pretas. Na verdade, a maioria dos editores profissionais com tanta freqüência.

Onde se expande os gadgets na nova edição de HTML?

Cada área é mais organizada individualmente, para expandir os gadgets de todas as áreas que precisam apenas dar clique na seta correspondente e expandir essa área, por exemplo, os estilos CSS agora agrupados entre <b:skin> ver ... </ b: skin>

Ir para o menu widget permite-nos ir diretamente para o gadget que você selecionou salvar-nos algum tempo.

Este novo design inclui o seu próprio motor de busca que aparece com CTRL + F, e esta talvez seja a mudança que muitos não gostam, alguns dizem que às vezes pode ser lento para encontrar códigos.

O botão Editar permite-lhe regressar ao editor modelo quando formos na mesma visualização exibe agora dentro do mesmo editor. Eu, pessoalmente, prefiro que seja aberto em uma aba separada para maior visibilidade do modelo espaço e as mudanças que estão sendo implementadas.

Botão Formatar Template organiza o código que você adicionou, de modo que as mudanças que fizemos permaneçam em um ambiente limpo e organizado.

Sem dúvida, a maioria das mudanças são muito boas, mudanças feitas na esperança de nos ajudar a trabalhar melhor quando se muda o modelo de blog. O que você acha?

»»Leia mais

Estrelas de avaliação no blog para o autor

A maioria dos sistemas de pontuação que conhecemos são para que os usuários avaliem uma postagem, mas neste caso não queremos a classificação do usuário, mas do próprio autor. Por exemplo, alguns blogs fazem recomendações de filmes, livros, jogos, etc, e querem colocar a taxa de "qualidade" do que estão falando, é quando podemos usar um sistema de classificação como este, para o autor colocar uma qualificação na postagem do filme, livro, ou o que queira qualificar.

O resultado será assim:

Neste sistema de classificação, vamos depender apenas de sprites CSS, que tem a capacidade de exibir notas parciais, ou seja, podemos dar uma a cinco estrelas, ou uma estrela e meia, duas e meia, e assim por diante.

A primeira coisa que vamos fazer é ir em Template | Editar HTML e colar antes de]]> </ b: skin> colar:


/* Estrelas de avaliação
----------------------------------------------- */
.val-fieldset {
width:100px;
border:none;
font-weight:bold;
font-size:12px;
}
.valoracion {
width: 100px;
height: 21px;
display: block;
0 0 no-repeat;
}
.val-0 {background-position: -100px -0;}
.val-5 {background-position: -81px -21px;}
.val-10 {background-position: -81px 0;}
.val-15 {background-position: -61px -21px;}
.val-20 {background-position: -60px 0;}
.val-25 {background-position: -40px -21px;}
.val-30 {background-position: -40px 0;}
.val-35 {background-position: -21px -21px;}
.val-40 {background-position: -21px 0;}
.val-45 {background-position: 0 -21px;}
.val-50 {background-position: 0 0;}


E na sua postagem onde queira mostrar a qualificação cole o seguinte:


<fieldset class="val-fieldset"><legend>Classificação:</legend><span class="valoracion val- 40 "></span></fieldset>



O que está em vermelho é a qualificação que você dará, neste caso são 4 estrelas. Os valores são múltiplos de 5, onde 0 é nenhuma estrela, 5 meia estrela, 10 uma estrela, 15 uma estrela e meia, 20 duas estrelas, etc. até o 50, que são cinco estrelas.

»»Leia mais

Menu horizontal com sub-abas e buscador integrado

O menu seguinte é feito apenas com CSS, ele é um menu horizontal com sub-abas, e do lado direito tem uma busca arredondada.

Esse menu é útil para aqueles que não necessitam de menus complexos ou preferem não usar um que requeira  scripts e / ou imagens demais, e também a instalação e personalização é bastante simples, e ainda por cima é bastante funcional, e que ter o motor de busca integrado pode ter dois elementos na mesma área.

Você pode vê-lo aqui:  teste neste blog , basta você digitar a palavra de pesquisa e pressionar ENTER.

ATENÇÃO: Se você estiver usando um modelo feito através do Designer de modelo do Blogger primeiro precisa seguir os passos deste post .

Para colocar este menu horizontal com submenus em seu blog vá em Editar HTML no seu modelo, e antes de]]> </ b: skin> cole os estilos: 

/ * Menu horizontal pesquisa 
----------------------------------------------- * / 
MenuWrapper # { 
width: 100%; / * largura do menu * / 
height: 35px; 
padding-left-: 14px; 
background: # 333333; / * cor de fundo * / 
border-radius: 20px; / * bordas arredondadas * / 
} 
. {Menu 
largura: 100%; 
float: left; 
font-family: "Lucida Sans Unicode", "Trebuchet MS Unicode", "Lucida Grande", sans-serif; 
font-size: 13px; / * Tamanho da fonte * / 
font-weight: bold; 
} 
. Menu ul { 
float: left; 
height: 0px; 
list-style: none; 
margin: 0; 
padding: 0; 
border-radius: 20px 20px 0px 0px; / submenu * bordas arredondadas * / 
} 
. Menu li { 
float: left; 
padding: 0px; 
} 
. Menu li a { 
background: # 333333 inferior direito no-repeat; 
color: # cccccc; / cor da fonte * / 
display: block; 
font-weight: normal; 
line-height: 35px; 
margin: 0px; 
padding: 0px 25px; / * espaço entre cada guia * / 
text-align: center; 
text-decoration: none; 
} 
. Menu li a: hover, menu ul li:. Pairar a { 
background: # 2580a2; / * Cor. ao passar * / 
color: # FFFFFF; / Cor do texto * quando passando * / 
text-decoration: none; 
} 
. Menu li ul { 
background: # 333333; submenu Cor / * fundo * / 
display: none; 
height: auto; 
padding: 0px; 
margin: 0px; 
position: absolute; 
width: 200px; / * Largura submenu * / 
z-index: 100; 
border-top: 1px solid # fff; / * borda superior do submenu * / 
} 
. Menu li: hover ul { 
display: block; 
} 
. Menu li li { 
display: block; 
float: none; 
margin: 0px; 
padding: 0px; 
width: 200px; 
} 
. Menu li: hover li a { 
background: none; 
border-radius: 20px 0px 20px 0px; / Edge * sub-abas de * / 
} 
. Menu ul li a { 
display: block; 
height: 35px; 
font-size: 12px; 
font-style: normal; 
margin: 0px; 
padding: 10px 0px 0px 15px; 
text-align: left; 
} 
. Menu ul li a:. Hover, menu li ul li: hover {um 
background: # 2580a2; / * Cor das sub-abas ao passar * / 
color: # ffffff; 
text-decoration: none; 
} 

# Pesquisa { 
width: 228px / * largura do navegador * / 
height: 22px; 
float: right; 
text-align: center; 
margin-top: 6px; 
margin-right: 6px; 
/ * Pesquisa de imagem de fundo * / 
background: url (http://4.bp.blogspot.com/_qgZA1ny_dAs/Szuhn02zO6I/AAAAAAAADdI/u2etpRWlwF8/s1600/search-bar.png) no-repeat; 
} 
# Pesquisa caixa-{ 
margin-top: 3px; 
margem: 0px; 
background: transparent; 
text-align: center; 
}

Em seguida, vá para a seção de design, e adicione um elemento de página HTML / Javascript e cole:

<div id='menuWrapper'> 
<div class='menu'> 
<ul> 
<li><a href=" URL do link "> Aba 1 </a></li> 
<li><a href="#"> Aba 2 </a> 
<ul> 
<li><a href=" URL do link "> Aba 2.1 </a></li> 
<li><a href=" URL do link "> Aba 2.2 </a></li> 
<li><a href=" URL do link "> Aba 2.3 </a></li> 
<li><a href=" URL do link "> Aba 2.4 </a></li> 
</ul> 
</li> 
<li><a href="#"> Aba 3 </a> 

<ul> 
<li><a href=" URL do link "> Aba 3.1 </a></li> 
<li><a href=" URL do link "> Aba 3.2 </a></li> 
<li><a href=" URL do link "> Aba 3.3 </a></li> 
<li><a href=" URL do link "> Aba 3.4 </a></li> 
</ul> 
</li> 

<li><a href="#"> Aba 4 </a> 
<ul> 
<li><a href=" URL do link "> Aba 4.1 </a></li> 
<li><a href=" URL do link "> Aba 4.2 </a></li> 
<li><a href=" URL do link "> Aba 4.3 </a></li> 
<li><a href=" URL do link "> Aba 4.4 </a></li> 
</ul> 
</li> 

</ul> 


<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'> 
<input id='search-box' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Buscar...&quot;;' onfocus='if (this.value == &quot;Buscar...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Buscar...'/></form> 

</div></div>

Coloque as URLs dos links onde se indica asim como o nome de suas abas.

No primeiro código pode-se ver as áreas que podem ser personalizadas tais como a cor, etc.

A aparência redondada do menu tambem é CSS, assim quando se usa um navegador antigo não se verá essas bordas.

Se quiseres adicionar outra aba  adicione antes do último </ul> em cor azul uma linha como esta: 

<li><a href=" URL do link "> Aba 5 </a></li>

Se quiseres que esta tenha submenus então o código que deverás colocar é este: 

<li><a href="#"> Aba 5 </a> 
<ul> 
<li><a href=" URL do link "> Aba 5.1 </a></li> 
<li><a href=" URL do link "> Aba 5.2 </a></li> 
<li><a href=" URL do link "> Aba 5.3 </a></li> 
<li><a href=" URL do link "> Aba 5.4 </a></li> 
</ul> 
</li>

»»Leia mais

Como usar qualquer menu nas planilhas de Design do Blogger

Desde que apareceram as planilhas de Design do Blogger os menus com submenus não funcionam. A razão é que essas planilhas tem estilos predefinidos nesta área e desabilitam qualquer outro menu que se agregue. Para que se tenha esse submenu, é necessário seguir os seguintes passos:

Primeiro, entramos em Design / Editar HTML e clicamos em SIM expandir e busque esta linha:

<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>

Apague o que está em vermelho. 
É possível que se tenha muitas partes como a que está em vermelho, apague todas que encontrar. 
Depois busque esta parte na planilha: 

/* Tabs 
----------------------------------------------- */


E elimine tudo que houver dentro dele. Por exemplo, na planilha Awesome Inc. eliminariamos tudo que está na cor verde :

/* Tabs 
----------------------------------------------- */ 
.tabs-outer { 
overflow: hidden; 
position: relative; 
background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0; 
} 
#layout .tabs-outer { 
overflow: visible; 
} 
.tabs-cap-top, .tabs-cap-bottom { 
position: absolute; 
width: 100%; 
border-top: 1px solid $(tabs.border.color); 
} 
.tabs-cap-bottom { 
bottom: 0; 
} 
.tabs-inner .widget li a { 
display: inline-block; 
margin: 0; 
padding: .6em 1.5em; 
font: $(tabs.font); 
color: $(tabs.text.color); 
border-top: 1px solid $(tabs.border.color); 
border-bottom: 1px solid $(tabs.border.color); 
border-$startSide: 1px solid $(tabs.border.color); 
} 
.tabs-inner .widget li:last-child a { 
border-$endSide: 1px solid $(tabs.border.color); 
} 
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover { 
background: $(tabs.selected.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px; 
color: $(tabs.selected.text.color); 
} 
/* Headings 
----------------------------------------------- */


Depois de apagado, cole em seu lugar o seguinte:

#crosscol ul {z-index: 200; padding:0 !important;} 
#crosscol li:hover {position:relative;} 
#crosscol ul li {padding:0 !important;} 
.tabs-outer {z-index:1;}


Uma vez feito isto, podemos adicionar qualquer menu nos nossos blogs com submenus sem problemas.

»»Leia mais