Entradas populares para Blogger like style
Cambiar el aspecto de las entradas populares de nuestro blog de Blogger a un nuevo diseño y estilo totalmente diferente, es lo que aprenderán en este tutorial de Blogger creado exclusivamente para usuarios de Blogger.
La implementación del código es sumamente fácil de realizarlo, solo tendrá que seguir las instrucciones que se detallan en este tutorial
A continuación puede ver su demostración en el siguiente blog de demos
Empezamos
Un clic en Diseño
Un clic en Añadir un gadget
Busque el gadget “Entradas populares”
Un clic en Guardar
Ubiquelo donde mejor le parezca
Ahora diríjase a Tema
1 Un clic en Tema
2 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.
Busque el siguiente código
</head>
Inserte el siguiente CSS justo arriba del código que encontró
<style>
/* Popular Posts */
.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,
.PopularPosts li a img {margin:0;padding:0;list-style:none;border:none;
background:none;outline:none;}
.PopularPosts ul {margin:0;list-style:none;color:#333;}
.PopularPosts ul li img {display:block;width:100%;height:180px;float:left;transition:all 0.3s ease-out;max-width: none;}
.PopularPosts ul li {background-color:#fff;margin:2px;margin-bottom: 30px;padding:0;padding-bottom:5px;position:relative;transition:all 0.3s ease-out;}
.PopularPosts ul li:last-child {padding-bottom:0;}
.PopularPosts .item-title a { font:600 14px 'Playfair Display';color: #555; font-size: 16px; padding: 10px; position: absolute; right: 0; left: 0px; margin: 0px auto; text-align: center; text-decoration: none; top: 120px; overflow: hidden; z-index: 2; line-height: 1.2; background: rgb(255, 255, 255); width: 70%; border-top: 3px solid #FEC606; }
.PopularPosts ul li .item-title a:hover, .PopularPosts ul li a:hover {}
.PopularPosts ul li:before {display:none;list-style:none;}
.PopularPosts .item-thumbnail {margin:0 0 0 0;background: #333;overflow: hidden;}
.PopularPosts .item-snippet {font-size:11px;color:#333;font-weight:400;}
.PopularPosts .item-title {padding-bottom:.2em;line-height: 0.9;}
.PopularPosts .item-thumbnail::after {color: #f8f8f8; list-style-type: none; position: absolute; z-index: 4;font-size: 22px; background: rgb(31, 118, 158); padding: 10px; font-weight: 700; left: 0;}
/* Popular Posts */
</style>
Busque el siguiente código
PopularPosts1
Le mostrara un código perteneciente a las Entradas populares
<b:widget id='PopularPosts1' locked='false' title='Entradas populares' type='PopularPosts'>…</b:widget>
Ejemplo:
Elimine todo el código y remplacelo por el siguiente código
<b:widget id='PopularPosts1' locked='false' title='Entradas populares' type='PopularPosts' version='1'> <b:widget-settings> <b:widget-setting name='numItemsToShow'>7</b:widget-setting> <b:widget-setting name='showThumbnails'>true</b:widget-setting> <b:widget-setting name='showSnippets'>false</b:widget-setting> <b:widget-setting name='timeRange'>ALL_TIME</b:widget-setting> </b:widget-settings> <b:includable id='main'> <b:if cond='data:title != ""'><h2><data:title/></h2></b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <li> <b:if cond='!data:showThumbnails'> <b:if cond='!data:showSnippets'> <!-- (1) No snippet/thumbnail Ayudadeblogger.com --> <a expr:href='data:post.href'><data:post.title/></a> <b:else/> <!-- (2) Show only snippets --> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </b:if> <b:else/> <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. --> <div expr:class='data:showSnippets ? "item-content" : "item-thumbnail-only"'> <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 300, "1:1") : data:post.thumbnail' var='image'> <img alt='' border='0' expr:src='data:image'/> </b:with> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <b:if cond='data:showSnippets'> <div class='item-snippet'><data:post.snippet/></div> </b:if> </div> <div style='clear: both;'/> </b:if> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget>
Un clic en Guardar tema
Visite su blog y mire su nuevo gadget de Entradas populares
Nota: si actualmente tiene el gadget Entradas populares ingresado un estilo, primero deberá eliminar dicho estilo CSS y remplazarlo por el CSS de este tutorial.
¡Fácil verdad!
¿Necesitas ayuda?
Cualquier pregunta no duden en escribir
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
Comentarios