Modificar el gadget Featured post - Entrada destacada

Hace mucho tiempo no había publicado modificaciones de gadgets de Blogger. Bueno es momento de modificar el gadget Featured post más conocido como Entrada destacada.

Para realizar este truco de Blogger, vamos a crear el Gadget Entrada destaca y luego debemos ingresar un CSS y otras cosas más para que pueda tener un diseño profesional

Empezamos

Modificar el gadget Featured post - Entrada destacada

Demo Clic aquí

Video tutorial

Suscríbase a nuestro canal de Youtube
1.- Ir a Blogger.com

2.- Un clic en Diseño

3.- Un clic en "Añadir un gadget"

4.- Un clic en "Entrada destacada"

5.- Selecciona el entrada destacada que quieras mostrar, un clic en Guardar

6.- Ubica tu nuevo gadget donde lo necesites mostrar

7.- Un clic en Tema

8.- Un clic en Editar HTML

9.- Busca el gadget FeaturedPost1 de la siguiente manera

10.- Le mostrara la ubicación de su gadget, como ejemplo la siguiente captura de pantalla

11.- Elimine toda la linea de código de su gadget, remplacelo por el siguiente:

Nota: en el video tutorial podrá observar como hacerlo

      <b:widget id='FeaturedPost1' locked='false' title='Entrada destacada' type='FeaturedPost' version='1'>
        <b:widget-settings>
          <b:widget-setting name='showSnippet'>true</b:widget-setting>
          <b:widget-setting name='showPostTitle'>true</b:widget-setting>
          <b:widget-setting name='postId'>1797697161547593835</b:widget-setting>
          <b:widget-setting name='showFirstImage'>true</b:widget-setting>
          <b:widget-setting name='useMostRecentPost'>false</b:widget-setting>
        </b:widget-settings>
        <b:includable id='main'>
  <!-- Only display title if it's non-empty -->
  <b:include name='content'/>
  <b:include name='quickedit'/>
</b:includable>
        <b:includable id='content'>
  <div class='post-summary'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
    <b:if cond='data:showFirstImage and data:postFirstImage != &quot;&quot;'>
      <img class='image' expr:src='data:postFirstImage'/>
    </b:if>
    <b:if cond='data:showPostTitle and data:postTitle != &quot;&quot;'>
<div class='FeaturedPost-title'>
      <h3><a expr:href='data:postUrl'><data:postTitle/></a></h3>
      </div>
    </b:if>
    <b:if cond='data:showSnippet and data:postSummary != &quot;&quot;'>
      <p>
        <data:postSummary/>
      </p>
    </b:if>
<a class='readmore' expr:href='data:postUrl'>Read more
<i class='fa fa-long-arrow-right'/></a>
  </div>
  <style type='text/css'>
    .image {
      width: 100%;
    }
  </style>
</b:includable>
      </b:widget>

11.- Ahora busque el siguiente código

</head>

12.- Justo arriba del <//head> agregue el siguiente CSS

<style>
/* FeaturedPost */
.post-summary{padding:30px;background:#fff;margin-bottom:20px;border:3px solid #7169fe}
.gadget-featured-post .FeaturedPost {
    margin-top: 20px;
}
#FeaturedPost1 h2 {
    color: #fff;
    background: #7169fe;
    padding: 15px;
    bottom: 30px;
    text-transform: uppercase;
    font: 500 12px &#39;Rubik&#39;,arial,sans-serif;
    display: table;
    letter-spacing: 1px;
    top: -54px;
    border-radius: 5px;
    box-shadow: 4px 4px 15px rgba(0,0,0,0.1);
}
#FeaturedPost1 h2:before{content:&quot;\f08a&quot;;font-family:FontAwesome;display:inline-block;margin-right:6px}
.FeaturedPost-title{background:#fff;top:-60px;padding:10px 20px;width:70%;border-top:3px solid #7169fe}
.FeaturedPost-title a{font:700 27px Playfair Display;line-height:1.2;color:#000}
#FeaturedPost1 h2,.FeaturedPost-title,.post-summary p,.readmore{position:relative;margin:0 auto;text-align:center}
.post-summary p{overflow:hidden;top:-40px;font-size:15px}
.readmore{font-size:12px;font-weight:500;display:block;padding:15px 30px;background:#7169fe;text-transform:uppercase;width:50%}
.readmore:hover{background:#555}.readmore,a.readmore{color:#fff}
/* End FeaturedPost */
</style>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'/>

13.- Es momento de guardar los cambios que hemos realizado

14.- Diríjase a "Diseño" abra el gadget Entrada destacada y seleccione la entrada que quiere destacar

Ahora visite su blog y mire la actualización de su nuevo gadget Entrada destacada convertido en un diseño profesional

Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no dude en escribir

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE

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

Si

TAGS: ComoWidgets para Blogger

Share: