quinta-feira, 7 de abril de 2016

CSS popular post Widget New

Css-popular-post-widget-New

Hoje vamos apresentar um novo estilo de widget popular post para Blogger isso é colorido e também numerado  onde vai dar um realçe no seu blogger para colocar isso no seu Blogger siga os passos abaixo.


Adicionando popular post widget no blogger

Faça login no blogger e no menu modelo >> editar/HTML/JavaScript
com as teclas combinadas CTRL+F procure por ]]></b:skin> então cole
o seguinte código antes disso.

.PopularPosts ul{list-style-type:none; padding:5px}
.PopularPosts {color:#fff; line-height:1.6; font-size:100%; border-radius:5px 5px 0 0; padding}
.PopularPosts {line-height:1.6; font-size:100%; border-radius:0; color:#fff}
.PopularPosts a{color:#fff}
.PopularPosts a:hover{color:#fff}
.PopularPosts ul{list-style:none; margin:0; margin-left:-18px; padding:0; counter-reset:popcount}
.PopularPosts ul li:before{list-style-type:none; margin-right:15px; margin-left:5px; padding:0.3em 0.6em; counter-increment:popcount; content:counter(popcount); font-size:16px; color:#fff; position:relative; float:left; border:1px solid #fff; border-radius:100%}
.PopularPosts li{text-transform:uppercase; background:none; margin:0; padding:10px 18px; display:block; clear:both; overflow:hidden; list-style:none; font:13.5px/140%; border-bottom:none}
.PopularPosts li:hover{background:#0FB9BB}
.PopularPosts li a{text-decoration:none}
.PopularPosts ul li{padding:3px 20px; border:none}
.PopularPosts ul li:nth-child(1){background-color:#F48067; margin-right:0}
.PopularPosts ul li:nth-child(2){background-color:#2ba6e1; margin-right:0}
.PopularPosts ul li:nth-child(3){background-color:#718397; margin-right:0}
.PopularPosts ul li:nth-child(4){background-color:#11b7b5; margin-right:0}
.PopularPosts ul li:nth-child(5){background-color:#d9ba71; margin-right:0}
.PopularPosts ul li:nth-child(6){background-color:#F48067; margin-right:0}
.PopularPosts ul li:nth-child(7){background-color:#2ba6e1; margin-right:0}
.PopularPosts ul li:nth-child(8){background-color:#718397; margin-right:0}
.PopularPosts ul li:nth-child(9){background-color:#11b7b5; margin-right:0}
.PopularPosts ul li:nth-child(10){background-color:#d9ba71; margin-right:0}

Salve e pronto

se seu blog ja tem popular post adicionado ok caso não tenha vá no menu layout clicar adicionar novo widget então adicione popular post
salve e veja o resultado 
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