Fijar Entrada Siempre Arriba: Edítalo y Muéstralo solo en Inicio

Te explico cómo fijar una entrada siempre arriba de tus artículos recientes usando la plataforma de Blogger. Además de cómo personalizarlo a tu gusto y que solo se muestre en la página de inicio.

¡Hola! soy Gabriela de peengler.com. Hoy te traigo las entradas destacadas en Blogger, esto es por si quieres tener en tu página principal un artículo de bienvenida, presentación o un mensaje de me fui de vacaciones o de cualquier cosa.

Sin más que decir, ¡Empecemos!

fijar una entrada siempre arriba en blogger

Clic en la imagen para ver el vídeo ↑ en YouTube

¿Cómo hacer para fijar una entrada siempre arriba en Blogger?

Las entradas normalmente se ordenan por fecha y se muestran por la publicación más reciente de tu blog. En pocas palabras, las entradas más recientes son las que se verán de primero.

Pero ¿Se puede fijar una entrada siempre arriba? Claro que sí. En Blogger existe el gadget de la entrada destacada. Este te permite seleccionar un título, fragmento de texto y la imagen del artículo. Además de que también puedes elegir entre mostrar la entrada reciente o una en concreto

Fijar una entrada siempre arriba y Personalizarla

Si no te gusto, como quedo tu artículo destacado en tu blog, aquí te dejo una entrada ya personalizada. Solo debes de copiar y pegar el siguiente código en el widget de FeaturedPost1. Para más información véase el vídeo tutorial.

HTML para fijar una entrada siempre arriba y personalizado

<b:widget cond='data:view.isHomepage' id='FeaturedPost1' locked='false' title='' 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'>3246962233654562552</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:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<b:include name='content'/>

<b:include name='quickedit'/>
</b:includable>
<b:includable id='content'>
<div class='post-summary gold'>
<div class='peengler-bg' expr:style='&quot;background-image: url(\&quot;&quot; + data:postFirstImage + &quot;\&quot;);&quot;'> </div>
<div class='peengler-subcard'>
<div class='peengler-title'>
<b:if cond='data:showPostTitle and data:postTitle != &quot;&quot;'>
<h2><a expr:href='data:postUrl'><data:postTitle/></a></h2>
</b:if>
</div>
<div class='peengler-feats'>
<b:if cond='data:showSnippet and data:postSummary != &quot;&quot;'>
<p>
<data:postSummary/>
</p>
</b:if>
</div>
</div>
</div>
</b:includable>
</b:widget>

Añadir los estilos arriba de la línea </b:skin>

Estilos de la entrada destacada

.post-summary {
  transition: all 600ms ease;
  max-width: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
  height: auto;
  margin-bottom: 25px;
}

@media screen and (max-width: 700px) {
  .post-summary {
    height: auto;
    width: auto;
    flex-direction: column;
    border-radius: 2px;
    margin: 25px 15px;
  }
}

.peengler-bg {
  transition: all 600ms ease;
  border-radius: 2px;
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center;
  background-color: #2b2b95;
}

@media screen and (max-width: 700px) {
  .peengler-bg {
    left: 0;
    top: 0;
    height: 200px;
    width: 100%;
    border-radius: 0;
  }
}

.peengler-subcard {
transition: all 600ms ease;
    border-radius: 3px;
    background: #fff;
    width: 95%;
    margin: 150px auto 0px;
    z-index: 0;
    padding: 15px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.peengler-title {
  font-size: 24px;
  margin-bottom: 4px;
}
.bronze .peengler-title {
  font-size: 18px;
}
@media screen and (max-width: 700px) {
  .peengler-title {
    font-size: 16px;
    white-space: initial;
    overflow: initial;
    text-overflow: initial;
  }
}


.peengler-feats {
    font-size: 14px;
    margin-bottom: 5px;
}
.bronze .peengler-feats {
  display: none;
}
@media screen and (max-width: 700px) {
  .peengler-feats {
    font-size: 12px;
    margin-top: 10px;
    text-align: center;
  }
}

Nota: Puedes modificar el ancho de la card del artículo, es decir, la parte donde sale el título y el texto. Para esto, te ubicas en la siguiente línea .peengler-subcard, en width: 95% lo puedes editar a unos 80% o menos.

¿Cómo hacer que la entrada destacada no se muestre en todas las páginas?

La solución es aplicando la siguiente línea después del <b:widget de tu gadget. Esta es una condición de Blogger para que se muestre el elemento solo en la página principal.


cond='data:view.isHomepage'

3 Ejemplos de mensajes de alertas o avisos para tu blog

Si por alguna razón, no te interesa colocar un artículo fijo en tu blog, aqui te dejo otra opción. Y es colocando mensajes o avisos siempre arriba.

Ejemplo 1: Mensaje con botón negro y fondo de color

HTML

<section class="msj-bienvenida">
<h2>Bienvenido a Peengler</h2>
<p>Aquí encontraras Tutoriales y Recursos para tu Blog, si quieres saber más del sitio.</p>
<a href="TU-ENLACE-AQUI" class="btn-bgstroke">LEER MÁS</a>
</section>

CSS

<style>

.msj-bienvenida{ width: 100%; padding:30px 5px; /*MARGEN DE ARRIBA/ABAJO Y DERECHA/IZQUIERDA*/ text-align: center; background: #3369cc; /*COLOR DE FONDO*/ color: white; margin-bottom: 25px; } .msj-bienvenida h2, .msj-bienvenida p, .msj-bienvenida a { margin: 0; padding: 0; font-family: 'Lato'; } .msj-bienvenida h2 { font-size: 33px; padding: 10px 0; font-weight: 800; } .msj-bienvenida p { font-size: 19px; letter-spacing: 1px; font-family: sans-serif; /*text-align: left;*/ } .msj-bienvenida .btn-bgstroke { font-size: 18px; display: inline-block; padding: 15px 25px; border-radius: 7px; cursor: pointer; font-weight: 300; margin-top: 30px; background: #0a3a92; /*COLOR DE FONDO DEL BOTON*/ box-shadow: 0px 0px 2px #011f56; /*COLOR DE LA SOMBRA DEL BOTON*/ font-family: monospace; } .msj-bienvenida .btn-bgstroke:hover { background-color: #001740; /*COLOR DEL FONDO AL PASAR EL CURSOR DEL BOTON*/ color: #fff; text-decoration: none; }

</style>

Ejemplo 2: Aviso con fondo de imagen y con botón de color o transparente

HTML

<section class="msj-bienvenida">
<h2>Bienvenido a Peengler</h2>
<p>Aquí encontraras Tutoriales y Recursos para tu Blog, si quieres saber más del sitio.</p>
<a href="TU-ENLACE-AQUI" class="btn-bgstroke">LEER MÁS</a>
<div class="overlary-msj-bienvenida"></div>
</section>


CSS

<style>

.msj-bienvenida{ width: 100%; padding:30px 5px; /*MARGEN DE ARRIBA/ABAJO Y DERECHA/IZQUIERDA*/ text-align: center; background: #3369cc; /*COLOR DEL FONDO DE MENSAJE*/ background-image: url(https://static.vecteezy.com/system/resources/previews/000/633/705/non_2x/abstract-gradient-geometric-background-simple-shapes-with-trendy-gradients-vector.jpg); /*IMAGEN DEL FONDO DE MENSAJE*/ color: white; position: relative; background-size: cover; background-position: center; margin-bottom: 25px; } .msj-bienvenida:before{ content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0,0,0,30%); /*COLOR DEL FONDO DEL MENSAJE OVERLAY*/ } .msj-bienvenida h2, .msj-bienvenida p, .msj-bienvenida a { margin: 0; padding: 0; font-family: 'Lato'; z-index: 7; position: relative; } .msj-bienvenida h2 { font-size: 33px; padding: 10px 0; font-weight: 800; text-shadow: 2px 2px 4px #000000; } .msj-bienvenida p { font-size: 19px; letter-spacing: 1px; font-family: sans-serif; text-shadow: 2px 2px 2px #000; } .msj-bienvenida .btn-bgstroke { font-size: 18px; display: inline-block; padding: 15px 25px; border-radius: 7px; cursor: pointer; font-weight: 300; margin-top: 30px; background: #000000; /*COLOR DEL FONDO DEL BOTON*/ box-shadow: 0px 0px 2px #000000; font-family: monospace; } .msj-bienvenida .btn-bgstroke:hover { background-color: white; color: #000!important; text-decoration:none; text-shadow: none; }

</style>

CSS – Botón Transparente

.msj-bienvenida .btn-bgstroke {
    font-size: 18px;
    display: inline-block;
    padding: 15px 25px;
    border-radius: 7px;
    cursor: pointer;
    font-weight: 300;
    margin-top: 30px;
    font-family: monospace;
    border: 1px solid #fff;
    text-shadow: 2px 2px 2px #000;
}

Ejemplo 3: Mensaje sin botón y con imagen de fondo “Me fui de vacaciones”

HTML

<section class="msj-bienvenida">
<h2>¡ESTOY DE VACACIONES!</h2>
<p>Descansaré unos días, nos veremos en Enero :)</p>
<div class="overlary-msj-bienvenida"></div>
</section>


CSS

<style>

.msj-bienvenida{ width: 100%; padding:115px 5px; /*MARGEN DE ARRIBA/ABAJO Y DERECHA/IZQUIERDA*/ text-align: center; background: #3369cc; /*COLOR DEL FONDO DE MENSAJE*/ background-image: url(https://d1csarkz8obe9u.cloudfront.net/posterpreviews/beach-zoom-virtual-background-video-design-template-74f4ce96c2542e2611048abf25c519ed_screen.jpg); /*IMAGEN DEL FONDO DEL MENSAJE*/ color: white; position: relative; background-size: cover; background-position: center; margin-bottom: 25px; } .msj-bienvenida:before{ content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0,0,0,40%); } .msj-bienvenida h2, .msj-bienvenida p, .msj-bienvenida a { margin: 0; padding: 0; font-family: 'Lato'; z-index: 7; position: relative; } .msj-bienvenida h2 { font-size: 33px; padding: 10px 0; font-weight: 800; text-shadow: 2px 2px 4px #000000; } .msj-bienvenida p { font-size: 19px; letter-spacing: 1px; font-family: sans-serif; text-shadow: 2px 2px 2px #000; }

</style>

En conclusión

No es obligatorio fijar una entrada siempre arriba o un aviso, en realidad pienso que depende que es lo que quieres hacer con tu sitio. Personalmente solo colocaría un aviso cuando sea necesario.

Si tienes alguna duda o pregunta, déjamelo en los comentarios.

¿Te gusto el post?
¡Compártelo!

Gabriela Laya

Me gusta el Diseño Web, Crear plantillas para Wordpress y Blogger y todo lo relacionado a estas 2 plataformas de Blogs.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Citu:

Pienso igual que tu sobre la entrada o el aviso. Gracias por el tutorial Te mando un beso y buen fin de semana

Responder
Asunción Artal:

No es algo que vea interesante para mi blog en este momento, pero es bueno conocer que es posible hacerlo. Muchas gracias

Responder
El desvan de vicensi:

Yo no tengo entrada destacada puesta en el blog pero creo que no es una mala opción. Un beso y feliz fin de semana ❤️❤️❤

Responder
Miss Bridgerton:

Hola,
Gracias por la información, muy interesante la entrada.
Besos desde Promesas de Amor, nos leemos.

Responder
Ash Tailor:

¡Hola! Gracias por esta entrada, la verdad que es bastante útil sobre todo si se quiere dejar algo importante arriba siempre.
¡Nos leemos!

XX ASH XX

Responder
Serena Miles:

hola
pues me ha encantado lo bien que lo has explicado, yo voy a probarlo para futuras entradas fijas
Besotessssssssssssssss

Responder
Marigem:

¡Hola!
Qué interesante, siempre aprendo mucho contigo.
Feliz día.

Responder
Miguel Pina:

Estupenda explicación Gabriela.
Yo en mi caso prefiero destacar una publicación en la parte derecha del blog y dejar la parte central con la última entrada publicada. Pero es una opción muy válida.
Un gran saludo.

Responder
Aimee:

Holaa, oye tengo muchos problemas parapoder leer la entrada con lo de chatear con Gabriela en messenger al lado izquierdo e incluso para estarte escribiendo este comentario,

Responder
    Gabriela Laya:

    ¿Problemas de que? se despliega el chat o ¿cómo?

    Responder
Nayade:

Hola ^^
Muchas gracias por tu entrada, siempre es un placer leerte y tomar ideas para implementar en mi blog
Besos ♥

– – El Mundo de Naya – –

Responder