Publicaciones populares para blogger

En otros post hemos hablado de poner publicaciones populares de forma diferente, pero Sora nos deja estas otras formas de poner estas publicaciones

Simplemente vamos a usar CSS que incorporaremos a nuestra plantilla.
Lo primero que tenemos que tener es el gadget instalado en nuestra plantilla de entradas populares.
Para ello nos vamos a

Diseño > Añadir un gadget > Entradas populares.


Una vez que ya lo tengamos nos vamos a editar nuestra plantilla:
Como siempre digo antes de tocar algo de nuestro HTML tenemos que hacer una copia de seguridad por si algo no nos sale bien.
Puedes verlo paso a paso en este post.
Ahora nos vamos a:

Vamos a Tema > HTML 

Busca la etiqueta   ]]></b:skin>  y añadimos el código del estilo que más nos guste

Estilo 1

Código

.sidebar .PopularPosts ul {

margin: 0;

padding: 0;

}

.sidebar .PopularPosts ul li {

list-style: none !important;

padding: 0 !important;

margin-bottom: 10px;

}

.sidebar .PopularPosts .item-thumbnail {

height: 190px;

margin: 0;

overflow: hidden;

width: 100%;

position: relative;

}

.sidebar .PopularPosts .item-title {

display:block;

clear:both;

}

.sidebar .PopularPosts img {

height: 100%;

width: 100%;

object-fit: cover;

}

.sidebar .PopularPosts .item-title a {

display: block;

margin: 0 auto;

padding: 5px 10px;

font-size:15px;

font-family: 'Playfair Display', serif;

}

.sidebar .PopularPosts .item-snippet {

background: rgba(0, 0, 0, 0.35);

border-top: 6px solid rgba(0, 0, 0, 0.1);

border-bottom: 6px solid rgba(0, 0, 0, 0.1);

color: #FFFFFF;

left: 0px;

right: 0px;

margin: 0px auto;

padding: 65px 10px 10px;

position: absolute;

font: 13px "Times New Roman",Times,FreeSerif,serif;

text-align: center;

top: 35px;

width: 60%;

z-index: 1;

}

.sidebar .PopularPosts .item-content {

position: relative;

}

.img-overlay {

position: absolute;

left: 0;

top: 0;

z-index: 1;

width: 100%;

height: 100%;

background-color: rgba(40,35,40,0.05);

}

.PopularPosts .item-thumbnail:hover a .img-overlay {

background-color:rgba(40,35,40,0.3)

}

Estilo 2

Código

.sidebar .PopularPosts ul {

margin: 0;

padding: 0;

}

.sidebar .PopularPosts ul li {

list-style: none !important;

padding: 0 !important;

margin-bottom: 10px;

margin-right: 10px;

width: 48.4%;

float: left;

}

.sidebar .PopularPosts ul li.odd {

margin-right: 0;

}

.sidebar .PopularPosts .item-thumbnail {

height: 190px;

margin: 0;

overflow: hidden;

width: 100%;

position: relative;

}

.sidebar .PopularPosts .item-title {

display:block;

clear:both;

}

.sidebar .PopularPosts img {

height: 100%;

width: 100%;

object-fit: cover;

}

.sidebar .PopularPosts .item-thumbnail:before {

content: "\f02d";

font-family: FontAwesome;

line-height: 32px;

width: 32px;

height: 32px;

font-size: 18px;

color: #fff;

text-align: center;

font-weight: 400;

position: absolute;

top: 45%;

left: 40%;

opacity: 1;

padding: 0;

z-index: 2;

border: 2px solid #fff;

border-radius: 50%;

transition: all 0.25s ease-in-out 0s;

}

.sidebar .PopularPosts .item-title a {

display: block;

margin: 0 auto;

padding: 5px 0;

font-size:15px;

line-height: 20px;

width: 100%;

text-overflow: ellipsis;

overflow: hidden;

white-space: nowrap;

cursor: pointer;

}

.sidebar .PopularPosts .item-snippet {

color: #333333;

margin: 0px auto;

}

.sidebar .PopularPosts .item-content {

position: relative;

}

.PopularPosts .img-overlay {

position: absolute;

left: 0;

top: 0;

z-index: 1;

width: 100%;

height: 100%;

background-color:#d86843;

opacity:0.5;

}

.PopularPosts .item-thumbnail:hover a .img-overlay {

background-color: rgba(40,35,40,0.3);

opacity:1;

}

.sidebar .PopularPosts .widget-content ul li:first-child,

.sidebar .custom-widget li:first-child {

padding-top: 0;

border-top: 0;

}

.sidebar .PopularPosts .widget-content ul li:last-child,

.sidebar .custom-widget li:last-child {

padding-bottom: 0;

}

Estilo 3

Código

.PopularPosts .item-thumbnail {

margin: 0 10px 0 0 !important;

width: 80px;

height: 60px;

float: left;

overflow: hidden;

}

.PopularPosts .item-thumbnail a {

position: relative;

display: block;

overflow: hidden;

line-height: 0;

}

.PopularPosts ul li img {

padding: 0;

width: 80px;

height: 60px;

}

.PopularPosts .widget-content ul li {

overflow: hidden;

border-bottom: 1px solid #F5F5F5;

padding: 10px 0;

}

.sidebar .PopularPosts .widget-content ul li:first-child,

