lunedì 25 marzo 2013

Come cambiare il colore del titolo del post in un blog di blogger


Ciao a tutti! 

Eccoci alla sesta puntata per fare un piccolo restyling del blog con host in blogger. 

Con questo breve tutorial vi spiego come cambiare il colore del titolo del post. 


Se andate su Modello > Personalizza >Avanzato >Titolo Post 

questo è quello che trovate: 



Si può scegliere il carattere e la sua grandezza, se deve essere in grassetto o italico, ma è impossibile scegliere e selezionare il colore del titolo del post! :-( 


Ho cercato quindi in rete e questo è quello che mi è piaciuto perchè è una modifica che mi permetterà di cambiare sempre il colore del titolo in modo facile senza dovere andare a cercare codici o altro se dopodomani ho voglia di cambiare tutti i colori di riferimento del mio blog!!!! 



Dopo essere sicuri di aver fatto un back up del blog andate nella sezione Modello e poi cliccate Modifica HTML.



Cercate il seguente codice


   <Group description="Post Title" selector=".post">
     <Variable name="post.title.font" description="Font" type="font"
         default="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 22px Arial, Tahoma"/>
   </Group>

Sostituite il codice sopra con il codice seguente: 

<Group description="Post Title" selector=".post">
<Variable name="post.title.font" description="Font" type="font"
default="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
<Variable name="post.title.color" description="Color" type="color" default="#FE6602" value="#FE6602"/>
<Variable name="post.title.hover.color" description="Hover Color" type="color" default="#FFD25F" value="#FFD25F"/>
</Group>


Ora cercate questo codice: 


.post {
  margin: 0 0 25px 0;
}


e sostituitelo con 


.post {
  margin: 0 0 25px 0;
}

.post h3 a, .post h3 a:visited 
{ color: $(post.title.color); 

}


.post h3 a:hover 
{ color: $(post.title.hover.color); 
}





Bene, avete finito!

Ora se andate su Modello > Personalizza >Avanzato >Titolo Post trovate questo:

Notate la differenza??? 


Alla fine avete ottenuto la possibilità di poter cambiare il colore del titolo del post e potete scegliere anche il colore al passaggio del mouse.

Facile, no?

Stay tuned! :-)

