¿COMO HACER UNA SECCIÓN DE RECOMENDADOS PARA TI, EN BLOGGER?

 

Tutorial: ¿Cómo hacer una sección de recomendados para ti, en  BLOGGER?

 

Introducción
1er. Paso
2do. Paso
Conclusiones

Si te gusta personalizar tus plantillas de Blogger, voy a compartir una forma sencilla para realizar una sección de recomendados para los lectores, como la que se ve en la parte de abajo de esta página. Cabe resaltar que, a diferencia del resumen de entradas, no mostrará las últimas entradas publicadas; si no, las más destacadas o las que quiera resaltar.

Como se aconseja, siempre realizar una copia de seguridad de la plantilla y continúa con los siguientes pasos.

1er. Paso: Pega el código en CSS. 

.about-tiles4{ width: 100%; float: left; padding: 10px; box-sizing: border-box; text-align: center; }

  2er. Paso: Agrega un gadget: HTML/JavaScript.

 Pega el siguiente código: 

Ingresa a la parte de diseño y agrega un gadget: HTML/JavaScript  Agregar funcionalidades de terceros u otro código al blog.

Luego de esto simplemente copia y pega el siguiente código.

<div class='about-tiles4'>
<span class='about-image'>
<a href=' https://www.asesoriasmipyme.com/ ' style='color: blue ; font-family: ARIAL; font-size: medium; hover; color:#F22795};'> <img alt='Me' onmouseout='this.src=&apos;    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZs0TPzuPW5ncLH6m6BbrN1zK8bk9xshsWEaisM9rt_6oVhOai1ooweDB9px4QaPEOsHrheLaiCTK8fmHIVHMylQBUtSms04aD9ZfsiQLogxhac4JmZnG1jOxbov2045AxHLX1vAh4J_4/s320/Colocar+la+url+de+su+segunda+imagen.png  &apos;;' onmouseover='this.src=&apos;  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZlYeQe0FUTlgobyFh5j2AFxITbqLV-udmMhEJnKK72N7hdq57z_HnkdgGjzSknsOu4-gWLIC9Z5ENa4YIC0nYYe5amZrhhW1mlpu_gOoAtWFBhmNhVqaxbTLqXQVv56nwYS-_xSgIUuc/s320/colocar+la+url+de+su+imagen.jpg   &apos;;' src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZs0TPzuPW5ncLH6m6BbrN1zK8bk9xshsWEaisM9rt_6oVhOai1ooweDB9px4QaPEOsHrheLaiCTK8fmHIVHMylQBUtSms04aD9ZfsiQLogxhac4JmZnG1jOxbov2045AxHLX1vAh4J_4/s320/Colocar+la+url+de+su+segunda+imagen.png'/></a>
</span>
  <h6 class='about-heading'>titulo</h6>
<span>texto...</span>
   <span> 
     <a href=' https://www.asesoriasmipyme.com/' style='color: #ec722b ; font-family: ARIAL; font-size: medium; hover; color:#F22795};'>Leer mas</a>  
</span>
<p class='about-text'/>
</div>
<!-- First One Ends -->
<!-- Second -->
<div class='about-tiles4'>
<span class='about-image'>
<a href=' https://www.asesoriasmipyme.com/ ' style='color: blue ; font-family: ARIAL; font-size: medium; hover; color:#F22795};'> <img alt='Me' onmouseout='this.src=&apos;    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZs0TPzuPW5ncLH6m6BbrN1zK8bk9xshsWEaisM9rt_6oVhOai1ooweDB9px4QaPEOsHrheLaiCTK8fmHIVHMylQBUtSms04aD9ZfsiQLogxhac4JmZnG1jOxbov2045AxHLX1vAh4J_4/s320/Colocar+la+url+de+su+segunda+imagen.png  &apos;;' onmouseover='this.src=&apos;  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZlYeQe0FUTlgobyFh5j2AFxITbqLV-udmMhEJnKK72N7hdq57z_HnkdgGjzSknsOu4-gWLIC9Z5ENa4YIC0nYYe5amZrhhW1mlpu_gOoAtWFBhmNhVqaxbTLqXQVv56nwYS-_xSgIUuc/s320/colocar+la+url+de+su+imagen.jpg   &apos;;' src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZs0TPzuPW5ncLH6m6BbrN1zK8bk9xshsWEaisM9rt_6oVhOai1ooweDB9px4QaPEOsHrheLaiCTK8fmHIVHMylQBUtSms04aD9ZfsiQLogxhac4JmZnG1jOxbov2045AxHLX1vAh4J_4/s320/Colocar+la+url+de+su+segunda+imagen.png'/></a>
</span>
  <h6 class='about-heading'>TITULO</h6>
