Obtener nuevos estilos fascinantes para implementarlos en nuestro blog de blogger es lo que van a aprender con este grandioso tutorial de blogger.
Voy a explicar un truco muy simple y fácil de realizar para cambiar el estilo de nuestras entradas populares para blogger, este truco para blogger se lo realiza de forma sencilla, solo tendrán que seguir las instrucciones claras de como insertar los diferentes estilos y así podrán obtener este magnifico truco para blogger.
El mundo de Kiko.com se basa en presentarles trucos nuevos para blogger y que se muestren en todos los navegadores posibles como Firefox, Google Chrome, Internet Explorer etc.
La funcionalidad de este nuevo estilo de entradas populares para blogger es, aumento de la imagen al momento de pasar el cursor por una de ellas, estilo único en la forma en que se muestra la imagen y el resumen de nuestra entra popular de blogger.
Ahora dirígete a diseño y mira si tienes habilitado el widget de Entradas populares, si no lo tienes habilitado, tendrás que habilitarlo y ubícalo donde mejor te parezca.
2 Da un clic en “Plantilla”
3 Un clic en “Editar HTML”
Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación
En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor, debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual te mostrara tal y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al momento que yo diga busca este código.
4 Busca este código
]]></b:skin>
Inserta las siguientes líneas de código arriba del código que encontraste
/*-----PopularPosts start by Ayudadeblogger.com-----*/
.PopularPosts .widget-content ul li {
padding: 0;
list-style:none;
background: #eee;
margin: 10px 0px;
border:0;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
}
.PopularPosts .item-title {
padding: 0 5px;
}
.PopularPosts .item-snippet {
padding: 0 5px 5px;
}
.PopularPosts .widget-content ul li {
overflow: hidden;
}
.PopularPosts .widget-content ul li:hover {
background: #000;
}
.PopularPosts .widget-content ul li:hover .item-snippet {
color: #fff;
}
.PopularPosts .widget-content ul li:hover .item-title a {
color: #fff;
}
.PopularPosts .item-thumbnail {
height: 100px;
overflow: hidden;
margin-right:0;
}
.PopularPosts img {
width:100%;
margin-top: -40px;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
}
.PopularPosts ul li:hover .item-thumbnail img {
margin-top: -150px;
}
.PopularPosts .widget-content ul li {
padding: 0;
list-style:none;
background: #eee;
margin: 10px 0px;
border:0;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
}
.PopularPosts .item-title {
padding: 0 5px;
}
.PopularPosts .item-snippet {
padding: 0 5px 5px;
}
.PopularPosts .widget-content ul li {
overflow: hidden;
}
.PopularPosts .widget-content ul li:hover {
background: #000;
}
.PopularPosts .widget-content ul li:hover .item-snippet {
color: #fff;
}
.PopularPosts .widget-content ul li:hover .item-title a {
color: #fff;
}
.PopularPosts .item-thumbnail {
height: 100px;
overflow: hidden;
margin-right:0;
}
.PopularPosts img {
width:100%;
margin-top: -40px;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
}
.PopularPosts ul li:hover .item-thumbnail img {
margin-top: -150px;
}
Busca este código
</head>
Un clic en “Plantilla”
Un clic en “Editar HTML”
Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación
En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,
debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor,
Coloca este código en el buscador y dale un "Enter"
</head>
Inserta las siguientes líneas de código justo arriba (ó antes) del código que encontraste
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>
Busca este código
</body>
Un clic en “Plantilla”
Un clic en “Editar HTML”
Ahora se le abrirá el Editor HTML de su plantilla
En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.
Busca este código
</body>
Ingresa el siguiente código justo arriba del código que encontraste.
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<script type='text/javascript'>
$('.popular-posts img').attr('src', function(e, t) {
return t.replace('/w72-h72-p-nu/', '/s350-c/')
});
$('.popular-posts ul li .item-snippet').each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(' ');
if(j>10)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
});
$('.popular-posts ul li .item-content a').each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(' ');
if(j>=6)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
});
</script>
<script type='text/javascript'>
$('.popular-posts img').attr('src', function(e, t) {
return t.replace('/w72-h72-p-nu/', '/s350-c/')
});
$('.popular-posts ul li .item-snippet').each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(' ');
if(j>10)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
});
$('.popular-posts ul li .item-content a').each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(' ');
if(j>=6)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
});
</script>
Ahora necesita aumentar un valor, cambiar 72 por 300, para ello siga las instrucciones del siguiente
video tutorial
8 Eso es todo, ahora dale un clic en “Guardar plantilla”
Data de la Publicación; 07-09-2019
Fuente; ayudadeblogger
Publicado por;
Follow Us
Were this world an endless plain, and by sailing eastward we could for ever reach new distances