.sidebar .custom-widget li:first-child {

padding-top: 0;

border-top: 0;

}

.sidebar .PopularPosts .widget-content ul li:last-child,

.sidebar .custom-widget li:last-child {

padding-bottom: 0;

}

.PopularPosts ul li a {

color: #222222;

font-weight: 400;

font-size: 13px;

line-height: 1.6em;

}

.PopularPosts ul li a:hover {

color: #0277bd;

}

.PopularPosts .item-title {

margin: 0;

padding: 0;

line-height: 0;

}

.item-snippet {

font-size: 12px;

padding-top: 3px;

font-weight: 400;

color: #999;

}

Estilo 4

Código

.PopularPosts .item-thumbnail{margin:0 15px 0 0 !important;width:90px;height:65px;float:left;overflow:hidden;    position: relative}

.PopularPosts .item-thumbnail a{position:relative;display:block;overflow:hidden;line-height:0}

.PopularPosts ul li img{width:90px;height:65px;object-fit:cover;padding:0;transition:all .3s ease}

.PopularPosts .widget-content ul li{overflow:hidden;padding:10px 0;border-top:1px solid #f2f2f2}

.sidebar .PopularPosts .widget-content ul li:first-child,.sidebar .custom-widget li:first-child,.tab-widget .PopularPosts .widget-content ul li:first-child,.tab-widget .custom-widget li:first-child{padding-top:0;border-top:0}

.sidebar .PopularPosts .widget-content ul li:last-child,.sidebar .custom-widget li:last-child,.tab-widget .PopularPosts .widget-content ul li:last-child,.tab-widget .custom-widget li:last-child{padding-bottom:0}

.PopularPosts ul li a{color:#333333;font-weight:400;font-size:14px;line-height:1.4em;transition:color .3s}

.PopularPosts ul li a:hover{color:#FF4400}

.PopularPosts .item-title{margin:0 0 4px;padding:0;line-height:0}

.item-snippet{display:none;font-size:0;padding-top:0}

.PopularPosts ul {

counter-reset: popularcount;

margin: 0;

padding: 0;

}

.PopularPosts .item-thumbnail::before {

background: rgba(0, 0, 0, 0.3);

bottom: 0px;

content: "";

height: 100px;

width: 100px;

left: 0px;

right: 0px;

margin: 0px auto;

position: absolute;

z-index: 3;

}

.PopularPosts .item-thumbnail::after {

color: rgba(255,255,255, 0.63);

content: counter(popularcount, decimal);

counter-increment: popularcount;

font-size: 70px;

list-style-type: none;

position: absolute;

left: 5px;

top: -5px;

z-index: 4;

}

Estilo 5

Código

.sidebar .PopularPosts ul {

counter-reset: popularcount;

margin: 0;

padding: 0;

}

.sidebar .PopularPosts ul li {

width: 100%;

list-style: none !important;

padding: 0 !important;

margin-bottom: 20px;

position: relative;

border: 0;

}

.sidebar .PopularPosts .item-thumbnail a {

clip: auto;

display: block;

height: auto;

max-height: 180px;

}

.sidebar .PopularPosts .item-thumbnail {

width: 100%;

height: 100%;

max-height: 190px;

overflow: hidden;

margin-bottom: 10px;

}

.sidebar .PopularPosts .item-thumbnail:after {

content: counter(popularcount, decimal);

counter-increment: popularcount;

float: left;

font-size: 14px;

list-style-type: none;

padding:10px;

position: absolute;

top: 0;

z-index: 4;

background: #e84c4c;

color: #fff;

}

.sidebar .PopularPosts .item-thumbnail img {

width: 100%;

height: 100%;

object-fit: cover;

}

.sidebar .PopularPosts .item-title {

position: relative;

}

.sidebar .PopularPosts .item-title a {

color: #FFFFFF;

font: 15px 'Playfair Display', serif;

text-transform: uppercase;

font-size: 20px;

padding: 10px;

position: absolute;

right: 0;

left: 0px;

margin: 0px auto;

text-align: center;

text-decoration: none;

top: 80px;

width: 80%;

background-color: rgba(0,0,0,0.5);

overflow: hidden;

z-index: 2;

}

.sidebar .PopularPosts .item-snippet {

padding: 10px 15px;

font-size: 13px;

text-align: center;

background: #e84c4c;

color:#fff;

}

y ahora buscamos la etiqueta </body> y justo encima añadimos esto

 

Código

<script type='text/javascript'>

//<![CDATA[ 

function resizeThumbarlina(e,t){for(var s=document.getElementById(e),r=s.getElementsByTagName("img"),c=0;c<r.length;c++)r[c].src=r[c].src.replace(/\/s72\-c/,"/s"+t),r[c].width=t,r[c].height=t}resizeThumbarlina("PopularPosts1",400);

$(document).ready(function(){

 $('.PopularPosts img').each(function(){

  var srcUrl = $(this).attr('src');

  $(this).attr('src', srcUrl.replace('default', 'maxresdefault'));

 });

});

//]]>

</script>

Nota:
Antes de realizar cualquier cambio en nuestro blog, tendremos que realizar una copia de seguridad del mismo por si algo no sale bien.

Puedes ver en este post como lo hacemos paso a paso

Enlace

Datos de https://www.sorabloggingtips.com/