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 == &quot;false&quot;'>           <b:if cond='data:showSnippets == &quot;false&quot;'>             <!-- (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 == &quot;false&quot;'>             <!-- (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 == &quot;false&quot;'>           <b:if cond='data:showSnippets == &quot;false&quot;'>             <!-- (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 == &quot;false&quot;'>             <!-- (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

¿Te ha resultado útil este artículo, recomiendanos?

Si

TAGS: Entradas Populares

Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.