Posts Populares Personalizados
Autor: Raquel Duarte | Publicado: 2017-02-22T18:07:00-03:00




Finalmente tirando a poeira desse canal com um vídeo que foi bem pedido, hoje nós vamos deixar os posts populares do nosso blog muito mais bonitinhos, então eu espero que vocês gostem, compartilhem, deixem um like, se inscrevam no canal, me mandem brusinhas, enfim... vamos lá!


Veja o tutorial completo sem enrolation







Gostou? Então se inscreve no canal que tem muito mais de onde veio ese







♡ CÓDIGOS



ABAIXO DE&nbsp;&lt;head&gt;



&lt;link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'/&gt;



ACIMA DE &lt;/BODY&gt;



&lt;script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/&gt;&lt;script type='text/javascript'&gt;$(&amp;#39;.popular-posts img&amp;#39;).attr(&amp;#39;src&amp;#39;, function(e, t) {return t.replace(&amp;#39;/w72-h72-p-nu/&amp;#39;, &amp;#39;/s350-c/&amp;#39;)});$(&amp;#39;.popular-posts ul li .item-snippet&amp;#39;).each(function(){var txt=$(this).text().substr(0,60);var j=txt.lastIndexOf(&amp;#39; &amp;#39;);if(j&amp;gt;10)$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&amp;#39;...&amp;#39;));});$(&amp;#39;.popular-posts ul li .item-content a&amp;#39;).each(function(){var txt=$(this).text().substr(0,60);var j=txt.lastIndexOf(&amp;#39; &amp;#39;);if(j&amp;gt;=6)$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&amp;#39;...&amp;#39;));});&lt;/script&gt;



ACIMA DE&nbsp;]]&gt;&lt;/b:skin&gt;



ROSA


&lt;style type='text/css'&gt;

.sidebar .PopularPosts ul {

padding: 0;

margin: 0;

}

.sidebar .PopularPosts .item-thumbnail a {

clip: auto;

display: block;

height: auto;

overflow: hidden;

}

.sidebar .PopularPosts .item-thumbnail {

width: 130px;

height: 130px;

border-right: 5px solid #fff;

margin: 0px 10px 0px 0px !important;

position: relative;

}

.sidebar .PopularPosts .item-thumbnail img {

position: relative;

height: 100%;

width: 100%;

object-fit: cover;

}

.sidebar .PopularPosts ul li {

float: left;

margin-bottom: 5px;

max-height: 130px;

min-width: 250px;

overflow: hidden;

}

.sidebar .PopularPosts ul li:first-child {

background: #FFB3D9;

}

.sidebar .PopularPosts ul li:first-child + li{

background: #FF7DBE;

}

.sidebar .PopularPosts ul li:first-child + li + li {

background: #FF55AA;

}

.sidebar .PopularPosts ul li:first-child + li + li + li {

background: #FF2894;

}

.sidebar .PopularPosts ul li:first-child + li + li + li + li{

background: #FF0984;

}

.sidebar .PopularPosts .item-title {

font: 13px &amp;#39;Oswald&amp;#39;, sans-serif;

text-transform: uppercase;

padding: 10px 5px 10px;

}

.sidebar .PopularPosts .item-title a {

color: #000;

text-decoration: none;

}

.sidebar .PopularPosts .item-snippet {

font: 13px &amp;quot;Times New Roman&amp;quot;,Times,FreeSerif,serif;

padding-right: 5px;

}

.sidebar .PopularPosts .widget-content ul li {

padding: 0px 5px 0px 0px!important;

}

&lt;/style&gt;




CINZA




&lt;style type='text/css'&gt;



.sidebar .PopularPosts ul {



padding: 0;



margin: 0;



}



.sidebar .PopularPosts .item-thumbnail a {



clip: auto;



display: block;



height: auto;



overflow: hidden;



}



.sidebar .PopularPosts .item-thumbnail {



width: 130px;



height: 130px;



border-right: 5px solid #fff;



margin: 0px 10px 0px 0px !important;



position: relative;



}



.sidebar .PopularPosts .item-thumbnail img {



position: relative;



height: 100%;



width: 100%;



object-fit: cover;



}



.sidebar .PopularPosts ul li {



float: left;



margin-bottom: 5px;



max-height: 130px;



min-width: 250px;



overflow: hidden;



}



.sidebar .PopularPosts ul li:first-child {



background: #C0C0C0;



}



.sidebar .PopularPosts ul li:first-child + li{



background: #969696;



}



.sidebar .PopularPosts ul li:first-child + li + li {



background: #808080;



}



.sidebar .PopularPosts ul li:first-child + li + li + li {



background: #333333;



}



.sidebar .PopularPosts ul li:first-child + li + li + li + li{



background: #000;



}



.sidebar .PopularPosts .item-title {



font: 13px &amp;#39;Oswald&amp;#39;, sans-serif;



text-transform: uppercase;



padding: 10px 5px 10px;



}



.sidebar .PopularPosts .item-title a {



color: #fff;



text-decoration: none;



}



.sidebar .PopularPosts .item-snippet {



font: 13px &amp;quot;Times New Roman&amp;quot;,Times,FreeSerif,serif;



padding-right: 5px;



color: #fff;



}



.sidebar .PopularPosts .widget-content ul li {



padding: 0px 5px 0px 0px!important;



}



&lt;/style&gt;



AZUL





&lt;style type='text/css'&gt;








.sidebar .PopularPosts ul {




padding: 0;



margin: 0;



}



.sidebar .PopularPosts .item-thumbnail a {



clip: auto;



display: block;



height: auto;



overflow: hidden;



}



.sidebar .PopularPosts .item-thumbnail {



width: 130px;



height: 130px;



border-right: 5px solid #fff;



margin: 0px 10px 0px 0px !important;



position: relative;



}



.sidebar .PopularPosts .item-thumbnail img {



position: relative;



height: 100%;



width: 100%;



object-fit: cover;



}



.sidebar .PopularPosts ul li {



float: left;



margin-bottom: 5px;



max-height: 130px;



min-width: 250px;



overflow: hidden;



}



.sidebar .PopularPosts ul li:first-child {



background: #D5EAFF;



}



.sidebar .PopularPosts ul li:first-child + li{



background: #B7DBFF;



}



.sidebar .PopularPosts ul li:first-child + li + li {



background: #9DCEFF;



}



.sidebar .PopularPosts ul li:first-child + li + li + li {



background: #88C4FF;



}



.sidebar .PopularPosts ul li:first-child + li + li + li + li{



background: #6AB5FF;



}



.sidebar .PopularPosts .item-title {



font: 13px &amp;#39;Oswald&amp;#39;, sans-serif;



text-transform: uppercase;



padding: 10px 5px 10px;



}



.sidebar .PopularPosts .item-title a {



color: #000;



text-decoration: none;



}



.sidebar .PopularPosts .item-snippet {



font: 13px &amp;quot;Times New Roman&amp;quot;,Times,FreeSerif,serif;



padding-right: 5px;



color: #000;



}



.sidebar .PopularPosts .widget-content ul li {



padding: 0px 5px 0px 0px!important;



}



&lt;/style&gt;