Pubblicato il 08/01/11 - aggiornato il  | 41 commenti :

Come inserire una linea orizzontale sotto il titolo del post in Blogger.

Nella grafica dei quotidiani è molto comune vedere una linea orizzontale che divide il titolo dal corpo dell'articolo. Si può fare la stessa cosa anche nei blog su Blogger, ma anche su altre piattaforme, se non si ha un modello che già non la preveda. E' noto che il codice che indica una linea orizzontale è

<hr>

ma, se si incollasse così com'è nel modello, potrebbe non essere salvato. Occorre quindi convertirlo in linguaggio XML e allora diventa

&lt;hr&gt;

Andiamo su Design > Modifica HTML e espandiamo i modelli widget. Cerchiamo questa riga

<div class='post-header'> oppure quest'altra  <div class='post-header-line-1'/>

e incolliamo &lt;hr&gt; subito al di sopra. Salviamo il modello e vediamo la differenza tra prima e dopo

linea-orizzontale

 

Si può anche inserire una linea personalizzata nel colore, nelle dimensioni e nell'aspetto. Un eventuale codice potrebbe essere questo

<hr width="100%" size="1" color="#003366">

dove si può personalizzare la larghezza in percentuale, il colore mediante  il codice HEX e la dimensione inserendo numeri da 1 a 5. Dopo che si è creato il codice, è opportuno convertirlo in XML mediante lo strumento Blogcrowds e incollarlo nel template nella posizione indicata sopra. Per la conversione, si incolla il codice nel modulo, si clicca su Parse e si copia il tutto. Ecco un esempio di codice di una linea convertito in XML

&lt;hr size=&quot;2&quot; color=&quot;#003366&quot;&gt;

Credo che questa personalizzazione incontrerà il favore di molte persone, anche con modelli nuovi. E' anche possibile inserire icone con commenti dopo il titolo e immagini tra un post e l'altro.

Aggiornamento: La riga può anche essere centrata. Nel caso si scelga il 100% della larghezza lo sarà automaticamente, ma se si vuole una linea più corta ecco il codice

<hr  align="center" width="50%" size="1" color="#003366">

Si può anche avere tutta spostata sulla sinistra o sulla destra. Basta sostituire center con left o right. E' superfluo aggiungere che è sempre opportuna la conversione in XML anche se in alcuni modelli potrebbe risultare superflua visto che è Blogger stesso che a volte la applica.




41 commenti :

  1. queste cosettine mi piacciono molto... io vorrei ripassare a blogger (da artisteer) sai come mettere un'icona accanto al titolo dei post? E mi ricordi il link di come aumentare la larghezza del blog? Devo vedere se riesco a creare un blog simile a quello che ho con il design modelli. Merci

    RispondiElimina
  2. @Soffia di Dea
    Per l'icona accanto al titolo adesso non mi viene niente in mente, ci penserò. Per modificare la larghezza ecco il post di riferimento
    http://www.ideepercomputeredinternet.com/2009/08/come-aumentare-la-larghezza-delle.html

    RispondiElimina
  3. Grazie! Questa è un'altra di quelle cose che cercavo di capire come fare. Dal momento che vorrei mettere una riga più corta del titolo, e i titoli sono già centrati, volevo chiederti: con questo sistema anche la riga è già centrata? O bisogna fare qualche altra modifica?
    Grazie tante per i tuoi suggerimenti, sempre utili.

    RispondiElimina
  4. @Monica D.
    Non si può postare il codice nei commenti quindi ti ho risposto con un aggiornamento del post

    RispondiElimina
  5. Ernesto da dove prendo l'url del feed dei tuoi commenti? Perché io ce l'ho per il mio blog (l'ho messo in alto nella barra di explorer) e lo trovo comodissimo. Lo aggiorno e mi dà tutti i nuovi commenti. Lo vorrei pure del tuo blog perché a volte me li perdo :) grazie

    RispondiElimina
  6. @Soffio di Dea
    L'URL degli ultimi 25 commenti è questo
    http://www.ideepercomputeredinternet.com/feeds/comments/default

    Per ricavarlo basta aggiungere
    /feeds/comments/default
    all'indirizzo del blog.
    Anch'io ce l'ho nel browser.
    Ciao

    RispondiElimina
  7. Ciao Parsifal, è possibile configurare il titolo dei post in modo che vengano fuori sottolineati?

    RispondiElimina
  8. @Webmaster
    Ti ho risposto in questo post
    http://www.ideepercomputeredinternet.com/2011/01/come-sottolineare-i-titoli-dei-post-in.html

    RispondiElimina
  9. Vorrei chiederti come si può inserire una linea orizzontale sotto il titolo del blog e modificarne lo spessore. So che tu hai la risposta...
    Grazie.

    RispondiElimina
  10. @Graziano
    Leggi l'articolo e segui la procedura indicata. Per aumentare lo spessore della linea metti size="2" o size="3"

    RispondiElimina
  11. Quello di cui parla l'articolo l'ho fatto, ti chiedevo se si può fare la stessa cosa per il titolo del blog e non solo per quello del post. Grazie.

    RispondiElimina
  12. @Graziano
    Il titolo del blog lo puoi sostituire con una immagine e quindi puoi sbizzarrirti come ti pare

    RispondiElimina
  13. è possibile mettere un'immagine-linea sotto i titoli dei widget? Seguendo i tuoi passi l'ho messa sotto il titolo del post... ora vorrei fare lo stesso per i widgets. Grazie.

    RispondiElimina
  14. vabbè nn preoccuparti, ho risolto mettendo una linea semplice con modelli di blogger. Kiss

    RispondiElimina
  15. http://juvestabianotizie.blogspot.com

    perchè al termine viene fuori istall widget? come faccio ad eliminarlo? grazie sei un grande

    RispondiElimina
  16. @nando
    Nella linea non viene fuori nessun Install Widget. Questo link è presente in alcuni gadget tipo quello degli Ultimi articoli, Top Commentatori, ecc.
    Leggiti questo post
    http://www.ideepercomputeredinternet.com/2011/06/linee-guida-su-come-usare-questo-blog.html
    specie per quello che riguarda i credit nei widget. Ciao

    RispondiElimina
  17. Ciao Parsifal,
    Quello che vorrei chiederti è se hai una soluzione per creare un titolo su due righe. Mi spiego meglio: Da WLW, ma credo anche da blogger, il titolo del post non permette di essere scritto su due righe sovrapposte, cioè andando "a capo" e se inserisco un sottotitolo ovviamente questo si posizionerà sotto l'elemento adsense che ho nel mio template. A me servirebbe questa possibilità solo per alcuni post, non tutti, quelli cioè dove la lunghezza del titolo è maggiore e di default blogger mi crea una sillabazione finale che non posso regolare. Riusciresti a trovare un escamotage? Spero di essere stato chiaro :)

    Ciao e grazie

    RispondiElimina
  18. @Auto ...
    Sì ho capito. Bisognerebbe provare a modificare il CSS post H3 { ...
    che è quello che determina lo stile del titolo. Non mi sembra una cosa da poco.

    RispondiElimina
  19. Si infatti, per il momento ho sfruttato la totale larghezza del post e tuttosommato è la strada più semplice. Con questa modifica però (come sempre) mi ritrovo a sbattare su altri problemi :)

    La benedetta nuvoletta con il numero dei commenti che tra poco la faccio volare in cielo se non si dispone come dico io (LOL)... aggiusti su IE, e fai danni su FF, aggiusti FF e Chrome fa i cavoli suoi, aggiusti Crome e stai punto e accapo con IE eheheh...

    Cmq, approfitto della tua enorme disponibilità per chiederti qualcosina al volo (scusa se sbaglio post):

    1)Potresti scrivere un post sui TAG condizionali rispetto al browser utilizzato e l'integrazione di essi nel CSS? (sto avendo problemi con i margini e in rete ciò che ho trovato non ha funzionato)
    2) Sapresti percaso se esistono delle stringhe condizionali per blogger(del tipo solo in homepage/solo nel post) che facciano visualizzare un elemento (nel mio caso la cara nuvoletta dei commenti) in base alla possibilità di commentare (oppure non commentare) un post?
    3) Conosci la sintassi per un collegamento interno che linki il post più recente? (del tipo > sito.blogspot.com/postrecente...)
    4) hai 50000 euro da prestarmi?

    Un saluto e sempre TKS ;)

    RispondiElimina
  20. :)
    ok, secondo punto superato...

    b:if cond='data:post.allowComments' bla...bla...

    RispondiElimina
  21. @auto ...
    Per il punto 4) mi sa che devi rivolgerti altrove ;)
    Ti posso aiutare solo per punto 2). Su Windows Live Writer c'è una opzione per linkare automaticamente l'ultimo post. Per inserire una tale cosa nel modello però la vedo difficile

    RispondiElimina
  22. niente parsifal, non lo trovo. Io utilizzo WLW per xp.
    Non dovrei inserire il collegamento nel modello ma in un widget...

    RispondiElimina
  23. @Auto ..
    C'è nella versione nuova di WLW. Le API di Blogger non so se prevedono una cosa del genere. Conosco solo data:post.url
    per inserire un link al post :(

    RispondiElimina
  24. Ciao Parsifal,
    volevo chiederti se è possibile invece inserire una linea divisoria sopra il titolo del post (anzichè sotto) e alla fine del post. Grazie.

    RispondiElimina
  25. @Dieta e Dintorni
    Per mettere una riga sopra il titolo del post
    trova un codice simile a questo
    <h1><data:post.title/></h1>
    e incolla il codice della riga subito sopra
    Per mettere la riga alla fine del post mettila invece dopo la riga
    <data:post.body/>
    o prima della riga
    <div class='post-footer'>

    P.S Quando supererari 60 nel widget dei Top Commentatori toglierò il tuo nome, come ho già fatto con altri, spero che non ti arrabbierai come invece è accaduto con altri commentatori assidui ;)

    RispondiElimina
  26. Assolutamente no, lo scopo dei miei commenti non è quello di finire tra i Top Commentatori! Quindi, nessun problema :) E poi, mi hai aiutato così tanto che non potrei mai arrabbiarmi con te, nemmeno se tu mi ficcassi due dita negli occhi e mi strappassi i peli del naso (per farti capire il livello di devozione e stima che ho nei tuoi confronti).
    Per quanto riguarda la riga sopra e sotto il post, ho capito come fare per inserirla,
    però in realtà mi interesserebbe che comparisse sopra e sotto a tutto quello che un post include, e cioè: in alto, sopra alla data, e in basso sotto all'area commenti.
    Sai dirmi che stringhe devo cercare?
    Grazie mille :)

    RispondiElimina
  27. Ok, sono già riuscita a trovare le stringhe da sola e ho inserito la linea sopra alla data del post; c'è modo di distanziarla un pochino di più? Risulta un po' troppo attaccata alla data.

    RispondiElimina
  28. Come non detto, sono già riuscita a farlo da sola, ho inserito una stringa con l'indicazione dei margini subito sopra il codice della linea.
    Ernesto, si vede che a forza di romperti le scatole qualcosina in zucca mi è entrato ;)
    Un saluto,
    Giuliana

    RispondiElimina
  29. Ciao (: è possibile inserire una linea orizzontale sotto il titolo di ogno gadget?
    Grazie

    RispondiElimina
    Risposte
    1. @# In teoria non dovrebbe una cosa difficile ma non si può farci un tutorial perché dipende dai modelli. Per ogni gadget dovresti trovare l'ID con Firebug

      e poi nel modello prima della riga con /b:skin incollare un codice come questo
      #HTMLX h2 { border-bottom: 1px solid #000000;}
      dove al posto di X metti gli ID dei widget e dove puoi personalizzare il colore, la dimensione e lo stile del bordo

      Elimina
  30. Salve! E' possibile che la cosa possa non funzionare su alcuni modelli? (funziona su un blog di prova ma non sul mio)

    RispondiElimina
    Risposte
    1. @# Certo che è possibile :)
      Tutte le personalizzazioni sono sempre sotto la spada di Damocle del template che si è adottato :)

      Elimina
    2. Il template è lo stesso, credo di averci piazzato qualcosa con CSS che incasina l' operazione. E ora vattelappesca.... Grazie mille per i consigli....il tuo mezzo busto in oro è in lavorazione ;)

      Elimina
    3. Ciao Ernest volevo chiederti un' altra cosa. Sono finalmente riuscita ad aggiungere la linea con CSS
      Il codice che ho utilizzato è:
      .post h3{
      border-bottom: 1px ridge black; important;
      padding-bottom: 10px;
      }
      In questo modo però la linea occupa il 100% della larghezza dedicata ai post. Io vorrei una linea più corta. C'è modo di ottenere questo risultato utilizzando il CSS? Grazie!

      Elimina
    4. La parte finale important; la puoi togliere perché non serve a nulla. Riguardo alla domanda non ti so rispondere ma può darsi che un mezzo per farlo ci sia. Non sono onnisciente :)
      @#

      Elimina
    5. Mi vuoi sfatare un mito?! Comunque grazie mille, indagherò :)

      Elimina
  31. Sarebbe interessante sapere se una linea orizzontale si potrebbe inserire anche in homepage per separare l'header dal menù pagine...

    RispondiElimina
    Risposte
    1. Certamente si può fare. Il codice del post va incollato sotto la riga < /header > dove ho lasciato gli spazi dopo è prima dei segni di maggiore è minore per salvare il commento
      @#

      Elimina
  32. Sarebbe interessante sapere se una linea orizzontale si potrebbe inserire anche in homepage per separare l'header dal menù pagine...

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy