Test per blogger

Per avere una casella di ricerca posizionata direttamente all'interno di un menu orizzontale di un blog di Blogger, come visibile in Test per Blogger, è possibile integrare una casella di ricerca personalizzata Google dentro al codice del gadget "Pagine" (o "Elenco di Link") di Blogger.
Per inserire la casella di ricerca Google nel menu orizzontale di Blogger bisogna prelevare dal codice del modulo che si ottiene alla fine della procedura per avere una casella di ricerca personalizzata lo specifico codice ID 
E' necessario poi utilizzare il codice ID della casella personalizzata del proprio blog di Blogger (da mettere al posto di xxxxxxxxxxxxxxxxxxxxx:xxx_xxxxx_x) per completare la seguente sezione "Search":

<div class='cse' style='color:#000000;float:right;margin:6px 10px 0 0 ;'>
<form action='http://www.google.com/cse' id='cse-search-box'>
<input name='cx' type='hidden' value=' xxxxxxxxxxxxxxxxxxxxx:xxx_xxxxx_x '/>
<input type='text' name='q' size='35' />
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input type="submit" name="sa" value="Search" />
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en"></script>
</div>

A questo punto bisogna aggiungere il nuovo modulo di ricerca nel blog con una modifica HTML al template del blog di Blogger  direttamente all'interno del codice del gadget "Pagine", utilizzato per il menu di Blogger, nella posizione visibile in basso:
( per trovare con facilità la sezione del template di Blogger da modificare è possibile utilizzare una scorciatoia da tastiera in modo da individuare il rigo: <b:widget id='PageList1 )

<b:widget id='PageList1' locked='false' title='Pagine' type='PageList'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <b:if cond='data:mobile'>
      <select expr:id='data:widget.instanceId + &quot;_select&quot;'>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <option expr:value='data:link.href' selected='selected'><data:link.title/></option>
          <b:else/>
            <option expr:value='data:link.href'><data:link.title/></option>
          </b:if>
        </b:loop>
      </select>
      <span class='pagelist-arrow'>&amp;#9660;</span>

    <b:else/>
      <ul>
<div class='cse' style='color:#000000;float:right;margin:6px 10px 0 0 ;'>
<form action='http://www.google.com/cse' id='cse-search-box'>
<input name='cx' type='hidden' value=' xxxxxxxxxxxxxxxxxxxxx:xxx_xxxxx_x '/>
<input type='text' name='q' size='35' />
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input type="submit" name="sa" value="Search" />
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en"></script>
</div>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
          <b:else/>
            <li><a expr:href='data:link.href'><data:link.title/></a></li>
          </b:if>
        </b:loop>
      </ul>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

Per cambiare il colore di sfondo solo nel footer (piè di pagina),la sezione in basso in un blog di Blogger,in modo da evidenziare il suo contenuto è possibile aggiungere da “Aggiungi un CSS” il seguente foglio di stile CSS

.footer-inner {
  background: #ff0000 ;
}

 

Per modificare il colore dello sfondo da applicare al footer del blog di Blogger è necessario sostituire nel CSS indicato sopra, al rosso (#ff0000) un diverso colore inserendo il relativo codice esadecimale.

Per modificare il colore dello sfondo dei commenti al post inseriti nel blog dallo stesso autore del blog è necessario inserire una modifica HTML alla sezione del template relativa ai commenti ed applicare poi un CSS per definire lo stile relativo al colore da utilizzare per differenziare ,utilizzando un background di diverso colore,i commenti del proprietario del blog da quelli dei visitatori.
Dopo aver individuato,con una scorciatoia da tastiera,il seguente codice:

<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

E’ necessario modificare il codice HTML aggiungendo le stringhe indicate in rosso:

<data:commentPostedByMsg/>
</dt>
 <b:if cond='data:comment.author == data:post.author'>
<dd class='mbt-comment-body'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if>

 
Dopo aver salvato la modifica da “Salva modello”,per visualizzare nel blog un diverso colore di sfondo per i commenti postati dall’autore del blog è sufficiente aggiungere,utilizzando,il seguente foglio di stile:

.mbt-comment-body {
background: #FFFF00;
}

E’ possibile modificare il colore dello sfondo da applicare sostituendo nel CSS indicato sopra, a #FFFF00 (giallo) il codice esadecimale del colore preferito dal proprietario del blog
 

.LinkList {text-align:center !important;
}
.LinkList li {display:inline !important; float:none !important;
}

Per non visualizzare nelle pagine delle etichette di un blog di Blogger il riquadro Visualizzazione degli ultimi post con etichetta (nome etichetta). Mostra i post precedenti è possibile inserire un foglio di stile CSS direttamente dal Designer di Modelli di Blogger.

Per cancellare quindi in un blog di Blogger il modulo Visualizzazione degli ultimi post con etichetta (nome etichetta). Mostra i post precedenti,posizionato in alto nelle pagine che mostrano tutti i post relativi alla stessa etichetta,bisognerà dalla Bacheca di Blogger in “Design”>”Designer di Modelli” nel menu “Avanzato”>”Aggiungi un CSS”(utilizzando la procedura per l’inserimento dei CSS) applicare il seguente foglio di stile:

.status-msg-wrap
{
display: none;
}