Pubblicato il 27/01/13e aggiornato il

Come modificare e centrare il modulo dei commenti.

Come allargare e centrare il modulo dei commenti incorporato sotto al post.
Nella piattaforma Blogger ci sono più modi per configurare l'area dei commenti. Si va su Impostazioni > Post e Commenti > Posizione Commento e si può scegliere tra: Nascondi, Incorporato, Pagina intera e Finestra popup. L'opzione maggiormente selezionata è Incorporato che mostra il modulo dei commenti in calce al contenuto del post e degli altri commenti postati fino a quel momento.

Vediamo come si possa allargare la larghezza del modulo per farla risultare in linea con il layout del nostro blog. Dopo aver salvato il template si va su Modello > Modifica HTML > Procedi e si espandono i modelli widget.
Si troveranno quattro blocchi di codice come questo

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>

con l'altezza di 410 pixel e la larghezza del 100%. Il fatto che la larghezza sia stata settata al 100% non significa che in tutti i blog il modulo prenda effettivamente tutto lo spazio disponibile. Se si vuole modificare l'altezza si può provare a cambiare 410 in tutte e 4 le occorrenze mentre per modificare la larghezza bisogna mettere un valore assoluto al posto di 100% nei quattro blocchi di codice.
Ecco per esempio questo nuovo codice

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='280' id='comment-editor' name='comment-editor' src='' style='display: none' width='800'/>

come muta l'aspetto del modulo dei commenti

modulo-commenti-blogger[4]

Volendo è anche possibile centrare il modulo nel layout. Si va sempre su Modello > Modifica HTML > Procedi e si cerca la riga ]]></b:skin> . Subito sopra si incolla questo codice

.comment-form {
margin:2px auto;
text-align:center;
}
.comments .comment-form {
margin:2px auto;
text-align:center;
}
.comments .comment-replybox-single {
margin:2px auto;
text-align:center;
}
.comments .comment-replybox-thread {
margin:2px auto;
text-align:center;
}

Si salva il template. Il primo blocco di codice riguarda il vecchio codice dei template senza commenti nidificati, il secondo si riferisce al primo commento mentre il terzo e il quarto centrano il modulo della prima e delle successive risposte ai vari commenti

centrare-modulo-commenti







9 commenti :

  1. Perfetto! Ogni giorno imparo qualcosa di nuovo.

    RispondiElimina
  2. Come faccio ad allargare in proporzione anche il riquadro del messaggio del modulo dei commenti?

    RispondiElimina
    Risposte
    1. E visto che ci siamo (ultima domanda, giuro!): come faccio a mettere il riquadro del messaggio sopra il modulo dei commenti? Perchè nel mio blog compare sotto.

      Elimina
    2. @# Quando mi trovo di fronte a domande a cui o non so rispondere oppure mi ci vorrebbe troppo tempo per documentarmi rispondo così "E' cosa complicata..." :D

      Elimina
    3. E non pensavo fosse possibile, ma anche tu sei umano!
      Buono a sapersi! ;)

      Elimina
  3. Ciao! Io ho un problema che ha a che fare con i commenti ma non con il loro "form".Praticamente ho installato un font con google web font( e fin qui tutto bene) che utilizzo per il titolo dei post e l'ho impostato a grandezza 34px. Il titolo è perfetto ma dato che la misura del testo sopra il form dei commenti ha la stessa dimensione del titolo dei post (sempre 34px) le scritte "nessun commento" e "posta un commento" risultano a grandezza esagerata! Come faccio con un css a ridimensionare SOLO le scritte sopra i commenti?
    Grazie
    RigillaMas

    RispondiElimina
    Risposte
    1. Oppure anche modificando il template :) (modello Simple)

      Elimina
    2. @# Non hai incollato l'URL del tuo blog quindi non posso essere preciso. Prova a incollare

      .comments h4 {font-size: 24px !important;}

      subito sopra alla riga

      ]]></b:skin>

      Ovviamente al posto di 24px ci puoi mettere anche un altro valore.

      Elimina
    3. Grazie ho capito e ci sono riuscita! Non ti ho linkato il blog perché è privato, lo sto usando come prova per "sviluppare" il modello :)

      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.