domingo, 7 de agosto de 2016

4 Popular Post widget Keren Blogger

popular-post-terbaik-keren-blogger


Hoje vamos apresentar 4 novos estilos de popular post, popular post serve para dar uma direção a nosso visitante afim de mostrar quais são os post mais populares no nosso Blog isso também é uma forma de garantir mais quantidade de acesso existem varios tipos de widget que você pode colocar no blogger afim de chamar a atenção no seu Blogger vamos compartilhar os 4 mostrado na figura acima escolha o seu e coloque no Blogger para adicionar isso siga os passos.



Adicionando popular post keren Blogger

Faça login no Blogger
então va em modelo Editar >> HTML/JavaScript
com as teclas combinadas CTRL+F busque por </head> então escolha qual modelo deseja copie o código e cole

Modelo 1

<style type='text/css'>
/* Widget popular Post1 */
.popular-posts ul{padding:0;border-radius:2px;border:0;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);position:relative;overflow:hidden;}
.popular-posts ul li{box-sizing:border-box;list-style-type:none;margin:0;padding:10px 10px 10px 72px!important;min-height:68px;line-height:1.5rem;height:inherit;position:relative;}
.popular-posts ul li:nth-child(1){background-color:#f44336;}
.popular-posts ul li:nth-child(2){background-color:#e91e63;}
.popular-posts ul li:nth-child(3){background-color:#9c27b0;}
.popular-posts ul li:nth-child(4){background-color:#673ab7;}
.popular-posts ul li:nth-child(5){background-color:#3f51b5;}
.popular-posts ul li:nth-child(6){background-color:#2196f3;}
.popular-posts ul li:nth-child(7){background-color:#03a9f4;}
.popular-posts ul li:nth-child(8){background-color:#00bcd4;}
.popular-posts ul li:nth-child(9){background-color:#009688;}
.popular-posts ul li:nth-child(10){background-color:#4caf50;}
.popular-posts ul li:hover{background-color:#757575;}
.popular-posts ul li a{color:#FFF;text-decoration:none;}
.popular-posts ul li a:hover{color:#EEE;}
.popular-posts ul li img{width:42px;height:42px;position:absolute;padding:inherit;border-radius:50%;overflow:hidden;left:15px;border:0;display:inline-block;vertical-align:middle;}
</style>


Modelo 2 


<style type='text/css'>
/*Popular Post 2*/
.popular-posts ul{padding:0;border-radius:2px;border:0;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);position:relative;overflow:hidden;}
.popular-posts ul li{box-sizing:border-box;list-style-type:none;margin:0;padding:10px 10px 10px 72px!important;min-height:68px;line-height:1.5rem;height:inherit;position:relative;}
.popular-posts ul li:nth-child(1){background-color:#00bcd4;}
.popular-posts ul li:nth-child(2){background-color:#009688;}
.popular-posts ul li:nth-child(3){background-color:#4caf50;}
.popular-posts ul li:nth-child(4){background-color:#8bc34a;}
.popular-posts ul li:nth-child(5){background-color:#cddc39;}
.popular-posts ul li:nth-child(6){background-color:#ffeb3b;}
.popular-posts ul li:nth-child(7){background-color:#ffc107;}
.popular-posts ul li:nth-child(8){background-color:#ff9800;}
.popular-posts ul li:nth-child(9){background-color:#ff5722;}
.popular-posts ul li:nth-child(10){background-color:#795548;}
.popular-posts ul li:hover{background-color:#757575;}
.popular-posts ul li a{color:#FFF;text-decoration:none;}
.popular-posts ul li a:hover{color:#EEE;}
.popular-posts ul li img{width:42px;height:42px;position:absolute;padding:inherit;border-radius:50%;overflow:hidden;left:15px;border:0;display:inline-block;vertical-align:middle;}
</style>

Modelo 3 


<style type='text/css'>
/*Popular Post 3*/
.popular-posts ul{padding:0;border-radius:2px;border:0;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);position:relative;overflow:hidden;}
.popular-posts ul li{box-sizing:border-box;list-style-type:none;background-color:#fff;margin:0;padding:10px 10px 10px 72px!important;min-height:68px;line-height:1.5rem;height:inherit;border-bottom:1px solid #e0e0e0;position:relative;}
.popular-posts ul li:hover{background-color:#EEE;}
.popular-posts ul li a{color:#424242;text-decoration:none;}
.popular-posts ul li a:hover{color:#212121;}
.popular-posts ul li img{width:42px;height:42px;position:absolute;padding:inherit;border-radius:50%;overflow:hidden;left:15px;border:0;display:inline-block;vertical-align:middle;}
</style>


Modelo 4 


<style type='text/css'>
/*Popular Post 4*/
.popular-posts ul{padding:0;border-radius:2px;border:0;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);position:relative;overflow:hidden;}
.popular-posts ul li{box-sizing:border-box;list-style-type:none;background-color:#212121;margin:0;padding:10px 10px 10px 72px!important;min-height:68px;line-height:1.5rem;height:inherit;border-bottom:1px solid #333;position:relative;}
.popular-posts ul li:hover{background-color:#262626;}
.popular-posts ul li a{color:#FFF;text-decoration:none;}
.popular-posts ul li a:hover{color:#EEE;}
.popular-posts ul li img{width:42px;height:42px;position:absolute;padding:inherit;border-radius:50%;overflow:hidden;left:15px;border:0;display:inline-block;vertical-align:middle;}
</style>


Apos ter escolhido o seu modelo salve então va em menu layout adicionar novo gadget então escolha popular post marque apenas o campo thumbnails para mostrar.
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner