PERSONALIZAR ENTRADAS POPULARES DE BLOGGER

personaliza tus entradas populares en blogger con codigos CCS, hoy de mostrare barios estilos y ejemplos para que personalices tus entradas populares en blogger esto les dará un estilo único y podrá mejorar la experiencia del usuario al navegar por nuestro sitio web. estos son solo algunos trucos para blogger que pueden hacer mejorar tu blog.

como personalizar entradas populares con codigos ccs

lo primero que debes hacer es agregar el gadgets popular que trae blogger, debes ir a diceño, luego añadir gadgets y posteriormente buscar la opción donde dice entradas populares lo agregas y lo guardas.

luego para comenzar a personalizar el gadgets debes irte a plantilla, luego personalizada, opciones avanzadas y bajar hasta la opción agregar CCS, hay es donde pegaras los siguientes códigos que te voy a dejar a continuación.

3 estilos de entradas populares personalizadas

primer diseño ccs de entradas populares

con el siguiente cogido que te voy a presentar te quedara algo así.

puedes codificarlo cambiando el tamaño de las imágenes o si quieres que aparezcan cuadradas lo puedes hacer jugando con los labores del código es tu elección.

d debes copiar este código y pegarlo en tu ccs

/* Entradas Populares
----------------------*/
#PopularPosts1 h2{
text-transform: uppercase;
text-align: center;
font-size:14px;
padding:5px 0 3px 0;
}
.popular-posts ul {
padding-left: 0px;
counter-reset: popcount;
background: #eee;
border: 1px outset #dddddd;
border-radius:10px;
box-shadow: 1px 2px 2px #666666;
width:245px;
}
.popular-posts ul li:before {
list-style-type: none;
margin-right: 10px;
padding: 0.3em 0.6em;
counter-increment: popcount;
content: counter(popcount);
font-size: 16px;
background: #ccc;
color: #fff;
position: relative;
font-weight: bold;
font-family: georgia;
float: right;
border: 1px solid #dddddd;
box-shadow: 1px 2px 3px #666666;
border-radius:70px;
}
.popular-posts ul li {
border-bottom: 1px solid #dddddd;
}
.popular-posts ul li:hover {
border-bottom: 0px dashed #696969;
background:#99C9FF;
border:1px solid #FD7474;
}

.popular-posts ul li a {
text-decoration:none;
color:#5A5F63;
font-size:12px;
font-weight: bold;
font-family: Verdana;
}
.popular-posts ul li a:hover {
text-decoration:none;
}
.popular-posts img {
-webkit-transition:all .5s ease;
-moz-transition:all .5s ease;
transition:all .5s ease;
float:left;padding:0;
border:2px solid #cccccc;
-webkit-border-radius:70px;
-moz-border-radius:70px;
border-radius:70px;
background:#fff;
margin-right:10px;
height:80px;
width:80px;
}
.popular-posts img:hover{
-moz-transform:scale(1.2) rotate(-150deg);
-webkit-transform:scale(1.2) rotate(-150deg);
-o-transform:scale(1.2) rotate(-150deg);
-ms-transform:scale(1.2) rotate(-150deg);
transform:scale(1.2) rotate(-150deg);
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);
box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);
background:#999;
}

ya sabes que puedes cambiar los valores numéricos y jugar con el diseño.

segundo diceño ccs de entradas populares personalizadas

con este segundo estilo o diseño te aparecerá algo así:

tan bien puedes modificar el diseño ccs pero para eso te estoy mostrando barias opciones para que no te enredes haciéndolo tu, así solo tendrás que copiar pegar y listo.

con este diseño te aparecerán las imágenes cuadradas, y el titulo de la entrada al lado derecho, puedes modificarle el tamaño si lo quieres hacer.

este el el codigo ccs

