24 de agosto de 2016

Gadget de Calendário para Blogger

Apresento à vocês um Gadget bastante simples e funcional com objetivo de marcar o dia, mês e ano aos visitantes do seu blog, ou seja, um calendário!


O calendário em si é o mesmo representado na imagem acima e pode ser utilizado em qualquer tipo de blog ou site. A principal funcionalidade dele é a marcação do dia da semana, muito legal né?

Como adicionar o Gadget

  1. Acesse o Painel do Blogger
  2. Vá até Layout do seu blog desejado e escolha a área em que quer adicionar o gadget e clique em Adicionar um Gadget e escolha o HTML/JavaScript e cole o seguinte código:
  3. <style>
    #calendario{
    width: 100%;
    height: 195px;
    }
    </style>
    <div id="calendario">
    <script language="JavaScript">
    <!-- Begin
    var dia_da_semana = new Array('Dom','Seg','Ter','Qua','Qui','Sex','Sab');
    var mes_do_ano = new Array('Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro');
    var Calendar = new Date();
    var ano = Calendar.getFullYear();      
    var mes = Calendar.getMonth();    
    var hoje = Calendar.getDate();    
    var dia = Calendar.getDay();  
    var DIA_DA_SEMANA = 7;    
    var DIA_DO_MES = 31;    
    var imprimir;    
    Calendar.setDate(1);    
    Calendar.setMonth(mes);    
    var TR_start = '<TR>';
    var TR_end = '</TR>';
    var highlight_start = '<TD WIDTH="29"><TABLE CELLSPACING=0 BGCOLOR=E0F8F7><TR><TD WIDTH=29><B><CENTER>';
    var highlight_end   = '</CENTER></TD></TR></TABLE></B>';
    var TD_start = '<TD WIDTH="25"><CENTER>';
    var TD_end = '</CENTER></TD>';
    imprimir =  '<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=0 BORDERCOLOR=1ba0e1><TR><TD>';
    imprimir += '<TABLE BORDER=1 BORDERCOLOR=eeeeee CELLSPACING=0 CELLPADDING=2>' + TR_start;
    imprimir += '<TD COLSPAN="' + DIA_DA_SEMANA + '" BGCOLOR="#f2a41d"><CENTER><B>';
    imprimir += mes_do_ano[mes].fontcolor("White")  + ' <font color="White">  ' + ano + '</font></B>' + TD_end + TR_end;
    imprimir += TR_start;
    for(index=0; index < DIA_DA_SEMANA; index++)
    {
    if(dia == index)
    imprimir += TD_start + '<B>' + dia_da_semana[index] + '</B>' + TD_end;
    else
    imprimir += TD_start + dia_da_semana[index] + TD_end;
    }
    imprimir += TD_end + TR_end;
    imprimir += TR_start;
    for(index=0; index < Calendar.getDay(); index++)
    imprimir += TD_start + '  ' + TD_end;
    for(index=0; index < DIA_DO_MES; index++)
    {
    if( Calendar.getDate() > index )
    {
      week_day =Calendar.getDay();
      if(week_day == 0)
      imprimir += TR_start;
      if(week_day != DIA_DA_SEMANA)
      {
      var day  = Calendar.getDate();
      if( hoje==Calendar.getDate() )
      imprimir += highlight_start + day + highlight_end + TD_end;
      else
      imprimir += TD_start + day + TD_end;
      }
      if(week_day == DIA_DA_SEMANA)
      imprimir += TR_end;
      }
      Calendar.setDate(Calendar.getDate()+1);
    }
    imprimir += '</TD></TR></TABLE></TABLE>';
    
    document.write(imprimir);
    </script></div>
    
  4. Clique em Salvar e pronto!
Seu calendário já está funcionando, se você quiser personalizar a cor de fundo onde marca o mês e ano, pesquise por #f2a41d no código e troque pelo código da cor desejada.

Dúvidas? deixe um comentário.
5 estrelas - baseado em 759 votos

Inferior flutuante Facebook Like Box Widget para Blogger


Às vezes sentimos a necessidade de se envolver mais com o nosso público no Facebook. Fazer uma fã page crescer não é fácil e nem impossível, porém requer de alguns cuidados por parte de nós, blogueiros.

O primeiro cuidado que você deve ter é colocar uma caixa de curtir no seu blog, isso faz com que o visitante curta sua página sem ele precisar acessar o endereço do facebook em si. Pensando nisso estou trazendo para este post um widget bastante discreto e ao mesmo tempo impressionante, eu digo isso pois estou utilizando ele aqui no blog e os resultados são ótimos!

Como instalar

  1. Acesse o Painel do Blogger
  2. Vá até Modelo do seu blog desejado e clique em Editar HTML
  3. Clique sobre o editor e tecle CTRL+F e procure por </b:skin> e logo acima do trecho cole o seguinte código:
  4. #open-fb{background-color: #FFFFFF; border: 4px solid rgb(210, 210, 210); bottom: 0; border-bottom: 0; float:left; height: auto; margin-bottom: 0; margin-right: 5px; position: fixed; right: 0; width: auto; z-index: 10;}
    .close-fb{color: #333!important; position: absolute; top: 1px; right: 1px; width: 20px; height: 20px; line-height: 20px; text-align: center; font-size: 11px;}
    .slideUp{
     animation-name: slideUp;
     -webkit-animation-name: slideUp; 
    
     animation-duration: 1s; 
     -webkit-animation-duration: 1s;
    
     animation-timing-function: ease; 
     -webkit-animation-timing-function: ease;
    
     visibility: visible !important;   
    }
    
    @keyframes slideUp {
     0% {
      transform: translateY(100%);
     }
     50%{
      transform: translateY(-8%);
     }
     65%{
      transform: translateY(4%);
     }
     80%{
      transform: translateY(-4%);
     }
     95%{
      transform: translateY(2%);
     }   
     100% {
      transform: translateY(0%);
     } 
    }
    
    @-webkit-keyframes slideUp {
     0% {
      -webkit-transform: translateY(100%);
     }
     50%{
      -webkit-transform: translateY(-8%);
     }
     65%{
      -webkit-transform: translateY(4%);
     }
     80%{
      -webkit-transform: translateY(-4%);
     }
     95%{
      -webkit-transform: translateY(2%);
     }   
     100% {
      -webkit-transform: translateY(0%);
     } 
    }
    
  5. Agora acima de </body> cole o seguinte código:
  6. <div class='slideUp' id='open-fb'>
    <a class='close-fb' href='#close-fb-like-box' onclick='hide(&apos;open-fb&apos;)' title='Fechar'><i class='fa fa-times'/></a>
    <div class='fb-like-box ' data-header='false' data-height='62' data-href='https://www.facebook.com/AJUDAEMCODIGO' data-show-faces='true' data-stream='false' data-width='187'><span style='height: 62px; width: 187px; '><iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FAJUDAEMCODIGO&amp;width=187&amp;height=62&amp;show_faces=false&amp;colorscheme=light&amp;stream=false&amp;border_color&amp;header=true' style='border:none; overflow:hidden; width:187px; height:62px;'/>
    </span></div></div>
    <script type='text/javascript'>
    
    function show(target) {
        document.getElementById(target).style.display = &#39;block&#39;;
    }
    
    function hide(target) {
        document.getElementById(target).style.display = &#39;none&#39;;
    }
    </script>
    
No trecho destacado AJUDAEMCODIGO, troque pelo usuário da sua página no Facebook, esse usuário é o nosso aqui do Códigos Blogger.

É isso, espero que tenha curtido esta dica e se ficou alguma dúvida, poste um comentário que eu tento ajudar =)


5 estrelas - baseado em 59 votos

12 de julho de 2016

Pacote de meta tags otimizado 2016 para Blogger


O SEO (Search Engine Optimization) é uma das partes se não a mais importante para um blog de sucesso. Já publicamos aqui algumas dicas para melhorar o SEO do seu blog, onde abordamos diversos fatores que podem ajudar ou atrapalhar o SEO.

Neste artigo abordaremos as meta tags e mostraremos o melhor 'pacote' de metas para blogger. Essa meta tags foi pensada para elevar seu blog nos resultados de buscas.

Recursos da meta tags

  1. SEO completo: Pacote completo para embalar o seu blogger.
  2. Títulos otimizados: Todos os títulos de paginas e posts otimizados.
  3. Comentários otimizados: Robôs ajudam indexar comentários do blog.
  4. Arquivos/Categorias: Índice de sua página de arquivos separadamente.
  5. Etiquetas/Tags: Índice de sua página de etiquetas separadamente.
  6. Verificação de código Google, Binge e Alexa: Verificação de todas as ferramentas para webmaster usando ID.
  7. Facebook e Twitter: Toda estrutura para as principais redes sociais pronta, facilitando o compartilhamento de conteúdo do seu blog.
  8. Robôs indexam seu blog no dia
  9. Google + Nome do autor e imagem de perfil compatível
  10. Facebook fã page compatível

Aplicando no blog

Agora que você já viu todos os recursos que esse pacote vai oferecer para o seu blog, é hora de você aprender a instalar ele no blog. Para isso siga os passos a seguir.

  1. Acesse o Painel do Blogger
  2. Vá até Modelo do seu blog desejado e clique em Editar HTML
  3. No editor, tecle CTRL+F5 e procure por <head> e logo abaixo cole o seguinte código
<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<meta content='blogger' name='generator'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<link expr:href='data:blog.url' rel='canonical'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>Página não encontrada - <data:blog.title/></title>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<meta content='noindex' name='robots'/>
</b:if>
<b:if cond='data:blog.searchLabel'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.isMobile'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.pageTitle + &quot;, &quot; + data:blog.title' name='keywords'/>
</b:if></b:if>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:if cond='data:blog.url'>
<meta expr:content='data:blog.url' property='og:url'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' property='og:title'/>
</b:if>
<meta content='website' property='og:type'/></b:if></b:if></b:if>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/></b:if>
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='https://plus.google.com/GOOGLE+ID/posts' rel='publisher'/>
<link href='https://plus.google.com/GOOGLE+ID/about' rel='author'/>
<link href='https://plus.google.com/GOOGLE+ID' rel='me'/>
<meta content='GOOGLE-WEBMASTER-CODE' name='google-site-verification'/>
<meta content='BING-WEBMASTER-CODE' name='msvalidate.01'/>
<meta content='ALEXA-VERIFY-CODE' name='alexaVerifyID'/>
<meta content='São Paulo, Brasil' name='geo.placename'/>
<meta content='SEU-NOME' name='Author'/>
<meta content='general' name='rating'/>
<meta content='Brasil' name='geo.country'/>
<meta content='pt_BR' property='og:locale'/>
<meta content='pt-br' property='og:locale:alternate'/>
<meta name="language" content="portuguese"/>
<meta content='https://www.facebook.com/NOME-DA-PAGINA' property='article:author'/>
<meta content='https://www.facebook.com/NOME-DA-PAGINA' property='article:publisher'/>
<meta content='FACEBOOK-APP-ID' property='fb:app_id'/>
<meta content='FACEBOOK-ADMIN-ID' property='fb:admins'/>
<meta content='@usuario-twitter' name='twitter:site'/>
<meta content='@usuario-twitter' name='twitter:creator'/>
Altere as partes destacadas de acordo com as suas informações. Salve o modelo.

Pronto agora o seu blog está 100% otimizado para mecanismos de busca e compartilhamento em redes sociais.

Dúvidas? deixe um comentário. 


Classificação: 5 Pacote de meta tags otimizado 2016 para Blogger por em . Melhore o posicionamento do seu blog com meta tags atuais e otimizadas para blogger.

6 de julho de 2016

Caixa de captura de e-mails com redes sociais para usar como widget no blogger




Sabemos que a captura de e-mail em um blog é essencial para ter o leitor por perto, no blogger acostumamos usar o FeedBurner para capturar e sempre deixar o leitor por dentro das novidades do nosso blog.

Na hora de pedir o e-mail do visitante é muito importante que o design seja atraente e coerente com a identidade visual do seu blog, passando mais profissionalismo além do blog ficar mais bonito.

Pensando nisso, trouxe um modelo de caixa de capturar e-mails com icones das redes sociais, você pode instalar onde desejar no seu blog, seja nos posts ou sidebar.
  • Como criar uma conta no FeedBurner para meu blog?
Atenção: Antes de fazer qualquer alteração, faça o backup do seu template.

Introdução

Começando com uma caixa bem elegante indo para o tema mais escuro, lembrando que as caixas são personalizadas através do CSS, então você conseguirá deixar como quiser.

Resultado:

Receba nossas novidades por e-mail