<span>Texto...</span>
  <span>    <a href=' https://www.asesoriasmipyme.com/' style='color: #ec722b ; font-family: ARIAL; font-size: medium; hover; color:#F22795};'>Leer mas</a>
 </span>
    <p class='about-text'> </p>
</div>
<!-- Second Ends -->
<!-- Third -->
<div class='about-tiles4'>
<span class='about-image'>
<a href=' https://www.asesoriasmipyme.com/ ' style='color: blue ; font-family: ARIAL; font-size: medium; hover; color:#F22795};'> <img alt='Me' onmouseout='this.src=&apos;    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZs0TPzuPW5ncLH6m6BbrN1zK8bk9xshsWEaisM9rt_6oVhOai1ooweDB9px4QaPEOsHrheLaiCTK8fmHIVHMylQBUtSms04aD9ZfsiQLogxhac4JmZnG1jOxbov2045AxHLX1vAh4J_4/s320/Colocar+la+url+de+su+segunda+imagen.png  &apos;;' onmouseover='this.src=&apos;  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZlYeQe0FUTlgobyFh5j2AFxITbqLV-udmMhEJnKK72N7hdq57z_HnkdgGjzSknsOu4-gWLIC9Z5ENa4YIC0nYYe5amZrhhW1mlpu_gOoAtWFBhmNhVqaxbTLqXQVv56nwYS-_xSgIUuc/s320/colocar+la+url+de+su+imagen.jpg   &apos;;' src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZs0TPzuPW5ncLH6m6BbrN1zK8bk9xshsWEaisM9rt_6oVhOai1ooweDB9px4QaPEOsHrheLaiCTK8fmHIVHMylQBUtSms04aD9ZfsiQLogxhac4JmZnG1jOxbov2045AxHLX1vAh4J_4/s320/Colocar+la+url+de+su+segunda+imagen.png'/></a>
</span>
  <h6 class='about-heading'>Titulo</h6>
  <span>Texto...</span>
 <span>    <a href=' https://www.asesoriasmipyme.com/' style='color: #ec722b ; font-family: ARIAL; font-size: medium; hover; color:#F22795};'>Leer mas</a>
</span>
   <p class='about-text'> </p>
</div>
<!-- Third Ends -->
  <div class='about-tiles4'>
<span class='about-image'> 
<a href=' https://www.asesoriasmipyme.com/ ' style='color: blue ; font-family: ARIAL; font-size: medium; hover; color:#F22795};'> <img alt='Me' onmouseout='this.src=&apos;    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZs0TPzuPW5ncLH6m6BbrN1zK8bk9xshsWEaisM9rt_6oVhOai1ooweDB9px4QaPEOsHrheLaiCTK8fmHIVHMylQBUtSms04aD9ZfsiQLogxhac4JmZnG1jOxbov2045AxHLX1vAh4J_4/s320/Colocar+la+url+de+su+segunda+imagen.png  &apos;;' onmouseover='this.src=&apos;  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZlYeQe0FUTlgobyFh5j2AFxITbqLV-udmMhEJnKK72N7hdq57z_HnkdgGjzSknsOu4-gWLIC9Z5ENa4YIC0nYYe5amZrhhW1mlpu_gOoAtWFBhmNhVqaxbTLqXQVv56nwYS-_xSgIUuc/s320/colocar+la+url+de+su+imagen.jpg   &apos;;' src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZs0TPzuPW5ncLH6m6BbrN1zK8bk9xshsWEaisM9rt_6oVhOai1ooweDB9px4QaPEOsHrheLaiCTK8fmHIVHMylQBUtSms04aD9ZfsiQLogxhac4JmZnG1jOxbov2045AxHLX1vAh4J_4/s320/Colocar+la+url+de+su+segunda+imagen.png'/></a>
</span>
  <h6 class='about-heading'>Titulo</h6>
  <span>Texto...</span>
     <span>   <a href=' https://www.asesoriasmipyme.com/' style='color: #ec722b ; font-family: ARIAL; font-size: medium; hover; color:#F22795};'>Leer mas</a>
</span>
<p class='about-text'> </p>
</div>
  <!-- Four -->

Se vera así: 

Titulo

Texto... Leer mas

                          Conclusiones

El truco está en elegir muy bien las imágenes para que se integren al diseño de la página. Puede utilizar imágenes diferentes para que al cambiar la imagen llamen la atención y haga un efecto visual. 

Con esta forma sencilla puedes realizar una sección de entradas destacadas sin utilizar script que ralentice la carga de la página.

 

Eso es todo, esperamos que esta información te sea útil.