Pubblicato il 15/02/12e aggiornato il

Come personalizzare le citazioni o blockquote in Blogger.

Nei nuovi modelli di Blogger è stato eliminato il CSS che determinava l'aspetto della citazione questo a discapito di una personalizzazione della stessa. Nell'Editor di Blogger però esiste sempre il bottone per creare la citazione o blockquote. Per utilizzarlo bisogna selezionare il testo da mettere come citazione quindi cliccare sulla stessa icona a forma di virgolette.

Si creerà automaticamente un codice con la struttura <blockquote>Testo della citazione</blockquote> che potrà essere visto andando in Modalità HTML

citazione-blockquote 

Il testo sottoposto a citazione sarà visualizzato nell'articolo semplicemente con un maggiore rientro a destra e a sinistra oltre a essere più distanziato dal resto del layout nella parte alta e bassa

citazione-blockquote-aspetto

Vediamo come personalizzare il codice in modo tale da avere delle citazioni più originali. Si va su Modello > Modifica HTML > Procedi e si cerca la riga

]]></b:skin>

Bisogna fare attenzione perché spesso Blogger aggiunge a questa riga anche la parentesi graffa di chiusura del CSS precedente, in questo caso va inserito il cursore dopo tale parentesi e poi premere Invio per procedere alla separazione dal resto della riga

modello-blogger

Subito sopra a tale riga va incollato un codice di questo tipo

blockquote {
  margin: 15px 25px 15px 25px;
  padding: 8px;
  line-height: 1.4em;
  color: #191919
  font-style:italic;
  font-size: 95%; 
  background: #eeffff;
  border: 1px solid #008250;
}

in modo da avere delle citazioni con questo aspetto

citazione-personalizzata

Ovviamente si possono personalizzare i parametri e si possono eliminare delle linee che non interessano. Ricordo che

  1. margin: 15px 25px 15px 25px; rappresentano le distanze della citazione dalla parte alta (15px) e poi a seguire nelle altre tre direzioni in senso orario
  2. padding: 8px; è la distanza interna tra il testo e il bordo del rettangolo della citazione
  3. line-height: 1.4em; è l'altezza della riga del testo in funzione della dimensioni del carattere di default
  4. color: #191919; è il colore del testo della citazione
  5. font-style:italic; se si vuole la citazione in corsivo
  6. font-size: 95%; è la dimensione dei caratteri della citazione rispetto a quella di default
  7. background: #eeffff; è lo sfondo del rettangolo della citazione
  8. border: 1px solid #008250; è lo stile del bordo della citazione.

Nel caso si addotti una personalizzazione per il blockquote in presenza della nuova funzione dei commenti nidificati, anche questi ultimi prenderanno lo stesso aspetto della citazione, è quindi un codice che si può usare anche per quello scopo.





13 commenti :

  1. Buonasera Ernesto,
    grazie per il consiglio precedente, ho da chiederti un'altra cortesia.
    Se puoi guardare sul mio blog: www.iconadeironchi.com, le punte delle lettere che compongono i nomi delle mie pagine (in particolare la g), sono tagliate. io vorrei mantenere la stessa grandezza di testo, senza diminuirla, ma come posso modificare il gadget delle pagine in modo tale che ci sia più spazio tra esso e quello dei miei post?
    grazie in anticipo

    RispondiElimina
  2. @GAIA VINCENZI
    Salva il modello e cerca la riga ]]>
    quindi subito sopra prova a incollare questo codice

    #PageList1 {margin-bottom:10px;}

    oppure

    #PageList1 {margin-bottom:10px !important;}

    Il valore (10px) poi lo puoi settare successivamente.
    P.S. Non so se funzionerà :)

    RispondiElimina
  3. Mi sono dimenticato che i commenti non prendono il codice :(
    La riga da cercare è questa
    ]]></b:skin>
    mentre il codice da incollare è quello del precedente commento.

    RispondiElimina
  4. help
    ho danneggiato il widget del numero post pubblicati e relativi commenti
    e non so dove cercarlo sul tuo blog o meglio è una lotta dura con le parole
    che digito per la ricerca

    orbene se ricordi dove l'hai pubblicato mi fai un favore
    ciao e grazie

    RispondiElimina
  5. grazie mille Ernesto per la cortesia, ma non funziona, o meglio, aumenta lo spazio tra il modulo dei post ed il widget delle pagine, ma le scritte comunque rimangono tagliate. Il problema si risolve solo rimpicciolendo il font del carattere del titolo delle pagine, ma per mostrarlo intero con questo tipo di carattere, verrebbe molto piccolo.
    Non c'è qualche modo per ingrandire il gadget delle pagine nella sua altezza?
    grazie come sempre

    RispondiElimina
  6. @GAIA VINCENZI
    Prova con
    #PageList1 {padding:4px !important;}
    da inserire con la stessa modalità


    @Tex Willer
    Spero sia questo
    http://www.ideepercomputeredinternet.com/2010/09/come-mostrare-il-numero-di-articoli-e.html
    o quest'altro
    http://www.ideepercomputeredinternet.com/2011/01/come-mostrare-l-e-la-data-corrente-nel.html

    RispondiElimina
  7. Ciao, ti vorrei chiedere un cosa, in questa pagina psx-scene.com/forums/content/call-duty-black-ops-custom-patch-113-all-dlc-2424 ho levato http, ha un blockquote dove a sinistra a un triangolo che punta sempre verso sinistra che fa così sembrare il blockquote una specie di nuvoletta, come lo potrei inserire nel blockquote del mio blog ???

    RispondiElimina
    Risposte
    1. @Manager
      Prova con questo
      http://www.ideepercomputeredinternet.com/2012/04/come-personalizzare-le-citazioni-nei.html

      Elimina
    2. si ci ho provato ma diciamo che il triangolo mi compare dentro il rettangolo del blockquote accanto alla prima parola del blockquote. Invece io lo vorrei sul filo del bordo come quello del sito da me linkato, si può fare?

      Elimina
    3. @Manager
      Prova a mettere dei margin top negativi tipo
      .post-body blockquote:before {
      content: "\201C";
      margin-top:-20px;

      Elimina
    4. Per fare le tabelle, per inserire i vari codici utilizzi tu questo metodo inserendo il codice dentro la citazione o all'interno di qualche tabella?

      Elimina
    5. @# Non ci sono tabelle. Il riquadro è dato dalla larghezza e dalla altezza oltre che dai vari margini e padding

      Elimina

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.