Nuevo estilos de imágenes de entradas populares para blogger
Un truco para blogger sobre como
rediseñar nuestras entradas populares de blogger, es muy simple de realizarlo.
Lo que hoy voy a compartir con ustedes es un truco exclusivo para usarlo en
nuestro blog de blogger y que tenga una apariencia única. Vamos a trasformas
nuestras entradas populares en imágenes pequeñas como cuadriculas, el cual nos
mostrar las imágenes en una forma muy innovadora. Realizar cambios en nuestro
blog de blogger incrementara nuestras visitas. Ya que los usuarios de la red
podrán tener una buena perspectiva del blog que están visitando. Anteriormente publique algunos diseños
exclusivos para transformar nuestras entradas populares en unos extraordinarios
Slideshow, si no has visto mis publicaciones anteriores, puedes seguir los
enlaces que les dejo aquí.
Ahora les invito que vean la
demostración del nuevo estilo de imágenes con entradas populares, el widget se
llama “Entradas Populares” y se encuentra en la parte superior derecha de mi
blog de demos.
Luego de que hayan visto la demostración,
nos dirigimos a trabajar.
1 Ir a blogger
2 Diríjase a
“Diseño” y luego dele un clic en “Añadir un gadget” y busque el widget que dice
“Entradas populares”
3 Dejar la
configuración del widget de Entradas populares tal como se muestra en la imagen
a continuación.
4 Ahora da un
clic en “Guardar” y ubica tu widget de entradas populares en cualquier parte de
tu blog de blogger.
5 Nos dirigimos a
“Plantilla”, le damos un clic en “Edicion de HTML” y en continuar
6 Presiona “F3” y
buscamos el siguiente código
<b:widget id='PopularPosts1' locked='false' title='Entradas
populares' type='PopularPosts'/>
|
7 Remplázalo por
el siguiente código
<b:widget id='PopularPosts1' locked='false' title='Popular Posts'
type='PopularPosts'>
<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 == "false"'>
<b:if
cond='data:showSnippets == "false"'>
<!-- (1) No
snippet/thumbnail -->
<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/>
<b:if
cond='data:showSnippets == "false"'>
<!-- (3) Show
only thumbnails -->
<div
class='item-thumbnail-only'>
<div
class='item-thumbnail'>
<a
expr:href='data:post.href' expr:title='data:post.title'>
<b:if
cond='data:post.thumbnail'>
<img
alt='' border='0' expr:height='data:thumbnailSize'
expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
<b:else/>
<img alt=''
border='0' expr:height='data:thumbnailSize'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuuWivhtDKOGiwByf6c4XcF7Lxei7ENINNS__0TPliArTKJjqBZMcXLkNvX_Wihnh_F1IBhHI1edykejQLS5yend7xjZJegdQim4KASiemAbn7NemW0nfAK2vsjTDCB3cX3qFQ7sz-mmU/s72-c/default.png'
expr:width='data:thumbnailSize'/>
</b:if>
</a>
</div>
</div>
<b:else/>
<!-- (4) Show
snippets and thumbnails -->
<div
class='item-content'>
<b:if
cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a
expr:href='data:post.href' target='_blank'>
<img
alt='' border='0' expr:height='data:thumbnailSize'
expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div
class='item-title'><a
expr:href='data:post.href'><data:post.title/></a></div>
<div
class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear:
both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include
name='quickedit'/>
</div>
</b:includable>
</b:widget>
|
8 Dale un clic en
“Guardar plantilla”
9 Ahora dale un
clic en “Personalizar” y se te abrirá el diseñador de plantillas de blogger.
10 Dale un clic
done dice “Avanzado” y busca “Añadir CSS” e inserta el siguiente código en su
interior.
.popular-posts .item-thumbnail{float:left;}
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;}
|
Luego dale un clic en “Aplicar al Blog”
y listo mira sus cambios en tu blog de blogger y disfruta de esta espectacular
cuadricula de Entradas populares. A continuación te dejo la imagen tal como deberías
introducir el código.
¿Necesitas ayuda?
Cualquier parte que no hayan entendido
no duden en preguntarme y de inmediato les responderé.
Saludos.
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
4 comentarios: