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;
}

Per creare ed inserire un testo scorrevole all’interno di un gadget HTML/Javascript come quello visibile nella colonna sinistra di questo blog ed anche qui in basso:

TESTO SCORREVOLE DA VISUALIZZARE

è possibile utilizzare questo codice HTML:

<marquee direction="left" style="font-size: 15pt; color:#ff0000; font-family: arial;" scrollamount="5" bgcolor="#000033"> <div align="center">TESTO SCORREVOLE DA VISUALIZZARE</div></marquee>

Nel codice HTML indicato è sufficiente sostituire nella posizione della scritta TESTO SCORREVOLE DA VISUALIZZARE il testo che si desidera veder scorrere nel gadget  da mettere nella sidebar del blog oppure sopra al modulo centrale del post o in basso nel footer del blog di Blogspot.
Per utilizzare colori diversi per il testo (color) e per lo sfondo (bgcolor) è possibile applicare i colori desiderati inserendo i rispettivi codici esadecimali al posto di quelli attuali.
Allo stesso modo è possibile sostituire nel codice HTML il font (font-family) e la dimensione del carattere (font-size) da visualizzare nel blog di Blogger.
Per impostare la direzione verso la quale deve scorrere il testo possiamo sostituire il valore di direzione (direction) attualmente impostato  con il testo che si sposta verso sinistra (left)  con le corrispondenti opzioni da utilizzare per visualizzare lo scorrimento della scritta verso destra,verso l’alto o verso il basso(right,up,down).
La velocità di scorrimento (scrollamount) della scritta,da posizionare nella colonna laterale del blog di Blogger,sarà maggiore quando più sarà alto il valore numerico (al momento è  5) impostato  nel codice HTML.
Dopo la personalizzazione il codice dovrà essere copiato ed incollato in un gadget HTML/Javascript(disponibile nella Bacheca di Blogger da “Design”>”Elementi pagina”>”Aggiungi un gadget”) da mettere poi nel layout di un blog su Blogspot.

Per cambiare il colore di sfondo solo in un gadget HTML/Javascript o in un diverso widget tra quelli presenti nella sidebar di un blog di Blogger,in modo da mettere in maggior risalto il suo contenuto,è possibile aggiungere da “Aggiungi un CSS” il seguente foglio di stile CSS

#HTML1 {
background-color: #ff0000;
}

Nel codice indicato è necessario sostituire  a HTML1 lo specifico Widget ID del gadget HTML/Javascript al quale si desidera cambiare il colore di sfondo per evidenziare il suo contenuto o il testo inserito al suo interno.
E’ possibile modificare anche il colore dello sfondo da applicare e sostituire quindi,nel codice indicato sopra, a #ff0000 (rosso) il codice esadecimale del colore preferito.

Per aggiungere un foglio di stile CSS al codice HTML del template in un blog di Blogspot è possibile seguire le indicazioni di questo post:
Come inserire un CSS in un blog su Blogger

Per aggiungere in un template di Blogger,nel quale non è prevista questa possibilità,un ulteriore elemento “Aggiungi un gadget” posizionato in alto sopra il modulo “Intestazione” in modo da poter inserire anche in quella posizione un banner,una foto,un modulo pubblicitario di Adsense oppure altri elementi da inserire in un gadget HTML/Javascript  o in un diverso gadget è possibile utilizzare una modifica al template accedendo dalla Bacheca di Blogspot alla sezione “Design”>”Modifica HTML”.
Dopo aver salvato per sicurezza una copia del template ed aver individuato nel codice HTML del template con una scorciatoia da tastiera il rigo:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Bisognerà sostituirlo con:

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>

A questo punto,dopo aver controllato per sicurezza il blog in anteprima e cliccato su “Salva modello” per rendere effettiva la modifica,sarà disponibile direttamente nella sezione “Design” >”Elementi pagina” nella parte superiore del layout un modulo supplementare “Aggiungi un gadget” da utilizzare per mettere in alto nell’Header un banner un testo o un’immagine da visualizzare sopra l’Intestazione con il titolo e la descrizione del blog.

Per aumentare la dimensione complessiva delle colonna centrale e di quelle laterali di un blog su Blogger oltre la misura di 1000 pixel che è possibile impostare direttamente dal Designer di Modelli bisogna inserire dalla bacheca di Blogger in “Design”>”Modifica HTML una modifica HTML al template.
Dopo aver salvato per sicurezza una copia del template ed individuato con una scorciatoia da tastiera il rigo con il codice:

<b:template-skin>

è possibile sostituire nel rigo subito sotto:

<b:variable default='930px' name='content.width' type='length' value='1000px'/>

al valore impostato a 1000 px nella porzione “value='1000px” la larghezza in pixel che si desidera applicare al template del blog su Blogger.

 
Subito dopo l’inserimento della modifica per allargare il modello di Blogger (es. 1040 pixel) è possibile cliccare su “Anteprima” per controllare il risultato ed eventualmente salvare il template, con le nuove impostazioni di larghezza applicate,cliccando sul tasto “Salva modello”.
Da questo momento,come è visibile in Test per blogger,la larghezza complessiva in px del template del blog su Blogger sarà quella inserita nel codice HTML del modello.
Questa nuova dimensione in pixel sarà a disposizione nella sezione “Layout” del Designer di Modelli per impostare la larghezza della colonna centrale del post e della sidebar del blog di Blogspot

Il seguente codice:
<b:if cond='data:blog.url == data:blog.homepageUrl'> 


E più in basso bisognerà aggiungere prima di:


</b:includable>
</b:widget>
Il codice HTML:
</b:if>

Per mettere il gadget “Elenco blog”di Blogspot ,che consente di visualizzare il blogroll con i blog preferiti, solo in una pagina statica del blog è possibile,dopo aver creato una pagina con il solo titolo come questa: I blog che seguo e posizionato il gadget “Elenco blog personale” sotto al modulo del post,inserire una modifica HTML da “Design”>”Modifica HTML” per visualizzare il gadget solo in quella pagina

 
Dopo aver salvato per sicurezza una copia del template  e selezionato la funzione “Espandi modelli widget” bisognerà individuare con una scorciatoia da tastiera BlogList1 che è il codice che identifica il widget nel template.
Dopo averlo trovato è necessario inserire dopo:

<b:widget id='BlogList1' locked='false' title='Elenco blog personale' type='BlogList'>
<b:includable id='main'>

Il seguente codice (nel quale andrà inserito l’URL della pagina creata in precedenza):

<b:if cond='data:blog.url == "URLdella paginadelblog"'>

E più in basso bisogna aggiungere prima di:

</b:includable>
</b:widget>

Il seguente codice:

</b:if>

Subito dopo è sufficiente cliccare su “Salva modello” per visualizzare il widget del blogroll con i “blog che seguo” in una pagina aggiuntiva di un blog di Blogger.

Per vedere interamente il codice HTML di un elemento gadget /widget in un blog di Blogger è necessario utilizzare questa funzione:

Come attivare lo strumento “Espandi i modelli Widget” in un blog di Blogger

Per trovare rapidamente una stringa di codice HTML in un template di Blogger è possibile utilizzare questa soluzione:

Come cercare con facilità un rigo nell’HTML o in un termine in una pagina web

Per creare un file con il backup del template è possibile seguire le indicazioni di questo post:
Come salvare la copia di sicurezza del template di Blogger

Puoi utilizzare il modulo commenti di questo post per le tue domande su Blogger o i moduli dei singoli post con i tutorial per le informazioni e i chiarimenti relativi ai test illustati.