Entradas Populares para blogger nuevos estilos
Quieres darle otro aspecto a las
entradas populares de tu blog de blogger, Ayuda de blogger te ayudara a
conseguirlo. Las entradas populares para blogger son muy utilizadas por todos
los bloggers, y es por esto que voy a explicar un simple truco en el cual se
mostrara tus entradas populares divididas en dos columnas, este truco para
blogger es realmente espectacular, solo deberás seguir las instrucciones y podrás
obtener este grandioso truco para blogger.
A continuación mire su demostración en
mi blog de demos el widget de entradas populares tiene el nombre de “NO TE
PIERDAS” en el sidebar de la derecha.
Te gusto!
Vamos a trabajar
1 Ir a blogger
2 Da un clic en "Diseño"
3 Abre el gadget que dice “Añadir un
gadget” y busca el widget que dice “Entradas populares”.
Donde dice TITULO pon el titulo que tú
quieras, luego habilita cualquiera de las casillas donde dice “Mas visto”, por
ultimo donde dice “Mostrar” solo marca la casilla que dice “Imagen en miniatura”
y nada mas, y da un clic en “Guardar” y ubica tu entrada popular donde quieras
mostrarlo.
Una vez hecho esto vas ha realizar lo
siguiente:
1 Da un clic en Plantilla
2 Presiona “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.
Busca este código
<b:widget
id='PopularPosts1'
|
Una vez que hayas encontrado el código,
se te mostrara un código parecido como el que te dejo a continuación:
<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'> <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> <div style='clear: both;'/> <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> |
Borra todo el código que esta marcado de
color amarillo y reemplázalo por las siguientes líneas de código:
<b:widget
id='PopularPosts1' locked='false' title='Entradas Populares'
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) Mostrar solo snippets by Ayudadeblogger.com --> <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) Mostrar solo 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> <div style='clear: both;'/> <b:else/> <!-- (4) Mostrar snippets y 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> |
Y por ultimo vas a buscar este otro
código
]]></b:skin>
|
Inserta el siguiente código arriba del código
que encontraste
.PopularPosts .widget-content ul li {background:none repeat scroll 0 0
transparent;float:left;list-style:none outside none;margin:0
!important;padding: 0 !important;border-bottom:none}
.PopularPosts ul{padding:5px 0}
.PopularPosts .item-thumbnail img{width:110px;height:110px;padding:11px;margin:0}
.PopularPosts .item-content{position:relative;float:left;margin:0}
.PopularPosts .item-title
a{font-size:11px;color:#fff;display:block;padding:0
5px;float:left;width:122px}
.PopularPosts
.item-title:hover{opacity:1;-moz-opacity:1;filter:alpha(opacity=100)}
.PopularPosts .item-thumbnail{float:left;margin:3px 1px 7px
10px;border:1px solid #ccc;overflow: hidden}
.PopularPosts
.item-title{background:#000;position:absolute;bottom:8px;right:2px;opacity:.6;-moz-opacity:.6;filter:alpha(opacity=6)}
|
Ahora es momento de dar un clic en “Guardar
plantilla”
Felicidades ahora tienes un nuevo estilo
de entradas populares en tu blog de blogger dividido en dos columnas
Viste que era tan facil?
¿Necesitas ayuda?
Cualquier pregunta no duden en hacérmelo
saber y de inmediato les responderé
Saludos.
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
1 comentario: