BLOG DICA QUENTE

Botões de Compartilhamento em Forma Link de Texto ou Imagens

noreply@blogger.com (Anonymous) — Tue, 23 Apr 2013 02:46:00 +0000

Usar botões de compartilhamento nas postagens do blog ajuda que seu conteudo seja compartilhado em redes sociais pelos seus visitantes e por isso é bom conhecer varias opções de personalizar esses botões das redes sociais no seu blog como por exemplo deixar os botões flutuantes ou fixos no canto da pagina, colocar botões de compartilhamento em imagens. Então hoje ou até mesmo criar links de texto ou imagens que ao passar o mouse sobre eles aparecem os botões do Addthis para compartilhar seu conteúdo no Facebook, Twitter, Google+ e outras redes sociais.

Não usa os botões do Addthis no seu blog precisará colocar o código completo dele na sua pagina como um gadget de HTML/javascript. Para fazer isso entre na pagina layout > adicionar gadget > HTML/javascript e cole o código:

<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-5162b7b529880e09"></script>

Lembrete: Se você já tem os botões do Addthis no seu blog então você não precisa colocar esse código!
Colocar botões de compartilhamento em imagens ou textos

Em links de texto o código fica desta forma:

<a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=300&pubid=xa-5162b7b529880e09">Compartilhe</a>

A palavra compartilhe no link você pode alterar para qualquer texto que desejar e usar esses links dentro de postagens ou na sidebar do seu blog. Veja aqui uma demonstração deste código: Passe o mouse aqui para compartilhar.

O trecho do link xa-5162b7b529880e09 é a identificação do Addthis, então se no seu blog já tem os botões e você fez o cadastro para acompanhar as estatísticas dos botões de compartilhamento você deve trocar essa parte pelo seu id igual está no seu código dos botões do Addthis.

Para colocar essa ferramenta de compartilhamento em imagens você deve apenas acrescentar ao código HTML da imagem o trecho class="addthis_button". Quando colocar uma imagem na postagem do blogger clique na guia HTML e coloque o código que mostramos no HTML da imagem, então o código depois de alterado deve ficar parecido com esse:

<a class="addthis_button" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVUBapbdpfFSvrmuM_MrynnRFnon7wNMxdah_aAhrk1BuhlCwZYwFD-8sfk9njdfSdsIzzmEOcS9dL1bwGZ6lfItCKJApHbQpSDkHOZnZcI5Ee186l3CiJe4aPYBlBwqEP4HsUvcWD_ywg/s1600/compartilhar-blog-dica-quente.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="275" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVUBapbdpfFSvrmuM_MrynnRFnon7wNMxdah_aAhrk1BuhlCwZYwFD-8sfk9njdfSdsIzzmEOcS9dL1bwGZ6lfItCKJApHbQpSDkHOZnZcI5Ee186l3CiJe4aPYBlBwqEP4HsUvcWD_ywg/s400/compartilhar-blog-dica-quente.jpg" width="400" /></a>

Esse código da imagem é da imagem deste tutorial, para testar o código e ver como funciona passe o mouse na imagem que está no inicio deste tutorial. Esperamos que gostem dessa dica e encontrem maneiras criativas de usar isso e conseguir mais divulgação para seu site ou blog.

Como Instalar Gadget abaixo do Cabeçalho

noreply@blogger.com (Anonymous) — Tue, 23 Apr 2013 01:34:00 +0000

A maioria dos templates nativos do Blogger, tanto os antigos Minima, quanto os novos modelos Designer de Modelo, já possuem a coluna abaixo do cabeçalho habilitada.
Porém, alguns templates já modificados não possuem este trecho, o que acaba dificultando a instalação de alguns recursos neste local, como Slideshows por exemplo.
Para facilitar, vou mostrar como configurar o template para que ele aceite a instalação de qualquer widget abaixo do cabeçalho, logo abaixo do menu (gadget páginas).

Desta forma facilitará a você leitor que deseja incluir elementos neste local.

Só para lembrar, sempre é bom que você faça um Backup do seu template antes de prosseguir com qualquer instalação para evitar transtornos, caso algo saia errado.

Para instalar qualquer gadget abaixo do cabeçalho, antes de mais nada você precisa conferir no painel do blog se no seu template já existe a possibilidade de adicionar um gadget nesta área, através de “layout”.

Se você estiver usando templates do “Designer de Modelo”, e no seu template tiver configurado o gadget de páginas, ou gadget de lista de links como menu logo abaixo do cabeçalho, provavelmente não terá a possibilidade de adicionar mais um gadget neste trecho.

Se não houver um campo para “Adicionar Gadget” abaixo do cabeçalho, você terá que fazer algumas modificações no código do template.

Vá na edição HTML do seu blog, NÃO marque “Expandir Modelos de Widgets” e procure por:

'crosscol-overflow' showaddelement='no'

onde está ‘no’ , troque por : ‘yes’
Salve!
Se voltar no menu “layout”, verá que existe mais um campo para “Adicionar Gadget” abaixo do gadget “páginas”, é lá que você irá colar o código do widget/gadget que você quer instalar.

Se você estiver usando modelo de Template já modificado, verifique se no seu modelo existe o trecho descrito acima habilitado, e caso não tenha este trecho no seu template, você pode acrescenta-lo.

Vá na edição HTML do seu blog, NÃO marque “Expandir Modelos de Widgets” e procure por:

  <div id='content-wrapper'>

E logo abaixo desta tag cole o seguinte código:

 
<div id='crosscol-wrapper'> <b:section class='crosscol' id='crosscol'/> </div>

Se você retornar em “layout” verá que existe um campo para “Adicionar Gadget” abaixo do cabeçalho, é lá que você irá colar o código do widget/gadget que você quer instalar.

Incluir Gadget Social Follow na Sidebar do blog

noreply@blogger.com (Anonymous) — Tue, 23 Apr 2013 01:25:00 +0000

É sempre bom exibir no seu blog, as redes sociais as quais participa, fazendo com que seus leitores tenham outras opções de acompanhar as novidades que você publica, ou até mesmo como forma de interação.

Hoje veremos como instalar na barra lateral (sidebar) um gadget com botões de acompanhamento para as principais redes sociais: Google+, Facebook, Twitter, Pinterest e subscrição de feed por email.

A instalação é bem simples.

1º passo- Acesse o painel do blogger e vá ao menu “layout”, clique em “adicionar um gadget”, escolha o modo HTML/javascript e cole o seguinte código:


<style type="text/css">
/*<!CDATA[*/
#socialfollow{
width:270px; /*--edite largura se quiser--*/
margin:auto;padding:0;
background:#FFFFFF; /*--edite cor de fundo se quiser--*/
border: 1px solid #ccc;
}
.googleplus {height: 57px;border:0;}
.facebook {
 border-bottom: 1px solid #ccc;margin-top: -2px;padding: 5px 10px;}
.gplusone {
 border-top: 1px solid #ccc;border-top: 1px solid white;
 font-size: .87em;color: black;padding: 9px 0 0 11px;
 line-height: 24px;height:30px;}
.gplusone span {
 display: inline-block;vertical-align: middle;height: 20px;
 margin-top: -17px;font-size: 11px;font-family: "Arial","Helvetica",sans-serif;}
.twitter {
 border-top:1px solid #ccc;border-bottom:1px solid #ccc;}
.twitter a.twitter-follow-button {
 width:200px;display: block;}
.twitter iframe {margin: 9px 11px;}
.pinterest{margin: 9px 11px;}

.emailbox {
border-top: 1px solid #ccc;
padding: 12px 16px;overflow: hidden;}
.emailbox form{
width:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;}
.emailbox input.emailu {
float:left;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border:1px solid #eee;color: #999;padding: 7px 10px 8px;width: 100%;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 13px;}
.emailbox input.emailu:focus {color: #333;}
.emailbox input.submitu {
-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;color: white;padding: 7px 14px;font-weight: bold;font-size: 12px;float: right;cursor: pointer;}
.emailbox input.submitu:hover {
text-decoration: none;}
.submitu{
color:#444 !important;
border:1px solid #CCC;text-shadow:0 1px 0 #fff;background: #dbdbdb;background: -moz-linear-gradient(top, #dbdbdb 0%, #bbbbbb 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dbdbdb), color-stop(100%,#bbbbbb));background: -webkit-linear-gradient(top, #dbdbdb 0%,#bbbbbb 100%);background: -o-linear-gradient(top, #dbdbdb 0%,#bbbbbb 100%);background: -ms-linear-gradient(top, #dbdbdb 0%,#bbbbbb 100%);background: linear-gradient(top, #dbdbdb 0%,#bbbbbb 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbdbdb', endColorstr='#bbbbbb',GradientType=0 );}
.submitu:hover{
background: #e6e6e6;background: -moz-linear-gradient(top, #e6e6e6 0%, #bbbbbb 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6e6e6), color-stop(100%,#bbbbbb));background: -webkit-linear-gradient(top, #e6e6e6 0%,#bbbbbb 100%);background: -o-linear-gradient(top, #e6e6e6 0%,#bbbbbb 100%);background: -ms-linear-gradient(top, #e6e6e6 0%,#bbbbbb 100%);background: linear-gradient(top, #e6e6e6 0%,#bbbbbb 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6e6e6', endColorstr='#bbbbbb',GradientType=0 );}.w2b-moresubs {background: none repeat scroll 0 0 #EBEBEB;border-style: solid;border-width: 1px;border-color: #fff #ccc #ccc;padding: 3px 8px 3px 3px;text-align: right;font-size: 7px;letter-spacing: 1px;}
.getmore a {
display: inline-block;font-weight: normal;text-decoration: none;text-shadow: 1px 1px 1px #fff;font-size:10px; float:right;}
/*]]>*/
</style>
    <div id="socialfollow">
 <div class="googleplus">
     <script type="text/javascript">
  /*<![CDATA[*/
  window.___gcfg = {lang: 'pt'};
  (function(){
      var po = document.createElement("script");
      po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(po, s);
  })();
  /*]]>*/
     </script>
     <div class="g-plus" data-href="https://plus.google.com/ID-PAGINA-GOOGLE-PLUS" data-width="270" data-height="69" data-theme="light"></div>
 </div>
 <div class="facebook">
     <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2FNOME-DA-SUA-PAGINA&send=false&layout=standard&width=250&show_faces=true&action=like&colorscheme=light&font=arial&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:90px;" allowtransparency="true"></iframe>
 </div>
 <div class="gplusone">
     <script type="text/javascript">/*<![CDATA[*/
       (function() {
  var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;
  po.src = "https://apis.google.com/js/plusone.js";
  var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s);
       })();/*]]>*/
     </script>
     <div class="g-plusone" data-size="medium" data-href="URL-DO-SEU-BLOG/"></div>
     <span>Recomende no Google+</span>
 </div>
 <div class="twitter">
     <a href="https://twitter.com/USERNAME-TWITTER" class="twitter-follow-button" data-show-count="true">Follow @mundo_blogger</a>
     <script type="text/javascript">/*<![CDATA[*/!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");/*]]>*/</script>
 </div>
<div class="pinterest">
<a href="http://pinterest.com/USERNAME-PINTEREST/"><img src="http://passets-lt.pinterest.com/images/about/buttons/follow-me-on-pinterest-button.png" width="169" height="28" alt="Follow Me on Pinterest" /></a></div>


  <div class="emailbox">
     <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=NOME-DO-SEU-FEED', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow">
  <table width="100%">
      <tr>
   <td>
       <input class="emailu" name="email" placeholder="Digite seu email" type="text"/>
   </td>
   <td width="64px">
       <input class="submitu" type="submit" value="ASSINE"/>
   </td>
      </tr>
  </table>
  <input name="uri" type="hidden" value="NOME-DO-SEU-FEED"/>
  <input name="loc" type="hidden" value="pt_BR"/>
     </form>
 </div>
 <div class="getmore">
     <a href="http://www.mundoblogger.com.br/2012/08/gadget-social-follow-no-blogger.html">Instale este gadget</a>
 </div>
    </div>

Não esqueça que você deve ALTERAR os trechos destacados em amarelo:
1. Substitua ID-PAGINA-GOOGLE-PLUS pela numeração correspondente a sua página do Google Plus. Para descobrir esta numeração, entre em sua página do Google Plus e verifique toda a URLde sua página, copia apenas o código em número, conforme imagem abaixo:

2. Substitua URL-FACEBOOK-PAGE pelo link da página no Facebook do seu blog.
3. Altere URL-DO-SEU-BLOG pelo link do seu blog.
4. Substitua USERNAME-TWITTER pelo nome de usuário no twitter.
5. Substitua USERNAME-PINTEREST pelo nome de usário do seu perfil no Pinterest.
6. Altere NOME-DO-SEU-FEED por apenas o nome dele (duas vezes).

Postado por: Mundo Blogger.

PopUp para curtir página do facebook com timer

noreply@blogger.com (Anonymous) — Mon, 22 Apr 2013 17:48:00 +0000

Você já deve ter percebido que, ao visitarmos alguns blogs, aparece uma popup divulgando uma página no facebook, convidando seus leitores a curtirem-na.
Atendendo a pedidos,hoje veremos como adicionar uma popup convidando seus leitores a curtirem sua página do facebook.

Adicionando uma Popup divulgando sua página no Facebook, certamente irá ajudar a aumentar o número de fãs na sua página, pois é uma forma de convidar seus leitores a acompanhar seu conteúdo através do facebook.

Este recurso funciona a base de um script que foi criado por Kakiboh. Eu fiz algumas adaptações e modificações no script original.

O diferencial desta popup é que ela possui um timer, onde você poderá estipular o tempo certo para o fechamento da popup.

A instalação é bem simples.

Acesse o painel do blogger, vá até o menu “layout”, clique em “adicionar um gadget”, escolha o tipo “html/javascript” e cole o seguinte código:

#fblikepop {background-color: #fff;display: none;    position: fixed;    top: 200px;    _position: absolute;     width: 450px;    border: 10px solid #6F6F6F;    z-index: 200;-moz-border-radius: 9px;    -webkit-border-radius: 9px;    margin: 0pt;    padding: 0pt;    color: #333333;    text-align: left;font-family: arial,sans-serif;    font-size: 13px;} 
#fblikepop body {background: #fff none repeat scroll 0%;    line-height: 1;    margin: 0pt;    height: 100%;} 
.fbflush {cursor: pointer;    font-size: 11px !important;    color: #FFF !important;    text-decoration: none !important;    border: 0 !important;} #fblikebg {display: none;    position: fixed;_position: absolute;  height: 100%;    width: 100%;    top: 0;    left: 0;    background: #000000;    z-index: 100;} 
#fblikepop #closeable {color: #333;float: right;    margin: 7px 0 0 0;} 
#fblikepop h1 {    background: #6D84B4 none repeat scroll 0 0;    border-top: 1px solid #3B5998;    border-left: 1px solid #3B5998;    border-right: 1px solid #3B5998;    color: #FFFFFF !important;    font-size: 14px !important;    font-weight: normal !important;    padding: 5px !important;    margin: 0 !important;font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;} 
#fblikepop #actionHolder { height: 60px;    overflow: hidden;}
#fblikepop #buttonArea { background: #F2F2F2;    border-top: 1px solid #CCCCCC;    padding: 10px;    min-height: 50px;} 
#fblikepop #buttonArea a { color: #999999 !important;    text-decoration: none !important;    border: 0 !important;    font-size: 10px !important;} #fblikepop #buttonArea a:hover {    color: #333 !important;    text-decoration: none !important; border: 0 !important;} 
#fblikepop #popupMessage {font-size: 12px !important;font-weight: normal !important;    line-height: 22px;    padding: 8px;    background: #fff !important;} 
#fblikepop #counter-display {float: right;    font-size: 11px !important;font-weight: normal !important;    margin: 5px 0 0 0;text-align: right;line-height: 16px;}</style> 
<script src="http://www.google.com/jsapi"></script>
<script>google.load("jquery", "1");</script> 
<script type="text/javascript" src="http://connect.facebook.net/pt_BR/all.js#xfbml=1"></script> 
<script type="text/javascript">
 //<![CDATA[   
  kakinetworkdotcom01username="NOME-DA-SUA-PAGINA",
  kakinetworkdotcom01title="Encontre-nos no Facebook",
  kakinetworkdotcom01time="12",
  kakinetworkdotcom01wait="0",
  kakinetworkdotcom01lang="br"
 //]]>  
 </script> 
 <script type="text/javascript" src="http://mundoblogger.webs.com/scripts/popupFBlikebox.js"></script>
 <script type="text/javascript">
   //<![CDATA[ 
  $(document).ready(function(){$().kakinetworkdotcom({ closeable: true });});  
   //]]>
Atenção aos trechos que você precisa alterar:

kakinetworkdotcom01username="NOME-DA-SUA-PAGINA",
kakinetworkdotcom01time="12" --> onde "12" corresponde ao timer, ou seja, aos segundos restantes para que a popup feche. Altere essa numeração de acordo com o tempo que você preferir.

Só altere os campos destacados em vermelho, não altere mais nada.

Blogger está implantando Sitemap.XML para Blogs

noreply@blogger.com (Anonymous) — Sat, 20 Apr 2013 16:14:00 +0000

Todo blog precisa de um Sitemap para melhorar a indexação nos mecanismos de busca, mas o Blogger nunca teve o formato certo e mais eficiente desse recurso. Sempre foi preciso usar “gambiarras” para criar um Sitemap e integrar, por exemplo ao Webmaster Tools (Ferramentas para Webmasters da Google). Ao que tudo indica os desenvolvedores do Blogger estão resolvendo esse problema e criando o formato certo: arquivos Sitemap.xml que são o padrão da internet.

Por exemplo: O Sitemap do [ Ferramentas Blog ] pode ser visto pelo seguinte endereço:

http://www.ferramentasblog.com/sitemap_index.xml

Veja que o endereço é bem simples e só preciso adicionar um único link lá no Webmaster Tools. No Blogger a coisa é mais complicada e usa um redirecionamento do Atom.XML que gera Feeds. A complicação é tanta que o link para ser colocado no Webmaster Tools fica algo assim:

http://SEU_BLOG.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=100

E para cada 100 artigos publicados é preciso adicionar um novos link exatamente como esse.

O Procedimento de tudo isso para Blogger está melhor explicado no artigo: Criar Sitemap para Blogger – Como usar o Webmaster Tools para Blogs no Blogger.

Sei que o assunto é um pouco técnico, mas é muito importante para o seu Blog no Blogger, pois isso tornará ele mais profissional e eficiente para questões de SEO e indexação no Google.
Agora o Blogger tem Sitemap.XML

A novidade é: parece que a equipe de desenvolvimento do Blogger está aplicando um arquivo “Sitemap.XML” para todos os blogs em sua plataforma, e eliminará a necessidade de gambiarras como a que citamos acima e ensinamos aqui: Criar Sitemap para Blogger – Como usar o Webmaster Tools para Blogs no Blogger.

Desse modo, e já está disponível, todos os blogs no Blogger têm o endereço:

http://SEU_BLOG.blogspot.com/sitemap.xml

Notem bem que é só para quem usa o subdomínio “blogspot.com”. Quem registrou um domínio próprio ainda não pode usar esse recurso.

Vale lembrar também que a equipe do Blogger ainda não publicou oficialmente sobre essa novidade e grande mudança. Pode ser que ainda esteja instável e não funcione direito. Portanto, repito: não use esse modelo de Sitemap no Webmaster Tools ainda.

Este modelo de enviar um sitemap do Blogger que ensinamos ainda está funcionando e não recomendamos que ninguém mude para o novo agora.

Se você digita o endereço do seu blog seguido de “/sitemap.xml” poderá ver uma sequência de códigos como essa da imagem abaixo:

Em Blogs com mais de 1000 artigos publicados esses códigos podem estar divididos em um índice de Sitemaps, separados por páginas.
O que isso muda no Blogger?

Para a média dos usuários do Blogger, isso não muda muita coisa, mas o grande proveito é o fato de ser mais amigável aos mecanismos de busca. Depois que o Blogger implementou um novo menu para preferências de pesquisa, específico para aplicarmos técnicas de SEO em nossos blogs do jeito que o Google gosta, essa mudança agora no Sitemap era o passo natural.
Configurações de SEO para o Blogger – Preferências de pesquisa

Além disso, fica mais fácil administrar seu conteúdo no Webmaster Tools, sem se preocupar se tudo está funcionando ou se está adequado às melhores técnicas de SEO. Seu Blog fica mais amigável e tem mais chances de aparecer bem no Google e em outros mecanismos de Busca.

Por fim, mostra que o Blogger não vai acabar nem ser descontinuado pela Google. Se ainda estão desenvolvendo, então é sinal de que as novidades não vão parar tão cedo. O Blogger fica mais profissional e eficiente, mesmo ainda faltando muito para chegar perto do WordPress.ORG.

Postado por Ferramentas Blogs

Configurações de SEO para o Blogger – Preferências de pesquisa

noreply@blogger.com (Anonymous) — Sat, 20 Apr 2013 15:57:00 +0000

Tutorial completo e detalhado sobre as novidades de SEO do Blogger
Uma das maiores deficiências do Blogger era a tremenda dificuldade de aplicarmos técnicas importantes, mas básicas, de SEO na estrutura do Blog e ajudar a aparecer melhor nos resultados orgânicos (naturais) do Google. Agora, finalmente, o Blogger resolveu esse problema com um completo painel de Configurações para “Preferências de pesquisa”. São muitas opções nativas no painel e rápidas de modificar com recursos de SEO indispensáveis para a sobrevivência de qualquer blog. Mas é preciso ter alguns cuidados com a novidade do Blogger.

Esta é a maior mudança estrutural e de recursos que o Blogger já aplicou e, provavelmente seja a mais importante e relevante para os blogueiros que usam essa plataforma (Agora só falta melhorar o sistema de comentários, mas…). É possível configurar seu blog totalmente com as melhores técnicas de SEO, sem precisar mexer em códigos.

Vou mostrar nesse tutorial tudo o que mudou e como você pode tirar o máximo de proveito de todos os novos recursos que apareceram no menu “Configurações” junto à parte “Preferências de pesquisa”. Recomendo ler com muita paciência, pois se as configurações não forem bem feitas, o prejuízo para o blog será muito maior. O tutorial é longo, mas pode salvar seu blog.
O novo menu “Preferências de pesquisa”

Antes de qualquer coisa é preciso habilitar o recurso para ser aplicado em seu blog e ser possível fazer as modificações necessárias. Você pode optar por não mexer nesse recurso e deixar o Blogger como sempre foi. Isso é recomendável para quem já aplicou manualmente muitas das técnicas de SEO na estrutura do blog. Outra possibilidade é usar apenas os recursos que forem relevantes, já que não é preciso usar tudo o que foi disponibilizado.

Abra o painel do Blogger e clique no menu “Configurações” e você já verá a opção “Preferências de pesquisa”, com na imagem abaixo:

Ao clicar aí, uma janela com as configurações estruturais será exibida. A primeira coisa que se destaca nesse novo menu é o aviso na base da tela sobre o cuidado que se deve ter em fazer tais modificações e aplicações em seu blog:

“Atenção! Use com cuidado. O uso incorreto desses recursos pode fazer seu blog ser ignorado pelos mecanismos de pesquisa.”

Agora vamos às configurações de cada parte e em detalhes para ajudar você a tirar o máximo de proveito de cada recurso e sem riscos. É importante ler o tutorial com atenção, vendo os passos no seu painel e só aplicar o que você achar relevante e útil ou que você tem todas as condições de entender como usar. Então, leia tudo e só depois volte e aplique em seu Blog.
Metatags – Descrições

As Metatags para descrição de uma página de blog são códigos que indicam como será exibido o resumo ou detalhes da página que é visitada. Isso fica mais evidente quando fazemos buscas no Google. Com Metatags podemos alterar e escolher o que vai aparecer na descrição, como no exemplo abaixo:

Antes para fazer essa mudança no Blogger era preciso mexer no código fonte e sempre há o risco de se fazer algo errado e prejudicar radicalmente seu blog se algo fosse feito errado.

Agora no menu “Preferência de pesquisa” você pode definir qual descrição quer manter para apágina principal do seu Blog. Note que aqui estamos tratando apenas da página principal do Blog. Para os posts há outro menu novo também.

Para ativar e escrever uma descrição para a página principal do seu blog, clique no link “Editar” que aparece do lado de “Descrição” e marque “Sim”. Aparecerá uma caixa de texto onde você pode usar até 150 caracteres para criar uma descrição geral do seu blog.

Clique em “Salvar alterações” para aplicar a mudança.

ATENÇÃO: A mudança não é imediata para aparecer nos resultados do Google. Isso pode levar alguns dias para ser visível nos resultados das pesquisas. É o tempo de rastreamento necessário para propagar a mudança.
Descrição para posts individuais

Temos que saltar para uma outra parte. Ao ativar esse recurso de descrição, aparecerá um novo menu no editor de postagens do Blogger. Agora também é possível criar descrições individuais para cada artigo, te dando a liberdade de escolher como serão os resumos dos artigos quando aparecerem nos resultados das buscas.

Antes os resumos eram trechos das primeiras linhas do artigo, mas as vezes esses trechos não refletem o real conteúdo e não ajudam na boa indexação do seu texto e nem são atraentes para o olhar de quem faz a busca.

Indo ao editor de postagens como você faz para criar um novo artigo para seu blog, você notará que agora há uma nova opção na barra lateral direita em “Configurações de postagens”:

Este é um recurso que você TEM QUE USAR sempre em todos os artigos do seu blog. Isso é uma grande ajuda para atrair a atenção de quem encontrar seus links no Google e também é uma excelente técnica de SEO para melhorar sua posição e indexação. Sempre que escrever um novo post, crie uma descrição de resumo especial e atraente para o artigo. Você também pode voltar e criar descrições para posts já publicados.

Continuando dentro do editor de novos posts, outra melhoria é a facilidade em criar títulos e subtítulos, usando as tags H2, H3 e H4 ou manter o texto normal. Na hora de editar seu texto esses códigos HTMLs são de extrema importância para questões internas de SEO ao dizer para o Google o que representa cada parte do texto.

Por exemplo: a Tag H2 é para títulos dentro do artigo e o H3 é para subtítulos. Já o H1 que não aparece como opção é usado no título principal do artigo ou mesmo do Blog.

Isso é muito diferente do que só mexer no tamanho da fonte. O tamanho da fonte indica apenas visualmente sua função no texto, mas temos de lembrar que os robôs do Google não enxergam como nós. Eles olham códigos e os códigos é que dizem o significado e função de cada parte e estrutura de um conteúdo.

Fundamentalmente estas são as coisas mais importantes para os blogs em geral e que são indispensáveis. Acredito que todos devam usar esses recursos de criar descrições e de modificar pequenas estruturas no artigo.
Tags de imagens e links

As melhorias continuam no que se referem às tags para imagens e uso de links internos no Blog. São pequenos detalhes que ampliam suas chances de indexação no Google, especialmente para as imagens. Lembre-se de que é possível pesquisar imagens no Google e é bom pensar nas chances de suas imagens serem encontradas. Além disso, imagens são parte integrante de um conteúdo.

Mais uma vez entra a disputa entre visual e códigos. Pessoas enxergam imagens, mas os robôs do Google só enxergam códigos e os códigos das imagens precisam descrever o que eles exibem. Antes isso era feito no Blogger pela aba “HTML” do editor de postagens e tudo manualmente. Agora já existe um menu que permite inserir títulos e descrições para cada imagem que aparece dentro do post.

Ao marcar uma nova imagem inserida dentro da postagem que você estiver escrevendo, aparecerá vários pequenos links, onde um deles é o “Properties” (Propriedades). Clicando nele será aberta uma caixa de diálogo como pode ser visto abaixo:

Isso permite que cada imagem de seu blog tenha uma descrição individual com as palavras chave importantes para relacioná-la ao seu conteúdo e indexá-la nos resultados do Google Imagens.

Por fim, nessa parte dos artigos, temos o uso dos links dentro do texto.

Agora é possível adicionar a tag rel=”nofollow” que é de extrema importância quando não se quer que os robôs do Google sigam certos links e considerem aquele trecho de informação. Isso é fundamental quando se vende links ou quando você considerar que o link pode ser prejudicial para seu conteúdo, mas é importante para ilustrar algo.

Tudo o que você tem que fazer é quando for adicionar um link dentro do texto, na mesma caixa de diálogo verá as opções, como você pode ver abaixo:

Use esse recurso do NoFollow apenas para links externos ao seu blog e somente quando eles puderem ser potencialmente prejudiciais ao seu conteúdo ou quando forem links patrocinados, comprados por anunciantes. Nos outros links, continue usando o modelo padrão, sem NoFollow.

Aqui terminamos a parte que diz respeito à estrutura geral e descritiva de seu blog e que é fundamental para uma boa indexação no Google. Praticamente todas as técnicas de SEO dependem do bom uso desses recursos e são a linha de frente.

Os próximos passos são definir questões mais técnicas da estrutura do seu blog. Desse ponto em diante é bom ter muita atenção e cuidado, usando apenas se você tiver plena certeza e segurança para mudar algo.
Páginas de Erros e Redirecionamentos

Quando alguém acessa o seu blog procurando por um conteúdo ou endereço que não existe, aparece a página de Erro 404, “Page not found”. No Blogger ela não era possível personalizar e seguia um padrão para todos. Esse modelo ainda está disponível, mas você pode personalizar.

Voltando ao menu “Configurações” ~> “Preferências de pesquisa”, você tem disponível as opções de “Erros e Redirecionamentos” para poder configurar segundo o seu estilo e necessidades. A mais recomendável é criar uma mensagem de “Página não encontrada” que estimule o visitante a continuar visitando o seu blog e não sair frustrado.

Nesse formulário ao clicar para “Editar” a opção “Página não encontrada personalizada”, você pode inserir inclusive códigos HTML, imágens, textos, links e vídeos, até o limite de uma página com 10Kb de tamanho. É o suficiente para muita criatividade. Dedique um tempo para essa criação e personalização de forma que mesmo uma página de Erro 404 seja útil para o visitante.

Nesse espaço você pode incluir links para perguntas mais frequentes, formulário de pesquisa, contato e links para os melhores conteúdos do seu Blog.

Logo abaixo dessa opção temos o “Redirecionamentos personalizados” que podem ajudar a migrar certos conteúdos do seu blog e apontar links secundários para links principais ou mudanças de locais.

Digamos que você precisou excluir um determinado conteúdo e escreveu um novo post que agora é o local definitivo, mas o antigo endereço está bem posicionando no Google. Para não perder as visitas vindas daquele local você pode criar um redirecionamento onde, sempre que o visitante chegar no link antigo, será levado automaticamente para o novo local.

Isso é importante também par não perder links feitos em outros blogs e parceiros. Se alguém aponta para um link que você excluiu, para não cair numa página de Erro 404, o visitante será redirecionado para o novo local com as informações que ele procura.

A configuração e criação de redirecionamentos é bem simples e o sistema do Blogger deve estar usando uma estrutura de código conhecida como “Redirecionamento 301″ evitando perdas de propriedades SEO do link antigo e sem correr o risco de sofrer punições. Serve como aviso ao Google de que um conteúdo mudou para um novo local.

Aparentemente não há um limite de links que podem ser redirecionados.
Rastreadores e Indexação

Estamos no ponto mais crítico do novo painel do Blogger, onde agora é permitido fazer configurações bem na estrutura de rastreamento e indexação do conteúdo do Blog. Este é um ponto bastante técnico e o aviso de ter todo o cuidado é válido para evitar problemas.

O primeiro ponto é a configuração e criação do arquivo “robots.txt”. Basicamente a função dele é dizer aos robôs de rastreamento de páginas o que você quer que eles verifique ou não dentro de tudo o que existe em seu blog. Para ativar essa função é preciso ter conhecimentos técnicos mais avançados.

Tenha o máximo de cuidado aqui!!!

Se você mantiver “Desativado”, será usada a configuração do Blogger, o que é recomendável se você não entende como isso funciona.

Ativar o “Robots.txt personalizado” só é recomendável caso você não esteja usando o Webmaster Tools (Ferramentas para Webmasters) da Google. Lá usa-se uma configuração padrão.

É comum que o código inserido nesse Robots.Txt para o Blogger siga o seguinte modelo de código:

User-agent: Mediapartners-Google
Disallow:
User-agent: *
Disallow: /search
Allow: /
Sitemap: http://www.URLdoBLOG.blogspot.com/feeds/posts/default?orderby=updated

Esse código permite o rastreamento de um Sitemap padrão, acesso à toda estrutura do Blog, exceto os links gerados pelo mecanismo de pesquisa interno do Blog.

ATENÇÃO: Volto a repetir que só se deve usar esse recurso caso você tenha plena certeza do que está fazendo, pois o uso indevido dos códigos pode afetar negativamente o rastreamento do seu blog e fazer perder visitas.

Tags de Cabeçalho de robôs

Para finalizar esse extenso tutorial chegamos no ponto crítico de todos os novos recursos. O novo sistema do Blogger permite que você possa definir individualmente como cada página e parte do seu blog será ou não rastreada pelos robôs do Google.

Tenha o máximo de cuidado aqui!!!

Se você não tem muita certeza de como usar esse recurso, não o aplique em seu blog e mantenha “Desativado” para usar as configurações padrões do Blogger.

Ativando o recurso para configurar tags de cabeçalhos dos robôs, também será criado um novo menu também no editor de postagens que permitirá configurações individualizadas para cada artigo do seu blog.

No menu “Preferências de pesquisa” as configurações são gerais e se aplicam por padrão a todo o Blog. Isso dispensaria as configurações individuas para cada página ou post se você não quiser usar o recurso lá.

São muitas opções e códigos para cada coisa e aí está o perigo e risco na hora de querer mexer em tais recursos sem um mínimo de conhecimento. Numeramos aqui cada uma das partes para explicar individualmente como elas afetam o seu blog.

Nesse menu você pode escolher como certas partes do blog serão ou não rastreadas e/ou indexas pelos robôs dos mecanismos de busca, como o Google.
Página inicial = refere-se à página principal do seu blog e é bom manter por padrão que ela sempre seja rastreada, indexada e avaliada várias vezes pelos robôs. Mantenha marcada a opção “All” e somente ela.
Páginas de arquivo e pesquisa = As páginas de arquivo são onde ficam armazenados o conteúdo do blog. E as de pesquisa são onde exibi-se os resultados das buscas internas do conteúdo. Essas páginas não precisam ser indexadas, especialmente por correr o risco de gerar conteúdo duplicado. Pode-se manter sem nada marcado, usando o padrão do Blogger ou marcar “noindex”.
Padrão para postagens e páginas = Aqui é como se define o padrão para todo o restante do conteúdo, especialmente as postagens individuais. Deixe marcada a opção “All” para que tudo seja sempre rastreado, visitado, indexado e encontrado pelos robôs.

A dúvida surge mesmo quando olhamos aqueles nomes como “noindex”, “nofollow” ou “unavailable_after”. Sem entender o que significa, não dá pra saber como usar. Basicamente cada um daqueles itens têm uma função diferente:
All = permitir que tudo seja rastreado, encontrado e indexado
NoIndex = sugere que o conteúdo em questão não precisa ter indexação, dizendo ao robô que aquele conteúdo não precisa entrar nos resultados das buscas
NoFollow = sugere que aquela página/conteúdo ou links NÃO seja seguido
nono = É equivalente a inserir ao mesmo tempo o “noindex” e o “nofollow”
Noarchive = solicita que não seja exibido o link de “Cache” nos resultados das buscas
Nosnippet = Não exibe o “snippet”, o texto de resumo e link da página nos resultados da busca
Noodp = Não usar metadatas para exibir títulos e descrições nos resultados
Notranslate = Não oferece o link de tradução do conteúdo nos resultados da busca
Noimageindex = Não indexar as imagens contidas naquela página
Unavailable_after = Determina um limite de data, onde após determinado período aquele conteúdo não deverá mais ser exibido nos resultado.
Configurações individuais de postagens

Esse mesmo nível de detalhamento de como um conteúdo pode ser indexado é possível individualizar para cada artigo/post do seu blog, determinando a relevância de cada um.

É importante que você saiba bem o que vai fazer na hora de definir individualmente essas mudanças para cada post e não correr o risco de perder indexações. Tudo o que vimos acima, quando ativado, fica disponível num novo menu do lado direito do editor de postagens:

Assim seu blog pode ter configurações padrões “default” que se aplicam a tudo ou, quando for necessário, criar artigos com especificações próprias. Todo cuidado na manipulação desses menus é pouco. Como disse antes, se não se sentir seguro em mexer em tais pontos, mantenha tudo desativado e o padrão do Blogger.
Finalizando o tutorial e conclusões

Só podemos dizer que este é um grande salto de melhorias para o Blogger. Tudo isso era praticamente impossível usar no Blogger e tornava-o inviável do ponto de vista das melhores técnicas de SEO. Isso tudo coloca o Blogger quase no mesmo nível das possibilidades de configurações dos plugins para WordPress.

Ainda faltou a possibilidade de personalizar as URLs dos posts, Categoriais e Páginas. Também não há configurações de SEO e rastreamento para as Categorias que queremos ou não que sejam indexadas e/ou dar prioridade. Sem esquecer de que a própria estrutura HTML do Blogger não é muito amigável aos buscadores.

Por fim não podemos nos iludir de que isso é a solução para todos os problemas de SEO do Blogger e que agora os blogs nessa estrutura estão lutando de igual para igual com outros. Leva tempo para ver o quanto essas mudanças são eficientes e realmente afetam de forma positiva o Blog e o ajudarão a melhor no Ranking da Google. Só o tempo dirá!

Janela Pop-up automaticas e de links

noreply@blogger.com (Anonymous) — Sat, 20 Apr 2013 15:39:00 +0000

Eu não recomendo, mas tem quem gosta e quer disponibilizar serviços ou outros sites sem fechar a sua janela, abrindo outra quando alguém clica num link ou mesmo fazer abrir outro site quando entram no seu blog. Pode ser útil indicar um link q abra em outra janela quando se disponibiliza um serviço como abrir o FEED do seu blog e se ganha mais visitas para blogs/sites conjugados.

É super simples essa ferramenta, basta um código pequeno e fácil de usar. Com ele se pode definir até o tamanho da janela que vai abrir – muito útil se vc tem um site e quer disponibilizar formulários, por exemplo.

Pop-up automático:

1. Vá ao Editor do HTML do seu blog.

2. Encontre, nas primeiras linhas, o código “<head>” e abaixo dele cole o seguinte código fazendo as devidas modificações (indicado de vermelho):

<script language="javascript">window.open(‘URL DO SEU BLOG‘);</script>

3. Salve o modelo e teste. Sempre que alguém entrar no seu blog, uma janela abrirá automaticamente sem fechar a sua.

Obs.: Lembre-se que muitas pessoas têm anti-pop-ups instalados ou como barras de ferramenta dos navegadores.

Pop-ups de links:

Esse é para quando alguém clicar num link específico, só assim uma janela será aberta.

No local onde deseja colocar o texto-link para o pop-up, escreva a seguinte código com as devidas modificações:

<a href="" onClick="window.open(‘URL DO DESTINO‘); return false;">TEXTO DO LINK</a>

Este código pode ser colocado em elementos de página (gadgets) ou mesmo dentro dos textos de seus artigos.

Mensagem Alerta Pop-up

noreply@blogger.com (Anonymous) — Sat, 20 Apr 2013 15:33:00 +0000

Algumas vezes entramos em sites q exibem mensagens nas caixas padrões com um botão do tipo “Ok” e outro “Cancelar”. Pode ser só um aviso comum ou questionando se queremos continuar naquela ação. Eu não vejo muita utilidade nisso para blogs comuns, mas pode ser interessante em alguns casos específicos como sites de downloads ou de conteúdo restrito ou mesmo para dar algum aviso temporário aos seus visitantes sobre mudanças ou eventos por vir.

A vantagem disso é que evita usar janelas pop-up convencionais que irritam os visitantes e muitas vezes são bloqueadas pelo navegador e acaba que o usuário não lê o aviso que vc quer dar.

Encontrei alguns códigos que podem funcionar bem em seu blog, caso queira colocar essas janelas de avisos ou comunicados. Elas podem abrir de muitos modos e serem de vários tipos. Vou mostrar aqui alguns casos. Já aviso que esta será uma postagem um pouco grande e mais complexa que o comum, pois essa é uma ferramenta mais complicada de ser usada e requer muitos cuidados.

Vele lembrar sempre: quando quiser modificar algo no código HTML do seu blog, mesmo que seja algo simples, faça backup.

Para o aviso aparecer ao entrar na página:

1. Entre em “Layout” e vá em “Editar HTML”. Lá encontre a linha “<body>” no seu código.

2. Abaixo dela coloque o seguinte código com as devidas modificações:

<b:if cond=’data:blog.pageType == "item"’>
<div id=’subscribe’>

<SCRIPT language="JavaScript" type="text/javascript">alert("texto da mensagem")</SCRIPT>

</div>
</b:if>

3. Salve o modelo e teste.

Este alerta só aparecerá na primeira página do seu blog exibindo o texto que vc definir com um botão de “OK” que fechará o alerta.

Para o aviso aparecer ao sair da página:

1. Entre em “Layout” e vá em “Editar HTML”. Lá encontre a linha “<body>” no seu código.

2. Substitua esse código, com as devidas modificações, por:

<body onunload="alert(‘texto da mensagem‘);">

3. Salvar e testar o resultado.

É exatamente como o exemplo acima, mas só abre quando a pessoa sair de sua página.

Mensagem de Alerta com Confirmação:

Este é o caso de a pessoa poder rejeitar ou aceitar algo proposto, do tipo se deseja continuar naquela ação ou retornar para outra página. Contém um botão de “OK” e outro de “Cancelar”.

1. Entre em “Layout” e vá em “Editar HTML”. Lá encontre a linha “<body>” no seu código.

2. Abaixo dela coloque o seguinte código com as devidas modificações:

<b:if cond=’data:blog.pageType == "item"’>
<div id=’subscribe’>

<script language="javascript">
function confirmation() {
var answer = confirm("Mensagem de aviso")
if (answer){
alert("Aviso de confirmação da ação")
}
else{
window.close()
}
}

confirmation()
</script>

</div>
</b:if>

3. Salve e faça o teste.
Antes de tornar definitiva as mensagens, faça vários teste e veja como ficará o resultado final. Não use mais do que uma mensagem de alerta em seu site e só por um período determinado. As pessoas não gostam de sites ou blogs pouco objetivos e que atrapalham sua navegação ou demoram para encontrar o que precisam. Pior ainda se for pra ficar dizendo o que devem ou não fazer.

Como exibir mensagens Pop-up na página do Blog

noreply@blogger.com (Anonymous) — Sat, 20 Apr 2013 15:26:00 +0000

Vou ensinar como exibir mensagens em janelas flutuantes dentro da página do seu blog, que são conhecidas como “modelos pop-up” ou “mensagens pop-up internas” e até como “Topbar”. É um código simples, mas talvez seja um dos recursos mais problemáticos que exista, por um motivo simples: AS PESSOAS ODEIAM POP-UP.

A coisa que mais causa transtorno quando estamos navegando são janelas que se abrem na nossa tela e que não foram solicitadas. Páginas que têm esse recurso tendem a ter uma taxa de rejeição altíssima, pois a tendência das pessoas é fechar sem ler nada.

Esse modelo que vou ensinar só abre uma única vez por seção (ou seria sessão[?]), ou seja, o visitante só verá a janela abrir uma única vez e ela fica rolando e flutuando na tela até ser fechada. Depois, enquanto o visitantes estiver em seu blog naquele dia a janela não aparecerá mais. O problema é se o visitante não voltar mais justamente por culpa do pop-up. Por isso só use esse recurso se você tiver muita certeza de que a informação seja muito relevante para seus visitantes.

Siga os passos corretamente e lembre-se de fazer testes antes de aplicar definitivamente em seu blog. Para os testes é importante que você nunca feche a janela do pop-up para você visualize as mudanças que fizer.

Abra o painel do Blogger e clique no menu “Layout” (Design) ~> “Editar HTML” para ver o código fonte de seu blog. Então siga os passos abaixo.

Passo 1. Colando o estilo.
Procure pela linha “</head>” e imeditamente ACIMA dela cole o trecho:

<style>
#topbar{
position:absolute;
border: 2px solid green;
padding: 5px 0px 0px 0px;
margin: 100px 0px 0px 200px;
background-color: #ffffff;
font-size:12px;
width: 400px;
visibility: hidden;
z-index: 400;}
</style>

Aqui está uma das medidas da janela, a que determina a largura total, que destaquem em vermelho. A altura é determinada pelo conteúdo que virá na janela. Não é bom que a largura passe dos 400px.

Passo 2. Adicionando o JavaScript.
Agora vá imediatamente ABAIXO da linha “</head>” e cole o seguinte sem mudar nada:

<script type="text/javascript">
var persistclose=1
var startX = 20
var startY = 5
var verticalpos="fromtop"
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>

Aqui não precisa mudar nada e é o que executará a janela apenas uma vez para o visitante.

Passo 3. Criando a janela e o conteúdo.
Esse á parte mais complicada. Aqui você tem que criar o conteúdo da janela, seja com imagens ou links, então precisa saber um pouco de HTML para criar algo interessante. eu usei no exemplo apenas uma imagem que quando clicada direciona para uma página. Mas você também pode colocar seus ícones de Feed e assinatura de newsletter, por exemplo, entre outras coisas.

Ainda no código fonte, busque pela linha “<body>” e logo DEPOIS dela cole o seguinte trecho:

<!-- conteudo PopUp Inicio -->
<div id='topbar'>
<p align='right'><a href='' onClick='closebar(); return false'>[Fechar]</a></p>
..... o que desejar colocar na pop-up .....
</div>
<!-- conteudo PopUp Final -->

A linha destaca de rosa é a que fecha
a janela caso o visitante não queira continuar vendo aquilo.
Então, dentro coloque o que quer que seja exibido na topbar. Isso é o que determinará a altura da janela.
Feito isso, salve o modelo e veja o resultado em seu blog.
Por fim, vale ressaltar: esteja atento às reações de seus visitantes e acompanhe bastante as estatísticas de seu blog para ver se a nova janela não está prejudicando muito seu desempenho. É certo que irá prejudicar em alguns aspectos, mas você pode evitar os danos sabendo usar bem esse recurso.

Colocar Pop-up assinar feeds

noreply@blogger.com (Anonymous) — Sat, 20 Apr 2013 14:39:00 +0000

Vários leitores se mostraram interessados em colocar uma janela do tipo pop-up em seus blogs, com o objetivo de convidar os visitantes a assinarem os feeds. Na minha opinião, não gosto e sou contra, mas consegui encontrar um pop-up discretíssimo.

Trata-se de mais uma das artes da Clau, do Mundo Blogger. No script original da Clau, o pop-up aparece com um ícone preto. Fiz algumas modificações - com a autorização dela - e vou ensiná-los como colocar a janela pop-up em seus blogs.

Copie o código abaixo e cole no gadget “HTML/javascript” Antes de salvar , substitua (NOME DE SEU FEED)( que aparece 3 vezes), pela parte final do endereço do feed do blog.

Exemplo: http://feeds.feedburner.com/BLOGDICAQUENTE

A frase que aparece na janela pop-up pode ser modificada, respeitando o número de caracteres para não desconfigurar o gadget.

Atenção! Nos meus templates, o script só funcionou corretamente quando inserido no rodapé (lowerbar). Isso pode mudar de blog para blog, então façam testes, movendo o código dentro dos elementos de página do Blogger.

function iecompattest()
{
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function closebar()
{
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}

if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>
<div id="topbar">

<a href="javascript:closebar();"></a>
<a target="_blank" href="http://feeds.feedburner.com/nomedofeed"></a>
<center>
<font color="#000000"><b>Fique sempre atualizado!<br />Receba artigos por email!</b> </font><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=nomedofeed', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' >
<input name="email" style="WIDTH: 250px" /><input name="uri" type="hidden" value="nomedofeed" /><input name="loc" type="hidden" value="pt_BR" /><input type="submit" value="Assinar" /></form>
</center>
<div style="text-align: center;">
<span
 style="font-size: 65%; color: rgb(0, 0, 0); text-align: center;">Widget
by Blogdicaquente<a target="_blank"
 href="http://blogdicaquente.blogspot.com/2013/04/pop-up-assine-os-feeds.html"><font
 color="#000000"> Instale este widget</font
></a>
<br />
<div class='clear'>
</div>
</span
></div>
</div>

Mostrar Top Comentaristas do Blog

noreply@blogger.com (Anonymous) — Sat, 20 Apr 2013 07:30:00 +0000

Vários códigos para mostrar os Top Comentaristas do Blog têm apresentado problemas, mas achamos um código que funciona e mostra uma lista com as pessoas que mais fizeram comentários no seu blog.
Esse tutorial é uma atualização do código que já publicamos anteriormente: que apresentou erros para criar a lista de Top comentaristas.

Na verdade essa atualização do código para widget de Top comentaristas não foi criada por nós apenas estamos indicando um site que funcionou em vários testes que realizamos, então entre no gerador de gadget do site SemNome.

Digite as informações pedidas na pagina: endereço do seu blog, nome de quem não deve aparecer na lista dos top comentários do blog, quantas pessoas a lista deve mostrar e clique em criar widget.

Depois apenas selecione o blog onde vai instalar o acessório e clique em adicionar widget e já estará tudo pronto. Quando fiz o teste o gadget ficou no topo da pagina, mas você poderá arrastar para a sidebar do blog facilmente e posicionar esse acessório onde desejar na sua pagina.

Um detalhe interessante é analisar depois de alguns dias ou semanas se esse acessório ajudou em algo no seu blog, ou seja, incentivou mais comentários. Afinal tudo que colocamos no blog tem que ter uma utilidade.

Como Ativar a Opção Responder Comentários no Blogger

noreply@blogger.com (Anonymous) — Sat, 20 Apr 2013 07:21:00 +0000

O blogger agora tem a opção responder aos comentários nos seus templates padrão. Isso deixou mais fácil conversar com as pessoas que comentam o blog, mas nem todos os templates isso funcionou corretamente. Vamos mostrar agora como ativar o recurso responder aos comentários do seu blogger.

Normalmente para aparecer o recurso de resposta aos comentários você só precisa configurar o feed do seu blog para publicação completa e usar a configuração dos comentários incorporados a pagina.

Mas alguns templates isso não deu certo e vamos mostrar como resolver os problemas com o “responder aos comentários no blog” para ativar essa novidade no seu site. Entre na pagina modelo mas antes de fazer alterações recomendamos fazer um backup do template. Agora marque a opção Expandir modelos de widgets e procure por:

<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>

E substitua por esse outro código:

<b:if cond='data:blog.pageType == "static_page"'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>

Clique para salvar as alterações e veja se apareceu o link responder aos comentários no seu blog e teste se abre o formulário para comentar no lugar certo.

Caso não encontre o trecho do código então procure pela linha: <b:include data='post' name='post'/> e cole esse código que falamos logo depois dela. Salve as alterações do template, veja se funcionou corretamente e já está tudo pronto.

Colocar Opção de Responder Comentários nas Paginas do Facebook

noreply@blogger.com (Anonymous) — Sat, 20 Apr 2013 07:14:00 +0000

Mostrar a opção de resposta nos comentários nas pagina de fãs do seu blog no Facebook pode ajudar a criar uma maior interação com os visitantes e fãs da sua pagina favorecendo o debate e a troca de opiniões criando algo parecido com um fórum no Facebook. E não se preocupe, pois ativar e desativar a funçãorespostas nos comentários do Facebook é muito fácil e rápido de fazer.

Responder Comentários no Facebook

Adicionar opção Responder comentáriosAtivar respostas aos comentários do Facebook na pagina do seu blog no Facebook é muito simples ao entrar na sua pagina quando estiver logado você verá um aviso sobre a opção Responder comentários então só precisa clicar em ativar as respostas.

Desativar respostas aos comentários do FacebookCaso mude de ideia você poderá desativar as respostas nos comentários do Facebook quando quiser entrando no menu editar pagina > permissões.

Onde encontrará quase no fim da pagina o item:

Respostas: Permitir respostas a comentários na minha Página

Então é só desmarcar essa opção para não permitir respostas nos comentários feitos na sua fã Page no facebook.

Esta postagem foi publicada pelo site: Dicas para Blogs

Como Colocar os Comentários do Google+ no Blogger

noreply@blogger.com (Anonymous) — Sat, 20 Apr 2013 07:04:00 +0000

Colocar os comentários do Google+ no seu blog é muito fácil e pode trazer algumas vantagens para seu blog como, por exemplo, ajudar na divulgação do seu blog no Google Plus. Você pode ativar o formulário de comentários do Google+ no seu blog apenas com uma configuração no painel do blogger que é muito mais simples de fazer do que colocar os comentários do Facebook no seu blog.

Comentários do Google+ no Blogger

Ativar os Comentários do Google+ no BloggerNo painel inicial do blogger entre nas configurações do Google+ e marque o item: Usar Comentários do Google+ neste blog. Se houverem comentários aguardando a moderação de comentários será necessário aprovar ou excluir esses comentários antes de ativar os comentários do Google Plus.

Vantagens e Desvantagens de usar os Comentários do Google+ no BloggerAs principais desvantagens são que somente pessoas cadastradas no Google Pluspoderão comentar seu blog. Além disso, os comentários são vinculados ao domínio do blog, ou seja, poderá perder os comentários se registrar um domínio futuramente, portanto avalie se deve ativar esses comentários no seu blog ou se é hora de colocar um domínio próprio no blogger. Em minha opinião vale a pena usar o domínio próprio afinal isso custa 30 reais ou menos por ano.

As vantagens como falei no inicio do post é a maior divulgação do seu blog no Google+. Você não poderá moderar os comentários previamente, mas receberá noGoogle+ uma notificação dos comentários e poderá excluir os que acharem abusivos entrando na postagem e clicando no link publico > remover.

Você também poderá desativar os comentários do Google Plus apenas desmarcando aquela configuração que falamos no inicio, porém no teste que fizemos os comentários feitos pelo novo formulário do Google+ são perdidos ao desativar a função.

Como Fazer um Menu Vertical Fixo no Blogger

noreply@blogger.com (Anonymous) — Sat, 20 Apr 2013 07:00:00 +0000

Vamos mostrar como colocar um menu vertical fixo na lateral do seu blog, mas esse menu tem o estilo expansível, ou seja, quando passa o mouse sobre o menu o ícone expande e mostra o título do menu dando uma melhor aparência e atraindo atenção dos visitantes.

O código é muito simples de colocar no blog você só precisa entrar na pagina layout, adicionar gadget, escolher a opção HTML/javascript e colar o seguinte código:

#hor a.download {
width:94px;
background:url(vDownload.gif) no-repeat 0 0;
}
#hor a.contact {
width:74px;
background:url(vContact.gif) no-repeat 0 0;
}
/* CSS Style for Vertical Menu */
#ver {
list-style:none;
padding:0;
margin:0;
}
#ver li {
padding:2px;
}
#ver li a {
display:block;
height:12px;
text-indent:-999em;
}
#ver a.home {
width:47px;
background:url(hHome.gif) no-repeat 0 0;
}
#ver a.download {
width:95px;
background:url(hDownload.gif) no-repeat 0 0;
}
#ver a.contact {
width:74px;
background:url(hContact.gif) no-repeat 0 0;
}
.clear {
clear:both;
}
*{
/* A universal CSS reset */
margin:0;
padding:0;
}
#navigationMenu body{
font-size:14px;
color:#666;
background:#111 no-repeat;
/* CSS3 Radial Gradients */
background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));
font-family:Arial, Helvetica, sans-serif;
}
#navigationMenu li{
list-style:none;
height:39px;
padding:2px;
width:40px;
}
#navigationMenu span{
/* Container properties */
width:0;
left:38px;
padding:0;
position:absolute;
overflow:hidden;
/* Text properties */
font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
letter-spacing:0.6px;
white-space:nowrap;
line-height:39px;
/* CSS3 Transition: */
-webkit-transition: 0.25s;
/* Future proofing (these do not work yet): */
-moz-transition: 0.25s;
transition: 0.25s;
}
#navigationMenu a{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq0NrY7fKVjO84bDSVZHSVQYSBrhQQ0jzysCsvqphqIcW902nlmbjv7HnteLywFrlH4Vo9vcz-bzTnk6C5WSrYYh9ab5PRWIFVExob9kj66GbKvQ548C7Gv_9U_rOkbfh25lKa24SnsBI/s1600/navigation.jpg') no-repeat;
height:39px;
width:38px;
display:block;
position:relative;
}
/* General hover styles */
#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
text-decoration:none;
/* CSS outer glow with the box-shadow property */
-moz-box-shadow:0 0 5px #9ddff5;
-webkit-box-shadow:0 0 5px #9ddff5;
box-shadow:0 0 5px #9ddff5;
}
/* Green Button */
#navigationMenu .home { background-position:0 0;}
#navigationMenu .home:hover { background-position:0 -39px;}
#navigationMenu .home span{
background-color:#7da315;
color:#3d4f0c;
text-shadow:1px 1px 0 #99bf31;
}
/* Blue Button */
#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
background-color:#1e8bb4;
color:#223a44;
text-shadow:1px 1px 0 #44a8d0;
}
/* Orange Button */
#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
background-color:#c86c1f;
color:#5a3517;
text-shadow:1px 1px 0 #d28344;
}
/* Yellow Button */
#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
background-color:#d0a525;
color:#604e18;
text-shadow:1px 1px 0 #d8b54b;
}
/* Purple Button */
#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
background-color:#af1e83;
color:#460f35;
text-shadow:1px 1px 0 #d244a6;
}
/*End menu css - info @ http://www.spiceupyourblog.com */
</style>
<div style='position: fixed; top: 40%; left: 10px;'/>
<ul id="navigationMenu">
<li>
<a class="Home" href="endereço da pagina">
<span>Home</span>
</a>
</li>
<li>
<a class="about" href="endereço da pagina">
<span>Sobre</span>
</a>
</li>
<li>
<a class="services" href="endereço da pagina">
<span>Serviços</span>
</a>
</li>
<li>
<a class="portfolio" href="endereço da pagina">
<span>Portfolio</span>
</a>
</li>
<li>
<a class="contact" href="endereço da pagina">
<span>Contato</span>
</a>
</li>
</ul>
</div>
<a href="http://www.spiceupyourblog.com/" target="_blank"><small>Get The Fixed Menu Gadget</small></a>

Você apenas precisa trocar os links e texto do menu, mas cuidado, por exemplo, no trecho: <a class="contact" href="endereço da pagina">
<span>Contato</span> a parte class="contact" é o estilo CSS e você não deve mexer nele. O que podemos alterar é o texto Contato que aparece no final: <span>Contato</span>

Caso o menu fica muito perto da lateral da pagina você pode aumentar a margemmudando o valor 10 nesta linha:<div style='position: fixed; top: 40%; left: 10px;'/>

Para usar outras imagens você precisará fazer uma imagem igual a essa logo abaixo e neste mesmo tamanho 190×78 pixels e posicionando os ícones da mesma forma.

Seria possível usar imagens de outros tamanhos, mas seria necessário alterar o código CSS totalmente fazendo o posicionamento correto da imagem que fundo.

Paginas Dinâmicas do Blogger com Menu de Gadgets Flutuantes

noreply@blogger.com (Anonymous) — Sat, 20 Apr 2013 06:54:00 +0000

O Blogger está com mais uma novidade: as paginas dinâmicas do Blogger agora têm gadgets! Já era aguardado por todos os blogueiros que as Dynamic Views do blogspot permitissem a utilização de gadgets e finalmente isso já está funcionando e você nem precisa modificar nada no seu blog. Os gadgets de seguidores, arquivos do blog, assinar feed, marcadores e alguns outros aparecem automaticamente nos blogs que usam templates dinâmicos templates dinâmicos do blogger(visualização dinâmica).

