Pubblicato il 28/03/13e aggiornato il

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://lh4.googleusercontent.com/-TV7Vq-SVtIc/UVQSXN6bjQI/AAAAAAAAg_0/Z6sc06XnE7Q/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 -




20 commenti :

  1. Interessante!!grazie ai tuoi consigli sto imparando tante cose per far bello i miei blog :)

    RispondiElimina
  2. Ciao ernesto, c'è la possibilità di spostare, solo per il primo post, l'immagine dell'articolo centrale e di dimensioni grandi?

    RispondiElimina
    Risposte
    1. @# Per ingrandire le immagini puoi modificare il codice in questo modo
      .first-body img { /* Stile delle immagini */
      width:450px !important;
      height:300px !mportant;

      oppure
      .first-body img { /* Stile delle immagini */
      width:120% !important;
      height:120% !mportant;

      invece per spostarle non so a cosa ti riferisca. In linea di massima si può usare float:left; per metterle a sinistra o float;right; per metterle sulla destra

      Elimina
  3. ciao Ernesto! Esiste un modo per mostrare solo un determinato post nella home che non sia l'ultimo pubblicato? e c'è modo di togliere i post espandibili in modo tale che questo determinato post appaia all'apertura del blog con visualizzazione completa e non come post estensibile stile "leggi tutto"..??
    Grazie mille per tutti i tuoi articoli!

    RispondiElimina
    Risposte
    1. @# Per tenere sempre in pole position, se mi si passa il termine, un determinato articolo si può usare lo strattagemma di ripubblicarlo periodicamente con la data modificata in modo che rimanga sempre l'ultimo pubblicato. Alternativamente si può utilizzare un gadget HTML/Javascript come mostrato in questo post
      http://www.ideepercomputeredinternet.com/2009/11/come-inserire-un-articolo-di.html

      Elimina
  4. Ciao, ho un problema: inserendo il codice, in home page il post si vede diverso rispetto agli altri, ma con Chroome non funziona mentre con Explorer sì. Cosa posso fare? Grazie!

    RispondiElimina
    Risposte
    1. Onestamente non saprei che dirti. Prova a rendere compatibile il tuo sito con tutti i browser
      http://www.ideepercomputeredinternet.com/2013/07/blogger-internet-explorer-compatible.html
      In genere lo si fa per IE ma potrebbe funzionare anche con Chrome
      @#

      Elimina
    2. Il problema ce l'ho solo utilizzando chrome da un pc, usando altri browser da altri pc mi dicono che funzioni... Grazie!

      Elimina
  5. Ciao Ernesto, commento questo post perché leggendolo mi è venuta in mente una personalizzazione che non so come attuare... Ti spiego: sul mio blog (www.laragazzadaicapellirossi.com) ho inserito una slideshow visibile solo in home page; si trova in alto, subito sotto header e menù. Vorrei che, nella pagina dei singoli post, la prima immagine dell'articolo venga visualizzata nella stessa sezione occupata in homepage dalla slideshow (quindi più grande, posizionata in alto e centrata), un po' come funzionano le immagini in evidenza di wordpress... Credi che ci sia qualche speranza? Grazie mille!

    Federica

    RispondiElimina
    Risposte
    1. Manualmente si possono fare un sacco di cose ma credo che tu pensi a una cosa automatica. Credo che la cosa sia molto difficile. Non mi viene in mente nulla di utile in tal senso.
      P.S Purtroppo vado un po' di fretta ma la prossima volta che passo dal tuo blog mi riprometto di leggere che cosa hai scritto sul look degli Ape Escape :)
      @#

      Elimina
    2. sicuramente automatica sarebbe meglio ma mi starebbe bene anche una cosa manuale da fare ad ogni nuova pubblicazione, farò delle prove, se ti dovesse venire in mente qualcosa ogni consiglio è bene accetto! quando vuoi sul mio blog sei sempre il benvenuto, grazie mille per tutto! :) :) :)

      Federica

      Elimina
  6. ciao Ernesto è possibile nascondere il piè di pagina post in questa personalizzazione? grazie

    RispondiElimina
    Risposte
    1. Se ti ricordi il post in cui ho parlato di come nascondere il footer basta applicare il corretto Tag condizionale. In questo caso bisogna nasconderlo nella homepage, se ho capito bene la tua domanda
      @#

      Elimina
    2. lo avevo fatto prima di fare questa personalizzazione evidentemente ora lo devo rifare! grazie

      Elimina
  7. ok apposto sistemato il problema del piè pagina ora ne approfitto per chiederti altre due cose:
    è possibile evidenziare il post ancora maggiormente che so mettendo un logo con scritto :ultimo post oppure in evidenza ecc..? grazie e buona domenica !

    RispondiElimina
    Risposte
    1. Se conosci un po' di HTML e di CSS puoi provare a inserire una immagine di sfondo con la scritta che credi più opportuna per esempio nello Stile contenitore del primo articolo
      @#

      Elimina
  8. Questo commento è stato eliminato dall'autore.

    RispondiElimina
    Risposte
    1. Ti ho già risposto nel commento 8.a però non è cosa immediata
      @#

      Elimina
  9. scusa , con chrome il commento non mi risultava, grazie!!!

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.