#PopularPosts1 h2{
position:relative;
right:-2px;
padding:8px 63px 6px 17px; /*Ajusta el valor coloreado de azul para extender el listón a la derecha*/
width:100%;
margin:0;
font-size:16px;
background:#3366FF;
color:#f2f2f2;
text-align:left;
text-indent:18px;
}
#PopularPosts1 h2:before{
position:absolute;
content:"";
top:33px;
right:0px;
width: 0px;
height: 0px;
border-bottom:12px outset transparent;
border-left:12px solid #003df5;
}
#PopularPosts1 h2:after{
position:absolute;
content:"";
top:-6px;
left:-5px;
width: 0px;
height: 0px;
border-bottom:24px outset transparent;
border-top:24px outset transparent;
border-left:24px solid #fff;
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:10px;
left:-8px;
width:100%;
}
#PopularPosts1 li{ /*Estilos de cada elemento*/
width:100%;
position:relative;
left:0;
margin:7px 0 16px 12px;
padding:10px 4px 0 5px;
}
#PopularPosts1 ul li:before{ /*Los estilos del Número*/
content:counter(li);
counter-increment:li;
position:absolute;
top:-2px;
left:-20px;
font-size:35px;
width:20px;
color:#777; /*Color de texto*/
}

#PopularPosts1 ul li a{
display:block;
font-size:14px;
color:#333;
text-decoration:none;
transition: all .2s ease-in-out;
}
#PopularPosts1 ul li a:hover{
color:#3366FF;
margin-left:3px;
}

tercer diseño de entradas populares personalizadas

los diseños son parecidos pero con diferentes colores y en este caso abra unas lineas que separen los títulos y imágenes como un diseño metido en cuadros separados, con titulo de entrada y imagen pequeña cuadrada, puedes cambiarle tan bien el tamaño de imagen si la quieres mas grande, así es como se vería eldiceño original.

los diseños como ya te dije son muy parecidos pero te los muestro todos para que tu no tengas que hacer muchas modificaciones en el código y así solo sea copiar y pegar.

código del tercer di ceño copia y pegarlo en añadir ccs

#PopularPosts1 h2{
padding:7px 0 3px 0;
width:100%;
margin:0;
font-size:1.3em;
text-indent:-12px;
font-size:19px;
text-align:center; /* Alineación texto título */
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:8px 0px 1px;
left:-8px;
width:290px;
}
#PopularPosts1 li{ /*Estilos de cada elemento*/
position:relative;
margin:0 0 10px 0;
padding: 3px 2px 0 7px;
left:-5px;
width:285px;
border:1px solid #ddd; /*Color de borde*/
}
#PopularPosts1 ul li:before{ /*Los estilos del Número*/
content:counter(li);
counter-increment:li;
position:absolute;
display:block;
top:-5px;
left:-5px;
font-size:18px;
width:14px;
margin:0 0 10px 0;
padding:4px 4px 4px 3px;
color:#333; /*Color de texto*/
text-align:left;
background:#e2e2e2; /*Color de fondo*/
text-indent:2px;
}
#PopularPosts1 ul li:after{
content:"";
position:absolute;
top:-5px;
left:15px;
width: 0px;
height: 0px;
border-top:5px outset transparent;
border-left:5px solid #aeaeae; /* color triangulo del número*/
}

#PopularPosts1 ul li a{
font-size:16px;
color:#777;
margin-left:17px;
display:block;
min-height:25px;
text-decoration:none;
padding:0 4px 3px 0;
}
#PopularPosts1 ul li:hover{
background:#f9f9f9;
border:1px solid #aaa;
}
#PopularPosts1 ul li a:hover{
color:#0174DF;

}

no olvides que los cambios los puedes ver sin tener que guardar, solo coloca el código y baja tu pantalla hasta donde tienes el gadgets de las entradas populares inmediatamente veras el cambio.

estos son solo algunos trucos de blogger si quieres ver mas y aprender mas sobre este blog no olvides seguirnos en facebook o suscribirte.

espero te sirvan de algo y si tienes alguna duda déjamela saber en un comentario, saludos.

blog que te enseña como ganar dinero en internet, posicionamiento SEO, trucos de posicionamiento, trucos de diseño de blog, encuentra gadgets, trucos htlm, ccs, y todo sobre como ganar dinero en internet.

Páginas