22 de fev de 2017

Posts Populares Personalizados


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 <head>

<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'/>

ACIMA DE </BODY>

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

ACIMA DE ]]></b:skin>

ROSA

<style type='text/css'>

.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 &#39;Oswald&#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 &quot;Times New Roman&quot;,Times,FreeSerif,serif;

padding-right: 5px;

}

.sidebar .PopularPosts .widget-content ul li {

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

}

</style>


CINZA

<style type='text/css'>

.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 &#39;Oswald&#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 &quot;Times New Roman&quot;,Times,FreeSerif,serif;

padding-right: 5px;

color: #fff;

}

.sidebar .PopularPosts .widget-content ul li {

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

}

</style>

AZUL


<style type='text/css'>


.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 &#39;Oswald&#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 &quot;Times New Roman&quot;,Times,FreeSerif,serif;

padding-right: 5px;

color: #000;

}

.sidebar .PopularPosts .widget-content ul li {

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

}

</style>



2 comentários :

  1. Ameiiii estou usado no meu blog deu super certo!!! Posso reblogar????

    ResponderExcluir
  2. Nossa acabo de conhecer seu blog e canal de uma vez só amei a dica e tudo ...
    Beijos!!!

    http://francismeiresilva.blogspot.com.br

    ResponderExcluir