Popular post com Circle thumbnails dengan

Popular post com Circle thumbnails dengan


Hoje vamos compartilhar um widget popular post dengan como pode ver na imagem e no demo isso fica muito estiloso no template com imagem em formato de circulo isso tem um layout limpo e um widget leve para ser carregado para adicionar no seu template siga os passos abaixo


Adicionando widget popular post dengan no template do Blogger 

Faça login no blogger va no menu tema então editar  HTML/JavaScript com as teclas combinadas CTRL+F e busque por ]]></b:skin> ou </style> e logo acima disso copie e cole o seguinte código:

/* Popular Post */
.PopularPosts ul{font-family:'Work Sans', sans-serif;list-style:none;margin:0 auto;padding:0;overflow:hidden;width:100%}
.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img {margin:0;padding:0;list-style:none;border:none;background:none;outline:none;}
.PopularPosts ul li {margin:0 auto 10px;position:relative;overflow:hidden;line-height:1em!important;list-style:none;border-top:1px solid #ddd;padding:20px 0 0}
.PopularPosts ul li a:hover {color:#999!important;}
.PopularPosts li a{color:#333 !important;font-weight:700 !important;font-size:16.40px !important;list-style:none;line-height:1.2em;display:block;overflow:hidden}
.PopularPosts ul li img {width:90px;height:90px;float:left;display:inline-block}
.PopularPosts .item-thumbnail {display: flex;align-items: center;justify-content: center;width:90px;height:90px;border-radius:99em;overflow:hidden;float:left;margin:-10px 20px 0 0!important;position:relative}
.PopularPosts .item-snippet{display:block;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;font-size:12px;color:#aaa;overflow:hidden;margin:4px 0 0;display:none}
.PopularPosts .item-title {padding:0;margin:0;text-align:left}

Entao va no menu layout veja onde pretende adiiconar então adicionar gadget procure por postagem mais visitadas então adcione marcando as caixas conforme sua preferencia.




Click to comment