Como instalar

  1. Acesse o Painel do Blogger
  2. Vá até Modelo do seu blog desejado e clique em Editar HTML
  3. Procure por </head> e acima dele cole o seguinte trecho:
  4. <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
  5. Agora procure por ]]></b:skin> e acima cole o seguinte código:

  6. #subscribebox{background:#576269;padding:20px;color:#fff;font-size:15px;text-align:center;}/*Responsavel pelo fundo da caixa, troque o background para a cor que desejar*/
    .widget_follow_subscribe .widget-detail{padding:36px 30px 40px}
    .follow-subscribe-social{margin:0 0 15px;padding:0 0 14px;border-bottom:#858585 solid 1px}
    .follow-subscribe-social ul{list-style:none;margin:0;padding:0;text-align:center}
    .follow-subscribe-social ul li{display:inline;margin:0 15px 0 0;border-bottom:none}
    .follow-subscribe-social ul li:last-child{margin:0}
    .follow-subscribe-social ul li a{font-size:17px;color:#cacaca;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;transition:color .2s ease-in-out}
    .follow-subscribe-social ul li a:hover{color:#fff}
    form.subscribe{margin-top:-7px}
    form.subscribe input{display:block;width:100%}
    .subscribe-email{height:45px;border:none;margin:0 0 10px;font-size:.928571em;background-color:rgba(255,255,255,0.2);text-align:center;color:#fff} .subscribe-email:focus{outline:0}
    form.subscribe .placeholder{color:#cacaca}
    form.subscribe input:-ms-input-placeholder{color:#cacaca}
    form.subscribe input::-webkit-input-placeholder{color:#cacaca}
    form.subscribe input:-moz-placeholder{color:#fafafa}
    form.subscribe input::-moz-placeholder{color:#fafafa}
    .subscribe-button{height:45px;font-weight:700;font-size:16px;color:#fff;text-transform:uppercase;border:none;background-color:#F35D5C;-webkit-transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out;cursor:pointer;}/*Troque o background para alterar a cor do botão Inscrever-se*/
    .subscribe-button:hover{background-color:#f1d640}
    .subscribe-button:focus{outline:0}
  7. Salve o modelo
  8. Depois vá até Layout, escolha a área que quer exibir a caixa e clique em Adicionar Gadget e escolha HTML/JavaScript e cole:
  9. <div id="subscribebox">
    <div class="follow-subscribe-social">
    <ul>
    <li><a href="#LINK" target="_blank"><i class="fa fa-facebook"></i></a></li>
    <li><a href="#LINK" target="_blank"><i class="fa fa-twitter"></i></a></li>
    <li><a href="#LINK" target="_blank"><i class="fa fa-linkedin"></i></a></li>
    <li><a href="#LINK" target="_blank"><i class="fa fa-google"></i></a></li>
    <li><a href="#LINK" target="_blank"><i class="fa fa-pinterest-p"></i></a></li>
    <li><a href="#LINK" target="_blank"><i class="fa fa-dribbble"></i></a></li>
    <li><a href="#LINK" target="_blank"><i class="fa fa-instagram"></i></a></li>
    </ul>
    </div>
    <h3>Receba nossas novidades por e-mail</h3>
    <form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=USUARIO-DO-FEED' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=USUARIO-DO-FEED, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
    <input name='uri' type='hidden' value='USUARIO-DO-FEED'/>
    <input name='loc' type='hidden' value='pt_BR'/>
    <input class="subscribe-email" type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Digite seu melhor e-mail&quot;;}' onfocus='if (this.value == &quot;Digite seu melhor e-mail&quot;) {this.value = &quot;&quot;;}' value='Digite seu melhor e-mail'/>
    <input class="subscribe-button" type="submit" value="Quero Receber" />
    </form>
    </div>
Feito isso, altere o #LINK para os respectivos links de cada rede social, você pode excluir a linha da rede social que não for utilizar. Altere também o trecho destacado USUARIO-DO-FEED pelo seu usuário quando você cadastrou seu blog no FeedBurner e salve.

Dúvidas? deixe um comentário.

Classificação: 5Caixa de captura de e-mails com redes sociais para usar como widget no blogger por em . Aprenda a colocar uma caixa de captura de e-mails elegante no blogger.

19 de junho de 2016

Estrutura em HTML5 para começar um template no Blogger

Estrutura para começar um template no blogger

Muitas pessoas tem dúvida da estrutura correta para usar para fazer um template do ZERO no blogger, como sabemos o blogger é cheio de tags e isso pode deixar a nossa cabeça um pouco confusa mesmo.

Por isso vou mostrar aqui a estrutura básica, mas bem básica mesmo de como podemos começar a criar nossos próprios templates.

Qual é a estrutura básica para template no blogger?

Como disse acima, o blogger tem várias tags que possibilitam o desenvolvimento nele. Vamos começar com a estrutura básica.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html lang="pt-br">
     <head>
    <b:skin></b:skin><!--Aqui vai todo o CSS do seu template-->
     </head>
    <body>
    <header></header>
    <b:section id="main" />
    <footer></footer>
    </body>
</html>
Bem básico né? porém com ele o blogger já vai aceitar o seu desenvolvimento. É claro que faltam adicionar várias tags ainda, além de fazer toda a marcação de SEO, mas isso não é o propósito nesse artigo.

Basicamente é isso, agora é só você mandar bala no desenvolvimento do seu template, procure pesquisar mais sobre as tags que o Blogger oferece para que você otimize seu desenvolvimento.

Se você curtiu o assunto, deixe um comentário, talvez posso criar uma video-aula de como criar um template semântico e responsivo no Blogger.

Classificação: 5 Estrutura em HTML5 para começar um template no Blogger por em . Aprenda a começar um template do zero com HTML5 no Blogger.

8 de junho de 2016

Gadget de Últimos Comentários do Blogger


Mais um super tutorial aqui no Códigos Blogger, hoje estou trazendo um gadget que vai exibir os últimos comentários do seu blog com um link para visualizar cada comentário no ranking completo.

A implementação é bem fácil, porém requer um pouco de atenção e cuidado para não danificar nada em seu blog. O mesmo gadget está sendo utilizado aqui no Códigos Blogger.

Vale ressaltar que esse código vai funcionar apenas se você utilizar o sistema de comentários nativo do blogger.

Como instalar

Atenção: Antes de fazer qualquer alteração, faça o backup do seu template.

  1. Acesse o Painel do Blogger
  2. Vá até Modelo do seu blog desejado e clique em Editar HTML
  3. Clique sobre o editor de código e tecle CTRL+F e procure por </b:skin> e abaixo dele cole o código abaixo e clique em Salvar Modelo
  4. <script type='text/javascript'>
    //<![CDATA[
    /**
     * Últimos Comentários no Blogger
     * Version : 1.0
     * Author  : Códigos Blogger
     * Author Url  : http://www.codigosblogger.com
     *
     * --==Opções==--
     *   var  numComments  = 5,
     *    showAvatar  = true,
     *    avatarSize  = 60,
     *    roundAvatar = true,
     *    showMorelink = false,
     *    moreLinktext = "More &raquo;"
     *    characters  = 40,
     *    defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
     *    hideCredits = false;
     *
     */
    eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('7 D=D||5,9=9||19,A=A||1a,m=m||"h://W.S.g/16/?d=18",E=E||" 1p &1f;",v=(p v===\'o\')?j:v,z=(p z===\'o\')?Z:z,n=(p n===\'o\')?j:n,M=(p M===\'o\')?Z:n;1l 12(L){7 b;b=\'<Y C="12">\';H(7 i=0;i<D;i++){7 x,y,2,k;4(i==L.14.8.q)1g;b+="<X>";7 8=L.14.8[i];H(7 l=0;l<8.I.q;l++){4(8.I[l].1j==\'1o\'){x=8.I[l].w}}H(7 a=0;a<8.K.q;a++){y=8.K[a].1i.$t;2=8.K[a].1h$1k.N}4(2.f("/O/")!=-1){2=2.u("/O/","/s"+9+"-c/")}e 4(2.f("/T/")!=-1){2=2.u("/T/","/s"+9+"-c/")}e 4(2.f("/U-c/")!=-1&&2.f("h:")!=0){2="h:"+2.u("/U-c/","/s"+9+"-c/")}e 4(2.f("G.g/B/1n-P.J")!=-1){2="h://3.13.Q.g/-1m-1e/17/1c/1b/s"+9+"/15.R"}e 4(2.f("G.g/B/1d-P.J")!=-1){2="h://3.13.Q.g/-1R/1U/1P/1K/s"+9+"/1J.R"}e 4(2.f("G.g/B/1M.J")!=-1){4(m.f("S.g")!=-1){2=m+"&s="+9}e{2=m}}e{2=2}4(v==j){4(n==j){k="1O"}e{k=""}b+="<V C=\\"1T "+k+"\\"><B C=\\""+k+"\\" N=\\""+2+"\\" 1H=\\""+y+"\\" 1w=\\""+9+"\\" 1I=\\""+9+"\\"/></V>"}b+="<a w=\\""+x+"\\">"+y+"</a>";7 11=8.1v.$t;7 6=11.u(/(<([^>]+)>)/1u,"");4(6!=""&&6.q>A){6=6.1r(0,A);6+="&1s;";4(z==j){6+="<a w=\\""+x+"\\">"+E+"</a>"}}e{6=6}b+="<r>"+6+"</r>";b+="</X>"}b+=\'</Y>\';7 F="";4(M==j){F="10:1F;"}b+="<r 1G=\\"1E-1D:1A;10:1B;1C-1S:1z;"+F+"\\">1y 1t<a w=\\"h://W.1x.1L/\\">1Q</a></r>";1N.1q(b)}',62,119,'||authorAvatar||if||commBody|var|entry|avatarSize||commentsHtml|||else|indexOf|com|http||true|avatarClass||defaultAvatar|roundAvatar|undefined|typeof|length|span|||replace|showAvatar|href|commentlink|authorName|showMorelink|characters|img|class|numComments|moreLinktext|hideCSS|blogblog|for|link|gif|author|w2b|hideCredits|src|s1600|rounded|blogspot|png|gravatar|s220|s512|div|www|li|ul|false|display|commHTML|w2b_recent_comments|bp|feed|w2b_blogger_logo|avatar|TxMKLVzQ5BI|mm|60|40|QYau8ov2blE|AAAAAAAABYY|openid16|1X32ZM|raquo|break|gd|name|rel|image|function|AaI8|b16|alternate|More|write|substring|hellip|by|ig|content|width|way2blogging|Widget|right|10px|block|text|size|font|none|style|alt|height|w2b_openid_logo|8iasY0xpLzc|org|blank|document|avatarRound|AAAAAAAABYc|Way2Blogging|9lSeVyNRKx0|align|avatarImage|TxMKMIqMNuI'.split('|'),0,{}))
    //]]>
    </script>
  5. Depois de salvar, vá até Layout, escolha a área que quer exibir o gadget e clique em Adicionar um Gadget
  6. Escolha o gadget HTML/JavaScript e cole o código abaixo nele e Salve
<style type="text/css">
    ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
    .w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
    .w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
    .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
    .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
    .w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
 numComments  = 20,
 showAvatar  = true,
 avatarSize  = 30,
 roundAvatar = true,
 showMorelink = true,
 moreLinktext = "Ler &raquo;"
 characters  = 30,
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://ENDEREÇO-DO-SEU-BLOG/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

Entendendo o código destacado:

numComments - Número de comentários a ser exibido pelo gadget.
showAvatar - 'true' exibe a foto do comentarista, mude para 'false' caso não queira exibir.
showMorelink - 'true' exibe o link para ler o comentário completo, mude para 'false' caso não queira exibir.
moreLinktext - Texto que é exibido para ler o comentário completo.
characters  - Quantidade de caracteres do comentário.
ENDEREÇO-DO-SEU-BLOG - Exemplo: www.codigosblogger.com

Altere os campos como desejar e salve. Pronto agora você já pode visualizar gadget no seu blog.

Dúvidas? deixe um comentário.


Classificação: 5 Gadget de Últimos Comentários do Blogger por em . Aprenda a colocar um gadget de últimos comentários do seu blog com foto e link para o ler o comentário completo.

30 de maio de 2016

12 Balões de comentários para colocar ao lado do título das postagens no Blogger

Comentários em forma de balão ao lado do título da postagens é uma boa alternativa para você personalizar o seu blog. O balão é exatamente o da imagem acima, porém vamos deixar outros mais personalizados também.

Aplicando no blog

  1. Faça o login no Painel do Blogger.
  2. Vá até Modelo de seu blog desejado e clique em Editar HTML.
  3. Clique sobre o editor do blogger e tecle CTRL+F e procure por <b:includable id='post' var='post'> e exatamente abaixo dele, cole o código do balão que escolher abaixo.
Vamos aos balões, escolha um e cole abaixo do trecho encontrado acima.
<span class="post-comment-link-arriba" style='background: url(https://3.bp.blogspot.com/-cuHg1PKGS9k/V0xShkbQ8NI/AAAAAAAAFVg/fBiLm-mbMcI3l5dSaHJ1t6uTK1_u02lqwCKgB/s1600/balao-cinza-codigosblogger.png) no-repeat top right; width:50px; height:50px;padding-top:10px;float:right; text-align:center;'><b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='text-decoration:none;color:#fff;'><b:if cond='data:post.numComments == 1'>1 <b:else/><data:post.numComments/></b:if></a></b:if></span>
A parte destacada no código é a URL da imagem do balão. Abaixo segue mais opções de balões, copie a URL do balão desejado e troque pelo trecho destacado no código.

 https://2.bp.blogspot.com/-10fn_JCyoXY/V0xZw4U6EAI/AAAAAAAAFWA/B17EMUG7SdY7839QeQYb8ErCNsfXXGi_ACLcB/s1600/balao-vermelho-codigosblogger.png

https://1.bp.blogspot.com/-hRABg_Ekft4/V0xZw8akhbI/AAAAAAAAFWE/FRLBJTiN5N8KjHqAxmB6Ooeqb7zxk-ekwCLcB/s1600/botao-preto-codigosblogger.png 

https://3.bp.blogspot.com/-yLbi_Yd48sk/V0xaTaLQHqI/AAAAAAAAFWI/GUlPcGX6NlE7rWnVvayaaE9SRcydgUFTACLcB/s1600/balao-laranja-codigosblogger.png

https://4.bp.blogspot.com/-EBN2QOO2kDA/V0xa2dJbYOI/AAAAAAAAFWQ/lGaftPUCVfclrIYmw3VxLMilBD-BOUSVgCLcB/s1600/balao-rosa-codigosblogger.png

Balões personalizados

 

https://4.bp.blogspot.com/-TR6FXLIu9n4/V0xbUznQsUI/AAAAAAAAFWY/D9zF7VF2ZpozE5LCMiMj-xTZh2g5i4dFQCLcB/s1600/balao-personalizado-azul-codigosblogger.png

https://4.bp.blogspot.com/-AEyP2rjxIus/V0xbvuSF4eI/AAAAAAAAFWg/UboRW7Gv7CoMt7yS3XSU2DsoEY0Pq15GgCLcB/s1600/balao-personalizado-vermelhado-com-listras-codigosblogger.png

https://2.bp.blogspot.com/-pl0m6OC51Gk/V0xcDv51MPI/AAAAAAAAFWo/fW7ZWoSAftQKcMPB9BeY3QcttSyOpIY0wCLcB/s1600/balao-personalizado-azul-com-bolhas-codigosblogger.png

https://2.bp.blogspot.com/-tGRaCwsCfwE/V0xcfaZb4FI/AAAAAAAAFW0/1TjLrwp4gycHQaniHt6xH8MEqRNWAN0ewCLcB/s1600/balao-personalizado-nuvem-rosa-codigosblogger.png

https://3.bp.blogspot.com/-OF5iej4Qu0w/V0xcswrzY4I/AAAAAAAAFW4/ZmXd3iwenA0EVS8CmmIlhMhZTZTZu7lDgCLcB/s1600/balao-personalizado-amarelo-listrado-codigosblogger.png

https://2.bp.blogspot.com/-U-6w7uTcWYg/V0xc_m-EArI/AAAAAAAAFXA/p5c140HJaB8hdRb79qiBhJh_9g7nHUnGwCLcB/s1600/balao-personalizado-vinho-codigosblogger.png

https://2.bp.blogspot.com/-J_UoxIzloF8/V0xdRYNizEI/AAAAAAAAFXI/m8R6D97lq3ICv0N44tDoceHU_AY5ks9HwCLcB/s1600/balao-personalizado-rosa-codigosblogger.png

Para os balões personalizados, pode ser que você precise configurar melhor a posição do número de comentários, cor etc.

Para fazer essas personalizações no código, observe o trecho  <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='text-decoration:none;color:#fff;'> onde color é referente a cor do número que será exibido no balão.

Se o numero não ficar no meio do balão, você pode personalizar a posição dele no seguinte trecho <span class="post-comment-link-arriba" style='background: url(link-do-balao-escolhido) no-repeat top right; width:50px; height:50px;padding-top:10px;float:right; text-align:center;'> onde padding-top você controla a posição vertical, se quiser controlar a posição horizontal, adicione um padding-left ou padding-right e informe os pixel que fique alinhado com o botão.

Faça vários testes até ficar tudo certinho.

Dúvidas? deixe um comentário.

Classificação: 5 12 Balões de comentários para colocar ao lado do título das postagens no Blogger por em . Aprenda a colocar um balão de comentários ao lado do título das postagens no Blogger.