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
<hr>
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 <hr> subito al di sopra. Salviamo il modello e vediamo la differenza tra prima e dopo
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
<hr size="2" color="#003366">
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.
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@Soffia di Dea
RispondiEliminaPer 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
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?
RispondiEliminaGrazie tante per i tuoi suggerimenti, sempre utili.
@Monica D.
RispondiEliminaNon si può postare il codice nei commenti quindi ti ho risposto con un aggiornamento del post
grazie Ernesto
RispondiEliminaErnesto 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@Soffio di Dea
RispondiEliminaL'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
Ciao Parsifal, è possibile configurare il titolo dei post in modo che vengano fuori sottolineati?
RispondiElimina@Webmaster
RispondiEliminaTi ho risposto in questo post
http://www.ideepercomputeredinternet.com/2011/01/come-sottolineare-i-titoli-dei-post-in.html
Vorrei chiederti come si può inserire una linea orizzontale sotto il titolo del blog e modificarne lo spessore. So che tu hai la risposta...
RispondiEliminaGrazie.
@Graziano
RispondiEliminaLeggi l'articolo e segui la procedura indicata. Per aumentare lo spessore della linea metti size="2" o size="3"
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@Graziano
RispondiEliminaIl titolo del blog lo puoi sostituire con una immagine e quindi puoi sbizzarrirti come ti pare
è 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.
RispondiEliminavabbè nn preoccuparti, ho risolto mettendo una linea semplice con modelli di blogger. Kiss
RispondiElimina@Soffio di Dea
RispondiEliminaOK
http://juvestabianotizie.blogspot.com
RispondiEliminaperchè al termine viene fuori istall widget? come faccio ad eliminarlo? grazie sei un grande
@nando
RispondiEliminaNella 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
Ciao Parsifal,
RispondiEliminaQuello 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
@Auto ...
RispondiEliminaSì 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.
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 :)
RispondiEliminaLa 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 ;)
:)
RispondiEliminaok, secondo punto superato...
b:if cond='data:post.allowComments' bla...bla...
@auto ...
RispondiEliminaPer 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
niente parsifal, non lo trovo. Io utilizzo WLW per xp.
RispondiEliminaNon dovrei inserire il collegamento nel modello ma in un widget...
@Auto ..
RispondiEliminaC'è 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 :(
Ciao Parsifal,
RispondiEliminavolevo chiederti se è possibile invece inserire una linea divisoria sopra il titolo del post (anzichè sotto) e alla fine del post. Grazie.
@Dieta e Dintorni
RispondiEliminaPer 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 ;)
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).
RispondiEliminaPer 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 :)
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.
RispondiEliminaCome non detto, sono già riuscita a farlo da sola, ho inserito una stringa con l'indicazione dei margini subito sopra il codice della linea.
RispondiEliminaErnesto, si vede che a forza di romperti le scatole qualcosina in zucca mi è entrato ;)
Un saluto,
Giuliana
Ciao (: è possibile inserire una linea orizzontale sotto il titolo di ogno gadget?
RispondiEliminaGrazie
@# 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
Eliminae 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
Salve! E' possibile che la cosa possa non funzionare su alcuni modelli? (funziona su un blog di prova ma non sul mio)
RispondiElimina@# Certo che è possibile :)
EliminaTutte le personalizzazioni sono sempre sotto la spada di Damocle del template che si è adottato :)
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 ;)
EliminaCiao Ernest volevo chiederti un' altra cosa. Sono finalmente riuscita ad aggiungere la linea con CSS
EliminaIl 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!
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@#
Mi vuoi sfatare un mito?! Comunque grazie mille, indagherò :)
EliminaSarebbe interessante sapere se una linea orizzontale si potrebbe inserire anche in homepage per separare l'header dal menù pagine...
RispondiEliminaCertamente 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@#
Sarebbe interessante sapere se una linea orizzontale si potrebbe inserire anche in homepage per separare l'header dal menù pagine...
RispondiElimina