Como instalar uma imgem de fundo aleatória no Blogger

Desta vez vou compartilhar um tutorial sobre como fazer com que o background de um blog possa mudar automaticamente. Para não ser muito difícil, basta adicionar um script ou código no modelo do blogger. No entanto, esse script ou código pode diminuir a velocidade de carregamento do blog.

O script ou código fará com que a imagem de fundo da página do blog mude toda vez que ela for atualizada. Para que seu blog tenha uma aparência dinâmica, o plano de fundo irá mudar sozinho quando os visitantes abrirem uma nova página ou atualizarem a página aleatoriamente.

Se você se interessou e quer aplicar em seu blog, por favor, siga as etapas abaixo:

Como instalar uma imagem de fundo aleatória no Blogger

Primeiro, abra o blogger > Tema > Editar HTML >  e cole o código baixo antes da tag </body>:

<script type='text/javascript'>
//<![CDATA[
var Background=new Array;
Background[0]="#f5f5f5 url('ImageURL') no-repeat top center fixed",
Background[1]="#f5f5f5 url('ImageURL') no-repeat top center fixed",
Background[2]="#f5f5f5 url('ImageURL') no-repeat top center fixed",
Background[3]="#f5f5f5 url('ImageURL') no-repeat top center fixed",
Background[4]="#f5f5f5 url('ImageURL') no-repeat top center fixed";
var random=Math.floor(5*Math.random());
document.write("<style>"),
document.write("body {"),
document.write("background: "+Background[random]+";"),
document.write("background-size:100%;"),document.write(" }"),
document.write("</style>");
//]]>
</script>

Observação:

Por favor, altere o código ImageURL com o URL da imagem que você preparou, verifique se a imagem de qualidade HD não está embaçada ou quebrada quando instalado.

Feito isso, Save e veja o resultado. Qualuer dúvida, deixe nos comentários.

Como configurar artigos instantâneos do Facebook para o Blogger

Você já deve ter ouvido falar sobre o Instant Articles do Facebook,não é mesmo? Além disso, deseja adicionar artigos instantâneos do Facebook ao seu site do Blogger BlogSpot. Neste artigo, mostraremos como configurar artigos instantâneos do Facebook no blogger com instruções passo a passo.

O que são artigos instantâneos do Facebook?

Instant Articles powered by Facebook é uma ferramenta de publicação móvel que permite aos editores carregar seus artigos dez vezes mais rápido que uma página normal. Os artigos instantâneos usam o aplicativo do Facebook e personalizam os modelos da Web para maximizar o tempo de carregamento. 

Como configurar artigos instantâneos do Facebook no Blogger

1: inscrição para artigos instantâneos do Facebook

A primeira coisa que você precisa fazer é visitar a página Instant Articles do Facebook e clicar no botão de inscrição para iniciar o processo.

Agora você será solicitado a selecionar uma das suas páginas do Facebook que você gostaria de usar para seus artigos instantâneos.

Depois de selecionar a página de sua escolha, marque a caixa para concordar com os termos e condições de uso de artigos Instantâneos. Depois de concordar com os termos, clique no botão 'Access Instant Articles Tools'.

Ele levará você à sua página selecionada na etapa anterior. Você notará que suas ferramentas de publicação agora tem uma seção de artigos instantâneos do Facebook.

Agora você precisa autorizar seu site para importar artigos instantâneos. Em outras palavras, você precisa provar a propriedade do seu site. 

ara iniciar o processo de autenticação, clique no link "Autorize seu site", e o Facebook irá rolar você até a seção Ferramentas, onde você verá um pequeno trecho de código.

Você precisa copiar este código e colar depois da seção do seu tema do Blogger.

Vá para o Blogger >> Tema >> Editar HTML >> Procure por e logo abaixo, cole o código.

Depois de adicionar o código ao seu tema do Blogger, pressione Salvar para armazenar as alterações.

Depois de adicionar o código meta ao seu site, volte para a seção de ferramentas do editor da sua página do Facebook. 

Você precisa inserir o URL do seu site. Depois de entrar, clique em "Reivindicar URL" para finalizar o processo de autenticação. 

Se você seguiu as instruções corretamente, verá uma mensagem que diz "Seu URL foi reivindicado".

O próximo passo é adicionar o link RSS Feed do seu site ao Facebook Instant Articles, para que ele possa buscar automaticamente informações sobre seus artigos quando eles forem publicados em seu site. 

Felizmente, o Blogger fornece uma página robusta de feeds RSS por padrão para cada blog que você cria. Além disso, verifique se os feeds RSS estão ativados no seu site do Blogger .

Outra coisa que você precisa para se certificar de que seu "Blog Posts Feed" está definido como completo. Vá para o Painel do Blogger >> Seu Blog >> Configurações >> Outros >> Feed do site >> . Certifique-se de que "Permitir feed do blogue" esteja definido como Completo ou pretenda configurações personalizadas que possa seguir, conforme mostrado na captura de ecrã abaixo:

Se você já estiver usando uma configuração que já permita feeds de posts completos, não será necessário fazer alterações nessa etapa.

Você pode acessar sua página de feeds RSS adicionando  / feeds / posts / default? Alt = rss após o URL do seu site, por exemplo: https://blogtutorsweb.blogspot.com/feeds/posts/default?alt=rss

Copie o URL do seu feed RSS e volte para as Ferramentas de publicação da sua página >> Artigo instantâneo . Role para baixo até a seção Ferramentas e selecione "Feed RSS de Produção" para expandir mais opções.

Cole o URL do seu feed RSS e clique no botão "Salvar". Agora a página será atualizada e você verá uma mensagem informando que seu feed foi adicionado com sucesso se você seguiu as instruções corretamente.

Visite sua página no Facebook e clique em Ferramentas de Publicação. No menu à esquerda, clique em 'Artigos de produção' em Artigos instantâneos. Se você seguiu as etapas corretamente, poderá ver uma lista de artigos publicados em seu site.

2: Adicionando Logo aos Seus Artigos Instantâneos

Vá para sua página no Facebook e clique em Ferramentas de Publicação. No menu à esquerda, clique em 'Configuração' em Artigos instantâneos. 

Role para baixo até a seção Ferramentas e clique em "Estilos" para gastar mais opções.

Clique no botão "default" para personalizá-lo ou clique em "adicionar estilos" para criar um design completo. 

Clique em "Logo" e faça o upload de um logotipo transparente do seu site, que deve estar no formato PNG. O requisito de dimensões mínimas do logotipo é de 690 px de largura e 132 px de altura.

Há muitas opções para personalização, e você pode brincar com ela e obter uma aparência única para seus artigos instantâneos.

Depois de fazer o upload do logotipo, clique em Salvar e, em seguida, clique em Fechar.

3: Envie seus artigos instantâneos para revisão:

Antes de enviar seus artigos instantâneos para revisão, verifique se há pelo menos cinco artigos instantâneos em sua biblioteca de produção. Quando tiver certeza de que há pelo menos cinco artigos, é bom enviar seus artigos instantâneos para revisão.

Vá para sua página no Facebook e clique em Ferramentas de Publicação. No menu esquerdo, clique em 'Configuração' em Artigos instantâneos.

Na seção Configuração inicial, procure "Etapa 2: enviar para revisão" 

Se não houver erros gerados automaticamente, você poderá enviar seus artigos instantâneos para revisão. Vá em frente e clique em "Enviar para revisão" para enviar seus feeds para revisão. Normalmente, leva de um a três dias úteis para obter uma resposta da equipe de revisão do Facebook.

Depois que a equipe de análise do Facebook aprovar completamente os seus Instant Articles, você poderá passar para a "Etapa 3: iniciar publicação de artigos instantâneos" e começar a publicar seus artigos instantâneos.

Widget postagens recentes a partir de uma tag do seu blog

Olá, amigos! hoje trago um tutorial muito legal, que ensinará como colocar um Widget de posts recentes a partir de uma tag do seu blog. Por exemplo: Você tem várias postagens utilizando uma tag chamada "feminino", o código fará aparecer quantos postagens você desejar dessa única tag.

Clique para ver a demo

Sendo assim, vamos para o tutorial:

1. A primeira coisa que você deve fazer é instalar o CSS. Para isso, copie o código abaixo e cole acima de ]]>

ou

