Come mostrare in modo diverso il primo post del blog.

Come personalizzare l'aspetto del primo articolo nella homepage di un blog su piattaforma Blogger.

Il primo post che si visualizza nella homepage di un blog in realtà è l'ultimo che si è pubblicato, questo in linea di massima perché si potrebbe sempre pubblicare con una data retroattiva. In alcuni siti si può sentire l'esigenza di evidenziare in qualche modo il primo post della Home o se volete l'ultimo post che si è pubblicato. Per questa operazione si utilizzano i tag condizionali segnatamente quello che impone dei vincoli solo al primo articolo di una pagina  e che è <b:if cond='data:post.isFirstPost'>.

La soluzione che vado a presentare può essere considerata come uno spunto, si presta a molte personalizzazioni e soprattutto a molte aggiunte per quanto riguarda i fogli di stile. Dopo aver salvato il template andate su Modello > Modifica HTML > Procedi e espandete i modelli widget.

Cercate la riga

<b:include data='post' name='post'/>

selezionatela, cancellatela e sostituitela con quest'altro codice

<b:if cond='data:post.isFirstPost'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div id='first'>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<div class='first-body'>
<p><data:post.body/></p>
</div>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>
</div>
</b:if>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>
<span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'><tr>
<td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
<span class='reactions-label'>
<data:top.reactionsLabel/></span>&#160;</td>
<td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
</tr></table>
</b:if>
</span>
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</b:if>
</span>
<span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_i3mmSP5R_TRPSeBCM6nqbfPbV9nzBs9IHlfBe69TVwr8TKHQ5LwwDlynbVJT8s1ZWgu9wUkE-2r97hPFHTAE1pI2iO-JWwRSFvVH7ObxfMg9WtNNDYILy2EnVcrFJm9_NKLt7PFvXE9e/s18/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>
</span>
</div>
<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</span>
</div>
</div>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Cercate quindi la riga ]]></b:skin> e, subito sopra, incollate questo codice da personalizzare

/* Stile del primo articolo
----------------------------------------------- */
#first { /* Stile contenitore del primo articolo */
margin: 0px 0px 10px 0px;
padding: 0px;
float: left;
background: #FFEEEE;
border: 1px solid #003366;
}
.first-body { /* Stile del testo del primo post */
margin: 0px;
padding: 10px 10px;
line-height:1.5em;
text-align: justify;
color: #191919;
}
#first h3 { /* Stile del titolo del primo post */
display:block;
margin: 10px auto;
width: 95%;
font-size: 20px;
padding: 0px 0px 4px 0px;
font-family: 'Calligraffitti';
font-weight: bold;
text-align:center;
line-height: 1.4em;
color: #191919;
}
#first h3 a, #first h3 a:visited { /* Colore del titolo */
color: #191919;
}
#first h3 a:hover { /* Colore del titolo al passaggio del mouse */
color: #000;
}
.first-body img { /* Stile delle immagini */
padding:4px;
background:#FFEEEE;
border: 0px;
}
#first .comment-link { /*Stile del link per i commenti */
float:left;
padding: 0px 5px 15px 0px;
}

I parametri più importanti sono stati colorati di rosso mentre in verde sono stati indicati gli elementi su cui agiscono i vari CSS. Volendo si possono anche aggiungere altri fogli di stile

Quando verrà pubblicato un nuovo articolo sarà questo a essere visto in modo diverso dagli altri presenti nella Homepage. Se poi si apre il post cliccando sopra al suo titolo, il suo aspetto sarà ovviamente identico a quello di tutti gli altri.

Fonte | Ciudad Blogger -