Come creare un elenco di link personalizzato per Blogger.

I blog su Wordpress e altri CMS hanno la favicon che si trova a questo indirizzo www.esempio.com/favicon.ico. Per un blog su Blogger se si digita nel browser

www.ideepecomputeredinternet.com/favicon.ico

si vedrà l'immagine della B bianca di Blogger sullo sfondo arancione. Sarà la stessa per tutti i blog, lo potete constatare sostituendo l'URL del mio blog con un altro. Anche se si è personalizzato la favicon, si vedrà invariabilmente la stessa icona. Nel caso si voglia inserire la favicon di un sito in un articolo o in una pagina web, dobbiamo adoperare questo codice HTML

<img src="http://www.esempio.com/favicon.ico"/>

Non tutti i siti permettono di acquisire la propria favicon. In questo caso ci viene in aiuto Google attraverso un metodo automatico di acquisizione delle favicon. Se vogliamo postare l'immagine della favicon di un sito web che non ci consente di acquisirla dobbiamo incollare questo codice HTML

<img src="http://www.google.com/s2/favicons?domain=www.esempio.com" /> 

mettendo al posto dell'URL in rosso l'indirizzo del sito in oggetto. Vediamo adesso come personalizzare un Elenco di link da inserire come gadget in Blogger. Ricordo che su Blogger c'è un widget molto conosciuto che si chiama Elenco blog o Blog Roll. Proprio sotto a quello, ce n'è un altro che si chiama appunto Elenco di Link e che è molto più negletto e scarsamente utilizzato. Per la sua installazione si va su Layout > Aggiungi un gadget > Elenco di link

  

Con questo widget si possono aggiungere gli URL di siti che ci sembrano interessanti per i nostri lettori scegliendoli anche tra quelli che seguiamo tramite Google Friend Connect. Si può ordinare l'elenco e spostare in alto o in basso i vari siti. L'aspetto del widget sarà quello di un semplice elenco che erediterà lo stile del blog. Vediamo come fare a aggiungere la favicon e a rendere questo widget più originale. Il nome del gadget sarà LinkList1 e potrà essere trovato il suo codice andando su Modello > Modifica HTML > Procedi, espandendo i modelli widget e cliccando su F3 per trovare il gadget con tale nome. Se ne abbiamo già inserito un altro simile invece di LinkList1 sarà LinkList2. Il suo codice sarà comunque simile a questo

<b:widget id='LinkList1' locked='false' title='Blog che seguo' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
   <ul>
  <b:loop values='data:links' var='link'>
   <li><a expr:href='data:link.target'><data:link.name/></a></li>
  </b:loop>
</ul>
   <b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

dove al posto del Titolo ci può essere un'altra espressione. Dobbiamo cancellare la riga colorata di rosso e sostituirla con questo blocco di codice 

<li>
  <a expr:href='data:link.target'>
    <img expr:src='data:link.target + &quot;favicon.ico&quot;' />
    <data:link.name/>
  </a>
</li>

Si salva il modello. Si vedrà l'elenco di link ravvivato dalla presenza della favicon di ciascun sito. Si può personalizzare ulteriormente cercando sempre nel modello la riga </head> e subito sopra incollando il seguente foglio di stile

<!-- Favicon Elenco Link Inizio -->
<style>
  #LinkList1 li {
    background-color: #FFEAE9; /* colore di sfondo */
    border-top: 2px solid #FDBCB7; /* stile del bordo superiore */
    border-bottom: 2px solid #FDBCB7; /* stile del bordo inferiore */
    cursor: pointer;
    margin: 2px 0;
    padding: 3px 10px;
  }
  #LinkList1 li a {
    color: #003366 !important; /* colore di ciascun link */
    font-weight: normal !important;
    text-decoration:none !important;
  }
  #LinkList1 li img {
    background: #FFFFFF url(http://dl.dropbox.com/u/2574553/coda-slider-img/blogger.ico) no-repeat 0 0; /* sfondo immagine */
    display: inline-block;
    height: 16px;
    margin-right: 5px;
    vertical-align: top;
    width: 16px;
  }
  #LinkList1 li:hover {
    background-color: #FDBCB7; /* colore di sfondo al passaggio del mouse */
    border-color: #940F04; /* colore del bordo al passaggio del mouse */
  }
</style>
<!-- Favicon Elenco Link Fine - http://www.ideepercomputeredinternet.com  -->

Dopo aver salvato il modello si vedrà una cosa di questo genere

Si possono modificare i codici dei colori e lo stile dei bordi per renderli più adatti al layout del nostro sito. L'URL colorato di rosso rappresenta l'immagine di default che verrà visualizzata quando non è possibile acquisire la favicon del sito linkato. Se si usa un file ICO, tale immagine dovrà essere caricata su DropBox, utilizzando un altro formato quale JPG o PNG si può usare come hosting anche Picasa.

• Demo del widget dell'Elenco di link personalizzato -