/* Recent Post Material Design by http://www.baixartemplatesblogger.com.br */
li.recent-posts:hover{box-shadow:0 2px 2px 0 rgba(0,0,0,0.14), 0 5px 10px 0 rgba(0,0,0,0.12), 0 5px 10px -5px rgba(0,0,0,0.2)}
.recenthd,li.recent-posts{box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 2px 2px 0 rgba(0,0,0,.24);background:#fff;border-radius:3px;overflow:hidden}
a.gorecent{float:right;font-size:11px;padding:5px 10px;margin:-4px}
.recenthd h2{display:inline-block;text-transform:uppercase;font-size:15px;margin:0}
.recenthd svg{float:left;margin-right:10px}
.recenthd{padding:15px;text-align:left;margin-bottom:10px}ul#recent-posts{margin:0;padding:0}
li.recent-posts:nth-child(12),li.recent-posts:nth-child(4),li.recent-posts:nth-child(8){margin-right:0}
li.recent-posts{transition:all .3s ease-in-out;list-style:none;padding:0;margin-bottom:20px;text-align:center;width:260px;max-width:100%;float:left;height:260px;margin-right:20px}
.title_post a{color:#515151}li.recent-posts a:hover{color:#111}
.title_post{height:30px;overflow:hidden;padding:10px;line-height:1.4;font-size:13.4px}
.recent-posts img{height:190px;width:100%}
a.gorecent{text-transform:uppercase;line-height:1.5;font-size:11px;font-weight:700;color:#fff;border:none;padding:7px 15px 7px;border-radius:5px;background:#1976d2;cursor:pointer;outline:0;box-shadow:0 2px 2px 0 rgba(154,154,154,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.12);margin-right:7px}
@media screen and (max-width:768px){.howtouse{width:39%}#safe-wrapper{width:auto;padding:18px;margin:-100px 0 0}li.recent-posts{width:45.6%}}
@media screen and (max-width:480px){li.recent-posts{width:100%}}

Baixar template para blogger de moda

Baixar template para blogger de moda

O modelo do Blogger da moda Saara Fashion é um tema Blogger simples, limpo e contemporâneo para sites de blogs e revistas de estilo de vida. O Saara Fashion Blog é totalmente responsivo e a retina pronta torna bonito e otimizado para todos os dispositivos.

DEMO / BAIXAR

Como colocar efeitos nas imagens do blogger

No artigo de hoje, vou compartilhar um código CSS que deixará as imagens que você desejar um belo efeito ao passar o mouse sobre elas. Ao implementar essa funcionalidade, seu ficará mais bonito e fará com que ele se diferencie dos demais. Sendo assim, vamos para o tutorial.

COMO INSTALAR EFEITOS NAS IMAGENS AO PASSAR O MOUSE:

Para aplicar o efeito é algo muito fácil a se fazer.

1. Vá para o painel do blogger > Editar HTML e pesquise por: ]]></b:skin> e acima dessa tag, cole o seguinte código CSS:

#efek-gambar a img:hover { -webkit-filter:none; /*Returns to default*/; }

#efek-gambar a img.brightness:hover { -webkit-filter:brightness(0); }

.blur { -webkit-filter:blur(3px); }

.contrast { -webkit-filter:contrast(160%); }

.grayscale { -webkit-filter:grayscale(100%); }

.huerotate { -webkit-filter:hue-rotate(180deg); }

.invert { -webkit-filter:invert(100%); }

.opacity { -webkit-filter:opacity(50%); }

.saturate { -webkit-filter:saturate(3); }

.sepia { -webkit-filter:sepia(100%); }

.brightness { -webkit-filter:brightness(0.25); } 

Ao criar uma postagem, deve-se colocar o link da imagem dentro das " ", como demostrado abaixo:

<div id="efek-gambar">

<img class="blur" src="aqui vai o link da imagem" />

</div> 

Para se alterar o efeito, você deve mexer no campo <img class ="aqui vai o nome do efeito" src....

Para que os efeitos funcionem, eles devem estar em inglês. Sendo assim, aqui vãos os nomes dos efeitos em inglês e como as imagens ficarão:

Blur

Contrast

Grayscale

Huerotate

Invert

Opacity

Saturate

Sepia

Brightness

Meta Tags para blogger 2018

Meta Tags para blogger 2018

As Meta tags é uma parte fundamental para um blog. Ao adicionar em seu site, os motores de buscas rastrearão melhor os seus artigos e páginas e consequentemente aumentará seu tráfego. O Google atualiza o seu códio constantemente a fim de buscar o conteúdo relevante. Sendo assim, com as metas tags que iremos disponibilizar abaixo, o seu ficará bem mais visível para os 'robozinhos' dos motores de buscas.

COMO ADICIONAR META TAGS NO BLOG:

Antes de tudo, é necessário que você apague as Meta Tags já existentes em seu blog para que não haja conflito de informação quando for adicionar nas novas que estamos disponibilizando.
Feito isso, vamos ao tutorial que é muito simples.

1. Vá para o painel do blogger que deseja adicionar e pesquise por: <head> e abaixo dessa tag, cole as Meta Tags;

!-- [ Meta Tag SEO baixartemplatesblogger.com.br] -->
<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'/> 

2. Feito isso, altere o que está selecionado em vermelho para as seguintes informações:

Selecionado:	Como Preencher
DESCRIÇÃO-BLOG	Preencha com descrições ou palavras-chave do blog
USER-GOOGLE-PLUS	Otimização Preencha com seu ID Google+ do blog
CODIGO-GOOGLE-WEBMASTER	Preencha com o código de validação Google no Webmaster
CODIGO-BING-WEBMASTER	Preencha com o código de validação Bing Webmaster
SEU-NOME	Preencha com o nome do autor do blog
PERFIL-FACEBOOK	Preencha o seu perfil Facebook
FAN-PAGE-FACEBOOKPreencha	Preencha com o id da página no Facebook
CODIGO-APPID-FACEBOOK	Preencha com o código de Facebook App
CÓDIGO-ADMIN-FACEBOOK	Preencha o seu código de perfil do Facebook
USER-TWITTER	Preencha o seu nome de usuário Twitter
URL-DA-IMAGEM-DO-BLOG	Coloque a URL de uma imagem que represente o seu blog

3. Feito isso, salve e veja o resultado. Qualquer dúvida, deixe nos comentários que responderemos assim que possível. Se preferir, pode nos contatar via chat que está ao seu lado esquerdo.

Como aumentar e diminuir o texto da postagem do blogger

Essa dica é muito importante para quem deseja aumentar a navegabilidade de seu blog. Esse Script, quando dado o comando , aumenta ou diminui o tamanho da das letra da sua postagem. Sendo assim, para que você tenha essa funcionalidade em seu site, basta seguir os passos abaixo:

1. Vá para o painel do blogger e clique em Editar HTML no blog que deseja realizar a alteração.

2. Aperte CTRL F e pesquise pelo trecho: <div class='post-header-line-1'> e acima dessa tag cole o código abaixo:

<a href="#A+" id="increase">A+</a>
<a href="#A-" id="decrease">A-</a> 

3. Feio isso, procure agora por: </body> e acima dessa encontrada cole o seguinte código:

<script type="text/javascript">
  $(document).ready(function() { 
  $('#increase').click(function(){    
        curSize= parseInt($('.post').css('font-size')) + 2;
  if(curSize<=20)
        $('.post').css('font-size', curSize);
        });  
  $('#decrease').click(function(){    
        curSize= parseInt($('.post').css('font-size')) - 2;
  if(curSize>=12)
        $('.post').css('font-size', curSize);
        }); 
 });
</script> 

Observação :

Caso deja alterar o limites para aumentar e dimninuir, deve-se mexer apenas nesses dois trechos, sempre lembrando que o limite é 12px:
Aumentar o texto: curSize<=20 do #increase
Diminuir o texto: curSize>=12 do #decrease

4. Salve e veja o resultado.

Baixar template para blogger de portal de empregos on-line

Baixar template para blogger de portal de empregos on-line

Esse é adequado para o mecanismo de busca de empregos online, freelancers, designers gráficos, ilustradores, fotógrafos ou qualquer tipo de criativo agora é capaz de criar um portal de trabalho on-line rápido e fácil.  É o perfeito que está procurando por um modelo minimalista e profissional.

DEMO / BAIXAR

Observação :

Caso precise, realizamos a tradução para você gratuitamente. Basta nos contatar pelo chat que esta do seu lado esquerdo.

Baixar template para blogger de portfólio

Baixar template para blogger de portfólio

O Template do blogueiro do portfólio de manjedouras é um modelo moderno e limpo para mostrar seu portfólio, informações pessoais, etc. Construído usando HTML5 e CSS3 com um código limpo para que ele possa ser editado sem complicações. O modelo é 100% responsivo e muito fácil de personalizar para sua finalidade.

DEMO / BAIXAR

Observação :

Caso precise, realizamos a tradução para você gratuitamente. Basta nos contatar pelo chat que esta do seu lado esquerdo.

Como ocultar ou exibir Widgets em dispositivo móvel

Como ocultar ou exibir Widgets em dispositivo móvel

Hoje trazemos um tutorial que ajudará muito os blogueiros que deseja ocultar ou exibir um Widget em dispositivos móveis. Esse truque que iremos ensinar pode, de fato, ser feito com tags CSS em determinados Widgets que vocês desejar 'esconder' em um dispositivo móvel, porém,mostraremos um jeito melhor e mais prático para fazer isso. Sendo assim,veja abaixo como ocultar ou exibir Widgets em dispositivos móveis

Observação :

Este truque aplica-se apenas a dispositivos de smartphone e não afetará tablet, iPad e outros dispositivos.

Ocultando Widgets em Dispositivo Móvel

1. Vá para o painel blogger e clicar em Editar HTML do blog que irá aplicar a funcionalidade. Em seguida, especifique quais Widgets serão ocultados em dispositivo Móvel. Feito isso, adicione as tags condicionais como demonstrados abaixo. Só coloque o que está selecionado.

<b:if cond='data:blog.isMobileRequest == "false"'>
<b:widget id='HTML1' locked='false' title='' type='HTML' version='1' visible='true'>
-----
</b:widget>
</b:if>

Exibir Widgets em dispositivos Móveis

Para exibir é muito fácil. Basta seguir o mesmo tutorial que ensinamos a ocultar mas, no lugar de "false", troque por "true" e salve para ver o resultado.

<b:if cond='data:blog.isMobileRequest == "true"'>
<b:widget id='HTML1' locked='false' title='' type='HTML' version='1' visible='true'>
-----
</b:widget>
</b:if> 

Widget de postagens populares com numeração para blog

Widget de postagens populares com numeração para blog

Hoje trazemos uma belo Widget que mostrar as postagens mais populares em seu blogger, juntamente com a numeração das postagens. Além de deixar seu tema elegante, isso irá melhorar a navegabilidade - se é que essa palavra existe - de seus leitores, o que faz com eles fiquem mais tempo em seu site e consequentemente gere mais visitas. Dito isso, vamos ao que interessa.

WIDGET POSTAGENS POPULARES COM NUMERAÇÃO:

1. Faça login no blogger e clique em Editar HTML do blog que você deseja adicionar o Widget

2. Clique em CTRL F e pesquise por: </style> e antes dessa tag cole o seguinte código:

 /*---- Popularpost ----*/
.PopularPosts .widget-content ul{width:100%;padding:0;list-style-type:none}
.PopularPosts .widget-content ul li{margin:0 0 10px;padding-bottom:10px;position:relative;overflow:hidden}
.PopularPosts .widget-content ul li .item-title{line-height:1.4em;padding:6px 10px 0 0}
.PopularPosts .widget-content ul li .item-title a{font-size:14px;font-weight:700;color:#111}
.PopularPosts .widget-content ul li a:hover,.PopularPosts .widget-content ul li:hover a{color:#aaa}
.PopularPosts .widget-content ul li img{width:130px;height:90px;padding-right:0;-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-ms-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out;-webkit-filter:brightness(.8);filter:brightness(.8)}
.Label li,.Label li a{position:relative;color:#444;transition:all .3s ease-out}
.PopularPosts .item-thumbnail{float:left;margin:0 10px 0 0;width:130px;height:90px;overflow:hidden}
.PopularPosts .widget-content ul li img:hover{-webkit-filter:brightness(1.1);filter:brightness(1.1)}
.PopularPosts .widget-content ul li:before{color:#fff;counter-increment:count;content:counter(count);position:absolute;left:5px;top:10px;z-index:51;transition:all .4s;height:20px;min-width:20px;border-radius:50px;font-size:15px;background:red;font-weight:500;text-align:center;padding:3px;overflow:hidden}
.PopularPosts ul{counter-reset:count}
.PopularPosts .item-control,.PopularPosts .item-snippet{display:none} 

3. Salve.

4. Feito isso, vá no Layout do blogger e adicione O Widget de postagens populares e configure como quiser, assim como mostramos abaixo:

Widget de postagens populares com numeração para blog

6. Salve e veja o resulta.

Observação :

O Código CSS, caso você entenda, pode ser alterado do seu gosto para que combine mais com o seu blog.

Baixar template para blog de jogos

Baixar template para blog de jogos

Hot Games Gaming Blogger Template é um modelo perfeitamente personalizado para sites de jogos, lojas e revistas. Este modelo é adequado para qualquer portal de jogos, inicialização, portal de notícias ou apenas seu site ou blog pessoal.

DEMO / BAIXAR