43 commenti:

  1. bel tutorial, ma con il nuovo codice html non riesco a trovarlo! :(
    francesca

    RispondiElimina
    Risposte
    1. Francesca, alla riga 13 trovi una freccetta nera, cliccaci sopra e si aprirà tutto il codice. troverai anche quello del colore del titolo del post!
      ciao!!!

      Elimina
    2. ti ringrazio! ci sono riuscita...
      buona giornata francesca

      Elimina
    3. :-)
      Grazie, anche a te!

      Elimina
  2. Sempr super aggiornata! :)
    Utilissime dritte, ora che devo mettere mano al blog della scuola :)
    grazie

    RispondiElimina
    Risposte
    1. Prego! Se hai bisogno sono qui! Baci :-)

      Elimina
  3. Ciao!Ho provato e funziona ma anche se scelgo un colore diverso, la scritta rimane arancione :)

    RispondiElimina
    Risposte
    1. Roberto, purtroppo se ti viene fuori la possibilità di cambiare i colori e questi non si cambiano non so davvero come aiutarti. a volte proprio blogger non funziona! nell'altro blog che ho non riesco a togliere l'ombra dalle pagine che qui invece ho fatto in 2 sec. semplicemente cliccando trasparente!
      a me comunque il tuo blog piace molto anche così. che colore avevi scelto per ll titolo?

      Elimina
    2. Azz! Grazie mille comunque, per il tutorial e per il blog :) è che fra poco dovrò fare proprio un restyling e cambierò parecchie cose, ma sai come farò con il colore del titolo? userò il tuo procedimento. Basta cambiare i codici dei colori e funziona bene anche senza il designer modelli!

      Elimina
  4. non riesco a trovare il secondo codice.. puoi dirmi a k numero sta?

    RispondiElimina
    Risposte
    1. Brenda dovrebbe essere la 376!

      Elimina
    2. purtroppo alla riga 376 vedo solo questo }

      Elimina
    3. Anonimo: prova a cercare un po' prima o un po' dopo. hai aggiunto altri gadget prima è probabile che non sia nella stessa posizione del mio blog! :-)

      Elimina
  5. Perfetto! Anche se i codici non erano identici al 100% ce l'ho fatta, grazie mille! Una richiesta: se volessi modificare il colore e carattere della data, come dovrei fare?

    RispondiElimina
    Risposte
    1. Ciao!
      il colore della data lo modifichi andando sempre su Modello > Personalizza >Avanzato >Intestazione data e da lì puoi modificare il colore ma anche lo sfondo della data, tipo nero e data bianca.
      per il carattere devi cliccare su gadget, assieme alla data però cambi il carattere anche di tutti gli altri titoli della sidebar.
      spero d'esseri stata utile! ciao!!! :-)

      Elimina
  6. Ciao,
    sto iniziando anche io un blog..ma come hai fatto a mettere nel titolo del blog differenti colori? Nel senso: "Ballando" verde, "con" giallo e "Sofia" verde?

    Grazie mille.

    RispondiElimina
    Risposte
    1. Faber, il mio header l'ho creato con photoshop! credo lo possa fare anche tu con un programma di grafica, crei l'immagine in jpg e poi la inserisci nel titolo - da layout>modifica del titolo-! spero d'esserti stata utile! ciao!!! :-)

      Elimina
  7. Funzionaaaa, grazie!! E' la prima volta che mi spingo a cambiare un codice htlm ma con la tua guida è stato facile facile.
    Grazie!
    Massimo

    RispondiElimina
    Risposte
    1. Ciao Massimo! Felice d'esserti stata utile! Buone feste! :-)))

      Elimina
  8. A me non esce titolo post....

    RispondiElimina
    Risposte
    1. Chiara, che modello usi? io uso simple e c'è!

      Elimina
  9. Ciao, complimenti per questi articoli sono utilissimi!! mi sono anche registrata al tuo blog :)

    Avrei un dubbio da chiederti, mi sa che ho combinato un disastro, poco fa ho modificato il codice del titolo del blog su HTML (per renderlo piu visibile a google etc,) però adesso nella barra sopra l'url mi appaiono dei caratteri e il titolo del sito, non piu il titolo del post:

    http://goldmoustache.blogspot.it/2014/01/sheinside-lovely-fashion-world-wide.html

    sai cosa potrei fare per rimediare? grazie

    RispondiElimina
    Risposte
    1. Deborah,
      mi spiace ma non so aiutarti! non mi è mai capitata una cosa del genere!
      spero tu abbia salvato tutto il blog prima di aver fatto questa modifica, quindi ti consiglio di ripristinare il blog precedente e capire poi cosa hai cambiato!
      in bocca al lupo!
      ciao!!!

      Elimina
  10. Ciao grazie del tutorial! ^_^
    come sei riuscita ad inserire la linea tratteggiata qui di lato?
    Elisa

    RispondiElimina
    Risposte
    1. Ciao Elisa!
      per avere la linea tratteggiata come trovi nel mio blog ora ho aggiunto il seguente CSS

      .column-right-inner{
      width: 210px;
      float: right;
      padding-left: 20px;
      border-left: 1px dashed #C0C0C0;
      }

      Ciao! :-)

      Elimina
  11. oddio GRAZIEEEEEEE!
    ti ho trovata con google, ho fatto tutto, adesso mi guardo il tuo blog, grazie grazie grazie!!!!!!!
    laura alias mamma per caso

    RispondiElimina
    Risposte
    1. Ciao Laura! piacere! bene!!!
      mi lasci il link esatto del tuo blog? :-)

      Elimina
  12. Scrivi dei tutorial fantastici!!! Complimenti!!! Sto provando ad aprire un blog e ti ho trovata per caso su google, sei fantastica!! le tue istruzioni mi sono utilissime e mi stanno appassionando ad imparare a personalizzarlo. GRAZIE!!
    Non sono riuscita a renedere attiva la modifica per cambiare il colore dei titoli del post :-((( cioè ho sostituito le parti di codice come da te indicato, ma non cambia nulla poi nell'avanzato nella modifica del titolo del post non mi propone la possibilità di cambiare il colore. Però tutto il resto delle tue istruzioni sono formidabili. aspetto nuovi tutorial.
    BRAVA!
    Francesca

    RispondiElimina
  13. Ah no scusaaaaaa!!! Funziona tutto!!! Avevo erroneamente guardato in titolo del blog e non del post :-SS
    GRAZIE MILLE!!!

    RispondiElimina
    Risposte
    1. Ciao Francesca! Sono contenta d'esserti stata utile!!!
      Continua a seguirmi che sto preparando altri tutorial… se solo le giornate si allungassero!!!! ;-))

      Elimina
  14. Molto utile la tua guida, davvero!
    L'unico problema sta nel fatto che, dopo essere apparso il menù dei colori, il tipo di carattere non si riesce più a modificare. Ho provato a ripristinare le impostazioni originarie, ma nessun risultato.

    RispondiElimina
    Risposte
    1. Molto strano! per scrupolo ho ricontrollato da me e riesco a modificare il tipo di carattere senza problemi! a volte però, in passato, c'erano dei giorni in cui era impossibile modificare il carattere perché blogspot era bloccato! riprova domani! ciao!

      Elimina
  15. Grazie mille! ^^ il codice mi appariva diverso ma sono comunque riuscita a modificarlo

    RispondiElimina
  16. Grazie, tutorial utile e facilmente comprensibile: non si potrebbe desiderare di più. Complimenti. Marco

    RispondiElimina
  17. Marco, che pubblica su http://ilcuccia.blogspot.it ;-)

    RispondiElimina

Il tuo commento è prezioso per me, grazie per aver trovato il tempo per fermarti e condividere il tuo pensiero!

*** Ai post un po' datati ho applicato la moderazione altrimenti, con la testa che mi ritrovo, i commenti rimarrebbero nel limbo!***




LinkWithin

Related Posts with Thumbnails