Os gadgets aparecem em forma de menu flutuante no canto da pagina e você pode usar a pagina layout para adicionar ou remover gadgets a sua escolha naspaginas com visualizações dinâmicas, mas nem todos os gadgets funcionam como já falamos no inicio. E como pode ver na imagem acima o gadget de marcadores mostra o titulo como nas visualizações normais do blog.

Quanto ao gadget de assinar feed se você utilizar também o gadget de atualizações por email eles parecem juntos no mesmo ícone no menu flutuante do blogger e isso pode ajudar a conseguir mais visitas.

Colocar Menu de Navegação no Blogger (Inicio > Marcador > Post)

noreply@blogger.com (Anonymous) — Sat, 20 Apr 2013 06:43:00 +0000

Fazer a barra de navegação no blogger é uma forma interessante de mostrar onde o visitante está no seu site. Estamos falando daquele tipo de menu mostrando inicio > nome do marcador > titulo da postagem. Isso pode ajudar a diminuir a sua taxa de rejeição fazendo os visitantes permanecerem mais tempo na sua pagina já que mostra links dos marcadores no menu de navegação que alguns sites chamam de Gadget Breadcrumb.

Mas para colocar essa ferramenta de navegação no seu blog primeiro sugerimos que faça um backup do seu template já que vamos mexer no código HTML. Agora entre na pagina modelo > editar HTML, marque a opção expandir modelos de widgets.

Procure esse código HTML no seu blogger:
<b:include data='top' name='status-message'/>
<data:defaultAdStart/>

Apague o código, coloque esse outro no lugar e salve as alterações:

<div id='breadcrumbs'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
Você está em:
<a expr:href='data:blog.homepageUrl' rel='tag'>
Início</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>»
<a expr:href='data:label.url' rel='tag'>
<data:label.name/></a>
<b:if cond='data:label.isLast != "true"'/>
</b:loop>
»
<span class='post-title entry-title'>
<data:post.title/>
</span>
</b:if>
</b:loop>
</div>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
Você está em: <a expr:href='data:blog.homepageUrl'>Início</a> » Arquivos de <data:blog.pageName/>
</div>
</b:if>
<b:else/>
<b:if cond='data:navMessage'>
<div class='breadcrumbs'>
Você está em:
<a expr:href='data:blog.homepageUrl'>
Início</a> » Posts da Categoria: <a expr:href='data:label.url' rel='tag'><data:blog.pageName/></a>
</div>
</b:if>
</b:if>
</div>

E já está pronto agora seu blogspot tem um menu de navegação interna do site, mas ainda podemos melhorar e personalizar esse menu usando alguns códigos de formatação de texto.
Então continuamos na pagina editar HTML, mas desta vez vamos procurar por ]]></b:skin> e colocar antes dele:
.breadcrumbs {background-color: #FFC;border: 1px dashed #000;margin: 5px;padding: 3px;}

Menu Horizontal com Efeitos no Blogger usando CSS

noreply@blogger.com (Anonymous) — Sat, 20 Apr 2013 06:02:00 +0000

Criar um menu horizontal para usar no blog é algo fácil de fazer usando os estilos CSS, mas existem muitas coisas que podemos usar para personalizar e colocar efeitos interessantes neste menu com links um do lado do outro como, por exemplo, usar imagens de fundo para criar efeito de botões ou até mesmo colocar um menu com movimentos usando gifs animados.

O que vamos fazer é reunir algumas dessas técnicas para criar um menu mais bonito e com aparência sofisticada, mas vamos aos códigos do menu horizontal, entre na pagina layout do seu blog, clique em adicionar gadget, escolha a opçãoHTML/javascript e cole o código abaixo:

<style type="text/css">
.menu a{font-size:12pt;padding-top:5px; padding-bottom:4px;display: inline-block;width:198px;text-align:center;color: #000;background-image: url(endereço da imagem);}.menu a:hover {background-image: url(endereço da imagem)}</style><div class="menu">
<a href="http://www.dicasparablogs.com.br/" title="Ajuda para Blogueiros">Dicas para Blogs</a><a href="http://www.dicasparablogs.com.br/" title="Ajuda para Blogueiros">Dicas para Blogs</a><a href="http://www.dicasparablogs.com.br/" title="Ajuda para Blogueiros">Dicas para Blogs</a><a href="http://www.dicasparablogs.com.br/" title="Ajuda para Blogueiros">Dicas para Blogs</a><a href="http://www.dicasparablogs.com.br/" title="Ajuda para Blogueiros">Dicas para Blogs</a></div>

Editar e colocar os links no menu horizontal

Para inserir os links do seu blog no menu apenas observe o modelo abaixo e troque conforme desejar:
<a href="http://www.dicasparablogs.com.br/" title="Ajuda para Blogueiros">Dicas para Blogs</a>
http://www.dicasparablogs.com.br - endereço da pagina
Ajuda para Blogueiros - Texto que aparece ao passar o mouse sobre o link
Dicas para Blogs - Texto que aparece no menu

Não pule linhas entre os links, pois alguns navegadores podem dar erro no alinhamento por causa disso, ou seja, escreva o código inteiro como se fosse apenas uma linha.

Personalizar o layout e aparência do menu (editar os Estilos CSS)

A imagem arredondada do menu e o fundo degrade na verdade são imagens de fundo e também o efeito ao passar o mouse sobre os links do menu é uma imagem de fundo. O estilo ".menu a" é a aparencia do menu e ".menu a:hover" é quando passa o mouse sobre o link. Veja o código das imagem dos botões:
background-image: url(endereço da imagem);

Essas são as imagens que usamos:

Em qualquer uma das duas poderíamos usar um gif animado para fazer qualquer feito com imagens você só precisa achar ou fazer uma imagem para usar no menu.

Depois que fizer as imagens você só precisa ajustar as larguras do botão e margens, veja abaixo:
font-size:12pt; - Tamanho da fonte dos links do menu
padding-top:5px; padding-bottom:4px; - espaço acima e abaixo do link dentro do botão
width:198px; - largura do botão
text-align:center; - alinhamento do texto
color: #000; - cor do link

Um problema comum neste tipo de menu é um item ficar embaixo em vez de todos ficarem lado a lado normalmente esse problema é porque não há espaço suficiente onde colocou o gadget, ou seja, o menu tem 900px de largura e seu blog tem 850px então um item vai para a linha de baixo. Mas por outro lado isso pode ser útil caso queria fazer um menu com duas linhas de itens.

Apesar de ser um pouco complicado montar esse código, fazer as imagens e acertar toda a aparência dele depois disso na hora de trocar os links não precisará mais mexer nos códigos CSS e só trocará o link na primeira parte do código (editar os links do menu horizontal). Justamente por isso esse tipo de menu é melhor do que alguns feitos com imagens para cada item. Esperamos que gostem e aproveitem essa dica sobre menu horizontal.

Fazer Menu Accordion no Blog - Criar Sub Categorias no Blogger

noreply@blogger.com (Anonymous) — Sat, 20 Apr 2013 05:23:00 +0000

Criar um Menu Accordion ou menu sanfona no blog pode ser uma forma bem interessante de criar um sub menu no seu blog e com isso aproveitar o espaço para colocar diversos links ocupando pouco espaço no seu template. Ele também pode servir para fazer uma adaptação e criar um menu com subcategorias dos seus marcadores como se fosse um marcador dentro de outro marcador no blogger.

Fazer Menu Accordion no Blogger

Vamos mostrar como colocar esse menu no seu blog e depois como fazer a personalização dele. Entre na pagina Layout > Adicionar Gadget >HTML/javascript e cole o código abaixo:

Colocar os links no Menu AccordionInserir os links neste submenu é simples, mas precisa de cuidado com os detalhes como em qualquer código por isso veja o trecho abaixo ele é apenas um item do menu com seus respectivos subitens, ou seja, você deve repetir esse códigoquantas vezes precisar para criar seu menu completo.

<dt><a href="#">Menu 1</li></a></dt>
<dd>
<ul>
<li><a href="#">Menu 1 - Item 1</a></li>
<li><a href="#">Menu 1 - Item 2</a></li>
<li><a href="#">Menu 1 - Item 3</a></li>
</ul>
</dd>

Agora vamos mostrar o que você deve alterar em cada linha:
<a href="#">Menu 1</li></a></dt> este é o titulo do menu, ou seja, é o botão que parece no seu blog por isso altere somente o texto Menu 1 e o restante fica exatamente como está.

<li><a href="#">Menu 1 - Item 1</a></li> esta linha se repete porque é o link do sub menu que aparece ao clicar no titulo, então troque o texto: Menu 1 - Item 1 pelo que desejar e coloque o link da imagem no lugar do sinal #. Repita isso com todas as linhas e claro você pode adicionar quantas linhas precisar para colocar todos os seus links dentro deste menu.

Personalizar / Fazer a Formatação do MenuNesta parte vamos trocar as cores de fundo, formatação do texto e cores dos links do menu Accordion, veja o que faz cada uma das linhas do código CSS:

dl {width: 300px;} - Largura do menu.

dt {background: #CCC; padding: 5px; margin: 2px; } - Cor de fundo dos títulos do menu.

Aparência do Link dos títulos do menu e efeito ao passar o mouse sobre eles.
dt a {color: #000;font-size: 18px;}
dt a:hover{font-style: italic;}

Formatação e efeitos nos links dos sub itens do menu
dd a {color: #00F;}
dd a:hover{font-weight: bold;}

Criar Sub Categorias nos Marcadores do BloggerO blogger permite criar quantos marcadores você desejar, mas ainda não temos a opção de colocar um marcador dentro de outro marcador, por exemplo, um blog sobre filmes e series gostaria de fazer um marcador filmes e dentro dele subdividir em: comédia, suspense, ficção e romance. Mas podemos usar o menu que acabamos de mostrar para resolver esse problema e fazer as sub categorias no blogspot.

Usando o exemplo que falamos acima crie e utilize esses marcadores normalmente nas suas postagens. Agora veja o exemplo desses marcadores no código do sub menu que mostramos:

<dt><a href="#">Filmes</li></a></dt>
<dd>
<ul>
<li><a href="url do marcador Comédia">Comédia</a></li>
<li><a href="url do marcador Suspense">Suspense</a></li>
<li><a href="url do marcador Ficção">Ficção</a></li>
<li><a href="url do marcador Romance">Romance</a></li>
</ul>
</dd>

Apenas tenha cuidado na hora de copiar a url de cada marcador porque tem que ser exatamente igual é o endereço da pagina do seu marcador, por exemplo, nosso marcador com dicas sobre o Facebook é:
http://www.blogdicaquente.com.br/search/label/Facebook

Mas colocar com letra minúscula na palavra facebook não vai funcionar, tente copiar e colar no seu navegador o link abaixo:
http://www.blogdicaquente.com.br/search/label/facebook
Ele mostrará uma pagina sem nenhuma postagem como se o marcador não existisse.