6 de fevereiro de 2017

Notificar usuário com adblock no Blogger

Adblock é uma extensão para navegador, com ele é possível bloquear todas as propagandas do seu blog. Sim, entendo que para alguns sites essa extensão é muito útil, porém isso pode prejudicar muito o autores de conteúdo na internet, principalmente se você utiliza o Google Adsense no seu blog.



Bom para tentarmos lhe ajudar com isso, vamos mostrar como detectar esses usuários que utilizam Adblock em seu blog e assim exibir uma mensagem para ele. Nesta mensagem você pode colocar o que quiser para convencê-lo a desativar o Adblock pelo menos em seu blog.

Como Notificar Usuário AdBlocker no Blogger

É como eu sempre digo: vamos por a mão na massa agora!
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 > Editar HTML  do seu blog desejado, clique sobre o editor de código e tecle CTRL+F e procure por ]]></b:skin> e imediatamente acima, cole:
  3. 
    /* Notificação AdBlock CódigosBlogger.com */
    #keep-ads{padding:0;position:fixed;bottom:0;opacity:0;height:auto;transition:all .6s cubic-bezier(.25,.8,.25,1);-webkit-transform:translateZ(0);transform:translateZ(0);backface-visibility:hidden;transition:all .2s ease-in-out,visibility 0s;transform-origin:bottom center;}
    .keep-adsme{background:#e74c3c;color:#fff;position:absolute;text-align:center;padding:0 30px 30px 30px;margin:auto;top:30%;left:0;right:0;font-size:1.5rem;line-height:1.5;font-family:monospace;max-width:930px;box-shadow:0 20px 10px -10px rgba(0,0,0,0.15);transition:all .6s cubic-bezier(.25,.8,.25,1);border:15px solid rgba(0,0,0,.07);overflow:hidden;}
    .keep-adsme:hover{box-shadow:0 20px 10px -10px rgba(0,0,0,0.2);}
    .keep-adsme h4{display:inline-block;background:rgba(0,0,0,.07);padding:5px 25px 15px 25px;font-size:2.2rem;margin:0 auto}
    #keep-ads p{margin:0}
    #keep-ads a{color:#ffe88b;}#keep-ads a:hover{color:#ffe88b;text-decoration:underline}
    #keep-ads.show{left:0;top:0;right:0;z-index:1000;pointer-events:auto;opacity:1;visibility:visible;transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);animation:wobble .7s;opacity:1;}
    .close-keep-ads{visibility:hidden;opacity:0;color:#ffe88b;text-align:center;position:absolute;bottom:10px;right:10px;font-size:42px;cursor:pointer;width:30px;height:30px;line-height:30px;border-radius:100%;transition:all .6s cubic-bezier(.25,.8,.25,1);transform:translate(0,50px);}
    .close-keep-ads:hover{color:#fff;transform:scale(1.0);}
    .keep-adsme:hover .close-keep-ads{visibility:visible;opacity:1;color:#ffe88b;transform:translate(0,0);}
    #keep-ads p span {font-family:fontawesome;font-size:5rem;}
    @keyframes wobble{0%{transform:scale(0) rotate(-54deg) translatey(40px)}45%{transform:scale(1.1) rotate(20deg) translatey(0px)}60%{transform:scale(1) rotate(-15deg) translatey(0px)}77%{transform:scale(1) rotate(10deg) translatey(0px)}100%{transform:translatey(0)}}
    
  4. Agora procure por </body> e acima cole:
  5. 
    <div id='keep-ads'>
    <div class='keep-adsme'>
      <p><h4>Adblock Detectado</h4></p>
      <p><span><i aria-hidden='true' class='fa fa-exclamation-triangle'/></span></p>
      <p>PRIMEIRA LINHA DA MENSAGEM ALTERE AQUI</p>
      <p>SEGUNDA LINHA DA MENSAGEM ALTERE AQUI</p>
      <p>Muito obrigado, NOME DO SEU BLOG</p>
    <div class='close-keep-ads' onclick='hidekeep()'>×</div>
    </div>
    </div>
    <script type='text/javascript'>
    //<![CDATA[
    // Notificação AdBlock CódigosBlogger.com
    function hidekeep(){document.getElementById("keep-ads").style.display="none"}setTimeout(function(){var e=document.getElementById("keep-ads"),t=document.querySelectorAll("ins.adsbygoogle");0===$(t).height()&&(e.className="show")},2e3);
    //]]>
    </script>
    
  6. Altere o trechos destacados em negrito no código pela mensagem que você quer passar para os usuários detectados no AdBlock em seu blog.
  7. Salve o Modelo
Estamos utilizando icones Font Awesome para deixar a caixa mais bonita, certifique-se de que o seu blog tenha a biblioteca instalada. Se não tiver, copie e cole o trecho abaixo, acima de </head> do seu template.

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

Pronto, agora seu blog passará a exibir a mensagem em uma linda caixa com javascript.

Dúvidas? deixe um comentário abaixo.

Links de postagens relacionadas no meio dos artigos no Blogger

Hoje vou ensinar uma dica muito útil, com ela será formado uma lista no meio da sua postagem, com links de posts relacionados. Isso pode melhorar muito o tráfego do seu blog.


A instalação é fácil, porém deve ser feita com bastante atenção. Aqui vou mostrar dois estilos diferentes de listas para você aplicar em seu blog.

Veja também:

Como colocar Posts relacionados nos artigos automático

Vamos lá, siga atentamente os passos abaixo.
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 > Editar HTML do seu blog desejado, clique sobre o editor e tecle CTRL+F e procure por </head> e imediatamente acima, cole:
  3. 
    <b:if cond='data:blog.pageType == "item"'>
    <script type='text/javascript'>
    //<![CDATA[
    var relatedSimply = new Array(); var relatedSimplyNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedSimply[relatedSimplyNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedSimplyNum] = entry.link[k].href; relatedSimplyNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedSimply[i];}} relatedSimply = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((relatedSimply.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedSimply.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedSimply[r] + '</a></li>'); if (r < relatedSimply.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
    //]]>
    </script>
    </b:if>
    
  4. Escolha um modelo abaixo e cole o código acima de ]]></b:skin>
  5. 
    /* Postagens Relacionadas Modelo 1  - CódigoBlogger.com */
    .related-simplify{position:relative;padding:0;margin:15px auto;width:100%;}
    .related-simplify h4{background:#3498db;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#fff;border:1px solid #2e88c5}
    .related-simplify ul{margin:0;padding:0}
    .related-simplify ul li{background:#f6f6f6;position:relative;list-style:none;padding:9px;margin:auto;line-height:1.4em;border:1px solid rgba(0,0,0,0.1);border-bottom:0;transition:all .3s}
    .related-simplify ul li:nth-child(odd){background:#fefefe}
    .related-simplify ul li:last-child{border-bottom:1px solid rgba(0,0,0,0.1)}
    .related-simplify ul li:before{content:'\f138';font-family:fontawesome;position:absolute;margin:0 9px 0 4px;color:#2ecc71;overflow:hidden;transition:all .3s}
    .related-simplify ul li:hover:before{content:'\f138';font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
    .related-simplify a{color:#0383d9;font-size:13px;margin:0 0 0 30px;}
    .related-simplify a:hover{color:#0383d9;text-decoration:underline}
    .related-simplify ul li:nth-child(n+4) {display:none;}
    @-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
    @keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}
    
    
    /* Postagens Relacionadas Modelo 2  - CódigoBlogger.com */
    .related-simplify{position:relative;padding:20px 12px 12px 12px;margin:32px auto 24px auto;width:93%;border:4px double rgba(0,0,0,0.2)}
    .related-simplify h4{background:#fff;padding:8px 10px;position:absolute;margin:0;font-size:17px;font-weight:700;color:#000;top:-21px;left:2.5%}
    .related-simplify ul{margin:0;padding:0}
    .related-simplify ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s}
    .related-simplify ul li:before{content:'\f0c8';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:rgba(0,0,0,0.5);overflow:hidden;font-size:60%;left:10px;transition:all .3s}
    .related-simplify ul li:hover:before{content:'\f0c8';font-family:fontawesome;color:#0383d9;}
    .related-simplify a{color:#000;font-size:14px;margin:0 0 0 30px;}
    .related-simplify a:hover{color:#0383d9;}
    .related-simplify ul li:nth-child(n+4) {display:none;}
    @media only screen and (max-width:768px){
    .related-simplify{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0}
    .related-simplify h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%}
    .related-simplify a{font-size:14px;margin:0}.related-simplify a:hover{color:#e74c3c}
    .related-simplify ul li{padding:5px 0}
    .related-simplify ul li:before,.related-simplify ul li:hover:before{display:none}}
    
  6. Agora procure por <data:post.body/> e substitua todo o trecho encontrado por:
  7. 
    <div expr:id='"post1" + data:post.id'/>
    <div class='related-simplify'>
    <b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:blog.pageType == "item"'>
    <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=3"' type='text/javascript'/>
    </b:if>
    </b:loop>
    </b:if>
    <h4>Leia também</h4>
    <script type='text/javascript'>
    removeRelatedDuplicates();
    printRelatedLabels();
    </script>
    </div>
    <div expr:id='"post2" + data:post.id'><p><data:post.body/></p></div>
    <script type='text/javascript'>
    var obj0=document.getElementById("post1<data:post.id/>");
    var obj1=document.getElementById("post2<data:post.id/>");
    var s=obj1.innerHTML;
    var t=s.substr(0,s.length/2);
    var r=t.lastIndexOf("<br>");
    if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
    </script>
    
  8. Agora clique em Salvar modelo
Pronto, agora a lista vai ser exibida em todos os posts, mas ela vai sempre mostrar links relacionados a sua postagem, legal né?

Dúvidas? deixe um comentário abaixo.

28 de janeiro de 2017

Pacote de meta tags SEO 2017 Blogger

Pacote de meta tags amigáveis e válidas para você adicionar em seu blog e aumentar o seu tráfego. No ano passado eu já publiquei um pacote de meta tags, porém fizemos algumas modificações e incluímos novas metas importantes.



Você vai aprender a instalar e configurar as meta tags, vou destacar todos os pontos que você deve alterar. Meu intuito é que o seu blog melhore nos resultados consideravelmente com esse pacote.

Alguns blogueiros ainda não sabem muito bem o que é meta tags, então vou fazer uma explicação bem básica e rápida aqui.

O que é Meta tags

As meta tags  são linhas de código HTML ou "etiquetas" que, entre outras coisas, descrevem o conteúdo do seu blog para os buscadores. É nelas que você vai inserir as palavras-chave que facilitarão a vida do usuário na hora de te encontrar, por exemplo.

Meta tags SEO para Blogger 2017

Provavelmente no seu template já tem meta tags aplicadas nele, se você quer utilizar esse pacote, é importante que você apague todas as meta tags do seu template e adicione as seguir.

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, clique sobre o editor e tecle CTRL+F e procure por <head> e abaixo dele cole
  3. 
    <!-- [ Meta Tag SEO CodigosBlogger.com ] -->
    <include expiration='7d' path='*.css'/>
    <include expiration='7d' path='*.js'/>
    <include expiration='3d' path='*.gif'/>
    <include expiration='3d' path='*.jpeg'/>
    <include expiration='3d' path='*.jpg'/>
    <include expiration='3d' path='*.png'/>
    <meta content='sat, 02 jun 2020 00:00:00 GMT' http-equiv='expires'/>
    <meta charset='utf-8'/>
    <meta content='width=device-width, initial-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 == "index"'>
    <title><data:blog.pageTitle/></title>
    <b:else/>
    <b:if cond='data:blog.pageType != "error_page"'>
    <title><data:blog.pageName/> - <data:blog.title/></title>
    </b:if></b:if>
    <b:if cond='data:blog.pageType == "error_page"'>
    <title>Página não encontrada - <data:blog.title/></title>
    </b:if>
    <b:if cond='data:blog.pageType == "archive"'>
    <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 != "error_page"'>
    <meta expr:content='data:blog.metaDescription' name='description'/>
    <script type='application/ld+json'>{ "@context": "http://schema.org", "@type": "WebSite", "url": "<data:blog.homepageUrl/>", "potentialAction": { "@type": "SearchAction", "target": "<data:blog.homepageUrl/>?q={search_term}", "query-input": "required name=search_term" } }</script>
    <b:if cond='data:blog.homepageUrl != data:blog.url'>
    <meta expr:content='data:blog.pageName + ", " + data:blog.pageTitle + ", " + data:blog.title' name='keywords'/>
    </b:if></b:if>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <meta content='DESCRIÇÃO-DO-BLOG' name='keywords'/></b:if>
    <link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
    <link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>
    <link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
    <b:if cond='data:blog.pageType == "item"'>
    <b:if cond='data:blog.postImageThumbnailUrl'>
    <link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
    </b:if></b:if>
    <link expr:href='data:blog.url' hreflang='x-default' rel='alternate'/>
    <link href='/favicon.ico' rel='icon' type='image/x-icon'/>
    <link href='https://plus.google.com/USER-GOOGLE-PLUS/posts' rel='publisher'/>
    <link href='https://plus.google.com/USER-GOOGLE-PLUS/about' rel='author'/>
    <link href='https://plus.google.com/USER-GOOGLE-PLUS' rel='me'/>
    <meta content='CODIGO-GOOGLE-WEBMASTER' name='google-site-verification'/>
    <meta content='CODIGO-BING-WEBMASTER' name='msvalidate.01'/>
    <meta content='Brasil' name='geo.placename'/>
    <meta content='SEU-NOME' name='Author'/>
    <meta content='general' name='rating'/>
    <meta content='id' name='geo.country'/>
    <!-- [ Meta Tag para Redes Sociais ] -->
    <b:if cond='data:blog.pageType == "item"'>
    <meta expr:content='data:blog.pageName' property='og:title'/>
    <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
    <meta content='article' property='og:type'/>
    </b:if>
    <meta expr:content='data:blog.title' property='og:site_name'/>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <meta expr:content='data:blog.metaDescription' name='description'/>
    <meta expr:content='data:blog.title' property='og:title'/>
    <meta content='website' property='og:type'/>
    <b:if cond='data:blog.metaDescription'>
    <meta expr:content='data:blog.metaDescription' property='og:description'/>
    <b:else/>
    <meta expr:content='"Visite " + data:blog.pageTitle + " para ler nossos artigos."' property='og:description'/>
    </b:if>
    </b:if>
    <b:if cond='data:blog.postImageUrl'>
    <meta expr:content='data:blog.postImageUrl' property='og:image'/>
    <b:else/>
    <b:if cond='data:blog.postImageThumbnailUrl'>
    <meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
    <b:else/>
    <meta content='URL-DA-IMAGEM-DO-BLOG' property='og:image'/>
    </b:if>
    </b:if>
    <meta content='https://www.facebook.com/PERFIL-FACEBOOK' property='article:author'/>
    <meta content='https://www.facebook.com/FAN-PAGE-FACEBOOK' property='article:publisher'/>
    <meta content='CODIGO-APPID-FACEBOOK' property='fb:app_id'/>
    <meta content='CODIGO-ADMIN-FACEBOOK' property='fb:admins'/>
    <meta content='pt_BR' property='og:locale'/>
    <meta content='summary' name='twitter:card'/>
    <meta expr:content='data:blog.pageTitle' name='twitter:title'/>
    <meta content='USER-TWITTER' name='twitter:site'/>
    <meta content='USER-TWITTER' name='twitter:creator'/>
    
  4. Entendendo as meta tags e oque você deve alterar:
  5. DESTACADOCOMO PREENCHER
    DESCRIÇÃO-BLOGPreencha com descrições ou palavras-chave do blog
    USER-GOOGLE-PLUSPreencha com seu ID Google+ do blog, por exemplo: + CodigosBlogger2016
    CODIGO-GOOGLE-WEBMASTERPreencha com o código de validação Google no Webmaster Tools
    CODIGO-BING-WEBMASTERPreencha com o código de validação Bing Webmaster
    SEU-NOMEPreencha com o nome do autor
    PERFIL-FACEBOOKPreencha o seu perfil Facebook
    FAN-PAGE-FACEBOOKPreencha com o id da página no Facebook
    CODIGO-APPID-FACEBOOKPreencha com o código de Facebook App, poderia criar em https://developers.facebook.com
    CÓDIGO-ADMIN-FACEBOOKPreencha o seu código de perfil do Facebook, entrar em http://findmyfbid.com
    USER-TWITTERPreencha o seu nome de usuário Twitter
    URL-DA-IMAGEM-DO-BLOGColoque a URL de uma imagem que represente o seu blog, essa imagem vai ser exibida quando a URL principal do seu blog for compartilhada
  6. Depois de alterar, Salve o modelo.
Pronto! Agora seu blog está com as meta tags totalmente atualizadas 2017.

Dúvidas? deixe um comentário abaixo.

5 estrelas - baseado em 759 votos

22 de janeiro de 2017

Caixa de pesquisa expansível para Blogger

Como todos nós sabemos, a caixa de pesquisa permite que nossos leitores tenham acesso a todas as nossas postagens em nosso blog. Uma caixa de pesquisa deve ser instalada no menu de navegação ou na barra lateral, que pode ser facilmente visualizada pelos nossos visitantes. Há um monte de caixa de pesquisas na internet, mas dificilmente você vai encontrar um igual a esse.



A ideia dessa caixa é exibir apenas o ícone de pesquisa, e ao clicar faz um efeito de slide e mostra a caixa para o usuário fazer a sua busca.

Adicionando caixa de pesquisa expansiva no blogger

Vamos lá, hora de por a mão na massa!
Atenção: Antes de fazer qualquer alteração, faça o backup do seu template.

  1. Acesse o Painel do Blogger
  2. Vá até o seu blog desejado e encontre a melhor área para adicionar a caixa. Copie o código no HTML da área:
  3. 
    <div id='search_box'><form action='/search' id='search' method='get'>
    <input class='search_text' id='search_text' name='q' onblur='if (this.value == '') {this.value = 'Digite o que procura e tecle enter...';}' onfocus='if (this.value == 'Digite o que procura e tecle enter...') {this.value = '';}' type='text' value='Digite o que procura e tecle enter...'/></form><div class='search_button'><i class='fa fa-search'/></div></div>
    
    Exemplo: se você quer na sidebar, vá até Layout e clique em Adicionar novo Gadget, escolha o HTML/Javascript e cole o código lá dentro e salve.
  4. Depois de colar o código acima na área onde você quer exibir a caixa, vá até Modelo > Editar HTML clique sobre o editor e tecle CTRL+F e procure por ]]></b:skin> e acima cole:
  5. 
    #search_box{width:340px;position:relative;height:40px}#search_box #search{float:right;top:0;right:50px;position:absolute;border:1px solid #d9e0e2;border-right:0;display:none}#search_box #search #search_text{color:#888;width:290px;padding:10px;font-size:16px;font-family:'Maven Pro',sans-serif;border:0 none;height:40px;margin-right:0;outline:none;background:#fff;float:left;box-sizing:border-box;transition:all .15s}#search_box #search #search_text:focus{background:#efefef}#search_box .search_button{float:right;border:1px solid #d9e0e2;color:#888;height:40px;width:50px;text-align:center;line-height:40px;display:inline-block;cursor:pointer}#search_box .search_button.active,#search_box .search_button:hover{background:#00aa9f;color:#fff}
    
  6. Agora procure por </body> e acima cole:
  7. 
    <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
    <script type='text/javascript'>
    //<![CDATA[
    !function(){$(".search_button").on("click",function(t){t.preventDefault(),$("#search").animate({width:"toggle"}).focus(),$(".search_button").toggleClass("active")})}()
    //]]>
    </script>
    
  8. Feito isso, clique em Salvar Modelo
Pronto, agora atualize o seu blog e veja o resultado. E qualquer coisa deixe um comentário abaixo que estarei disposto à lhe ajudar com alguma dúvida.

21 de janeiro de 2017

Popup Curtir Facebook para Blogger

Estou trazendo esse recurso pra vocês, apesar de ter muitos por aí na internet, vou mostrar um jeito fácil explicando passo a passo para que exiba um Popup com jQuery baseado no lightbox. Ele vai ser exibido segundos após o visitante acessar a sua página.


Esse recurso é bem interessante se você deseja aumentar o número de seguidores que acompanham o seu blog no Facebook.

Adicionando Popup curtir facebook no Blogger

Vamos lá.. siga atentamente os passos abaixo para que tudo ocorra como planejado.
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, clique sobre o editor e tecle CTRL+F e procure por </body> e acima do trecho encontrado cole:
  3. 
    <div id='mba-likebox-bg'>
    <div id='mba-likebox-bg-out'>
    </div>
    <div id='mba-likebox'>
    <div id='mba-likebox-out'>
    </div>
    <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fajudaemcodigo&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false&' style='width:390px; height: 230px;'/>
    </div>
    </div>
    
    <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
    <script type='text/javascript'>
    //<![CDATA[
    jQuery.cookie = function (key, value, options) {
    // key and at least value given, set cookie...
    if (arguments.length > 1 && String(value) !== "[object Object]") {
    options = jQuery.extend({}, options);
    if (value === null || value === undefined) {
    options.expires = -1;
    }
    if (typeof options.expires === 'number') {
    var days = options.expires, t = options.expires = new Date();
    t.setDate(t.getDate() + days);
    }
    value = String(value);
    return (document.cookie = [
    encodeURIComponent(key), '=',
    options.raw ? value : encodeURIComponent(value),
    options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
    options.path ? '; path=' + options.path : '',
    options.domain ? '; domain=' + options.domain : '',
    options.secure ? '; secure' : ''
    ].join(''));
    }
    // key and possibly options given, get cookie...
    options = value || {};
    var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
    return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
    };
    //]]>
    </script>
    <script type='text/javascript'>
    jQuery(document).ready(function($){
    if($.cookie('popup_user_login') != 'yes'){
    $('#mba-likebox-bg').delay(100).fadeIn('medium');
    $('#mba-likebox-out, #mba-likebox-bg-out').click(function(){
    $('#mba-likebox-bg').stop().fadeOut('medium');
    });
    }
    $.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
    });
    </script>
    
  4. Altere o ajudaemcodigo destacado no código acima para sua página no Facebook, veja na imagem abaixo.
  5. Agora procure por ]]></b:skin> e imediatamente acima cole:
  6. 
    #mba-likebox-bg {
    display:none;
    background:rgba(0,0,0,0.8);
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:99999;
    }
    #mba-likebox-bg-out {
    width:100%;
    height:100%;
    }
    #mba-likebox {
    background:#fff;
    padding: 20px 10px 10px 10px;
    top: 20%;
    left: 33%;
    position: absolute;
    -webkit-box-shadow: inset 0 10px 0 0 #3b579d;
    -moz-box-shadow: inset 0 10px 0 0 #3b579d;
    box-shadow: inset 0 10px 0 0 #3b579d;
    }
    #mba-likebox-out {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    color: #e1e1e1;
    z-index: 999;
    }
    #mba-likebox-out:before {
    font-family: "FontAwesome";
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    content: "\f00d";
    text-align:center;
    display: block!Important;
    width: 40px;
    height: 40px;
    line-height: 40px;
    background:#3b579d;
      }
    #mba-likebox-out:hover:before{
    color:#fff;
      }
    
  7. Pronto, agora clique em Salvar Modelo
Espero que essa dica lhe ajude a conseguir mais curtidas em sua fã page.

Dúvidas? deixe um comentário abaixo

17 de janeiro de 2017

Script para aumentar ou diminuir texto das postagens no Blogger


Este script usa um jQuery muito simples afim de aumentar ou diminuir o tamanho da fonte de um artigo. É útil para você e seus usuários, especialmente aqueles com visão fraca. Este script é muito essencial se você quer manter a fonte do seu blog pequeno e, ao mesmo tempo, transformá-las em grandes para seus usuários.

Veja a demonstração:


Instalando o script em seu blog

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>Editar HTML do blog desejado e clique sobre o editor e tecle CTRL+F e procure por <div class='post-header-line-1'> e acima do trecho encontrado cole:
  3. <a href="#A+" id="increase">A+</a>
    <a href="#A-" id="decrease">A-</a>
  4. Depois procure por </body> e acima desse trecho cole:
  5. &lt;script type=&quot;text/javascript&quot;&gt;
      $(document).ready(function() { 
      $(&#039;#increase&#039;).click(function(){    
            curSize= parseInt($(&#039;.post&#039;).css(&#039;font-size&#039;)) + 2;
      if(curSize&lt;=20)
            $(&#039;.post&#039;).css(&#039;font-size&#039;, curSize);
            });  
      $(&#039;#decrease&#039;).click(function(){    
            curSize= parseInt($(&#039;.post&#039;).css(&#039;font-size&#039;)) - 2;
      if(curSize&gt;=12)
            $(&#039;.post&#039;).css(&#039;font-size&#039;, curSize);
            }); 
     });
    &lt;/script&gt;
    Por padrão o script está definido para aumentar a fonte até 20px, e o tamanho mínimo é de 12px. Se você deseja alterar esse limite, altere o seguinte trecho:
    Aumentar o texto: curSize<=20 do #increase
    Diminuir o texto: curSize>=12 do #decrease
  6. Feito, clique em Salvar Modelo
Pronto, agora o script já vai  funcionar em suas postagens, mas lembre-se que está totalmente sem personalizar a aparência dos botões, personalize-o como quiser no CSS.

Dúvidas? deixe um comentário abaixo
5 estrelas - baseado em 12 votos

16 de janeiro de 2017

Adicionar contador de visualizações nas postagens do Blogger

Um recurso muito pedido é colocar um contador de visitas em cada artigo do blog, infelizmente essa é uma função que não vem nativa no Blogger, até tem, porém só você consegue visualizar pelo Painel do Blogger em Postagens. Agora vou ensinar um jeito para você colocar um contador em cada artigo dinamicamente.


Já vi vários tutoriais na internet que ensinam a fazer isso, porém estão todos desatualizados e a maioria não funcionam mais, além de serem feios. Grande parte também eram feito com imagens gif contabilizando os acessos e dependiam de sites terceiros, claro que este que vou ensinar também depende, porém ele é feito totalmente em javascript e se comunicando com Firebase que é um serviço gratuito do Google, ou seja, difícilmente teremos problemas futuro com o contador.

Eu mesmo estou utilizando este contador aqui no blog, então se você reparar bem ali no começinho do artigo eu implementei o contador. Veja que fica bem bonito dando um 'toque' mais profissional para o blog. Mas é claro que tem seus pontos negativos também, um exemplo é se você tem poucos acessos em seu site. Se você deseja passar creditibilidade e seu blog tiver poucos acessos, eu recomendo a não usar este contador. Caso contrário vamos aprender agora!

Criando e configurando um APP no Firebase

Para que o contador funcione corretamente, você precisa criar uma conta no Firebaseio. Vou mostrar como criar e configurar corretamente sua conta.
  1. Acesse o Firebase
  2. Clique em Criar novo projeto, de um nome e escolha o país para sua aplicação, depois clique em Criar projeto.
  3. Você será redirecionado para a página de visão geral, no menu lateral, vá até Database e clique em Regras
  4. Na página Regras, adicione a seguinte condição e clique em Publicar
    {
    "rules": {
    ".read": true,
    ".write": true
    }
    }
Pronto, seu Firebase está pronto para ser adicionado em nosso código abaixo. Guarde o endereço do seu firebase, normalmente é o nome que você deu ao app sem espaços ou acentos.

Como adicionar um contador de visualizações nos artigos

Vamos lá! siga atentamente os passos abaixo que não tem erro.
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 > Editar HTML clique sobre o editor e tecle CTRL+F e procure por </body> e acima do trecho encontrado cole:

  3. <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
    <script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/> 
    <script> 
    $.each($('a[name]'), function(i, e) { 
    var elem = $(e).parent().find('#postviews'); 
    var blogStats = new Firebase("https://NOME-DO-SEU-APP.firebaseio.com/pages/id/" + $(e).attr('name')); 
    blogStats.once('value', function(snapshot) { 
    var data = snapshot.val(); 
    var isnew = false; 
    if(data == null) { 
    data= {}; 
    data.value = 0; 
    data.url = window.location.href; 
    data.id = $(e).attr('name'); 
    isnew = true; 
    } 
    elem.text(data.value); 
    data.value++; 
    if(window.location.pathname!='/') 
    { 
    if(isnew) 
    blogStats.set(data); 
    else 
    blogStats.child('value').set(data.value); 
    } 
    }); 
    }); 
    </script>
  4. No trecho NOME-DO-SEU-APP destacado no código, altere para o que você criou lá no firebase.
  5. Feito isso, agora procure por <data:post.body/> ou <data:post.body />
  6. Provavelmente você vai encontrar mais de um resultado. Na maioria das vezes é o segundo trecho encontrado que vai alterar. 
  7. Imediatamente antes do trecho encontrado, cole o seguinte código:

  8. <a expr:name='data:post.id'/> <i class='fa fa-eye'/> <span id='postviews'/>
Pronto, se você seguiu corretamente e colocou os códigos nos lugares indicados certinho, seus artigos começarão a exibir o contador.

Dúvidas? deixe um comentário abaixo
5 estrelas - baseado em 29 votos