Pubblicato il 17/11/11e aggiornato il

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

elenco-di-link-blogger  

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

elenco-di-link-personalizzato-blogger

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.





14 commenti :

  1. Sai cosa mi piacerebbe tanto? Poterlo inserire in una pagina statica.
    Ciao!

    RispondiElimina
  2. Ciao scusa volevo chiederti una cosa off-topic (non sapevo dove scriverla).

    Oggi con un mio collega abbiamo notato una cosa strana che succede se pubblichiamo i post da live writer.

    L'indirizzo del post pubblicato non è più il titolo del post stesso ma la sua prima riga.

    Mi sono detto...non è che forse sono io che ho sballato qualcosa nei modelli? Ma ero quasi sicuro che non poteva essere così ma che dipendeva da qualche modifica che ha fatto blogger che crea l'errore se si pubblica da wlw

    Per curiosità ho guardato questo post che hai appena pubblicato. E ho visto che anche a te è capitata la stessa cosa.
    Te ne eri accorto?

    Io ho risolto mettendo come bozza da wlw su blogger e poi pubblico dalla bacheca di blogger stesso.

    RispondiElimina
  3. @Shoras
    E' vero non me ne ero accorto. Pensa che proprio ieri ho avuto un commento analogo. E' una cosa che probabilmente è successa a tutti. Magari domani ci faccio un post su come porre rimedio. Potrebbe anche essere un bene dal punto di vista SEO. Ho già una certa idea in mente.

    RispondiElimina
  4. Come potrei creare un elenco di link utile, per la parte finale di blogger?
    Un esempio è quello del Corriere dello Sport. Allego immagine:
    http://i.imgur.com/m8RIp.png

    RispondiElimina
    Risposte
    1. @Andrea+-+-
      Si può fare in mille modi. Puoi usare il widget elenco di link oppure un gadget HTML/Javascript. In questo caso per ricavare il codice vai su Windows Live Writer e creati l'elenco di link personalizzato come ti pare. Vai quindi su Origine e copia l'HTML da incollare poi nel gadget.

      Elimina
    2. l'elenco di link se ho capito bene mi crea il tutto su un unica colonna, io volevo dividerlo in tre parti. Quindi conviene di farlo con il gadget HTML/Javascript? Io non uso W.L.W, dovrò farlo manualmente e per creare una seconda o terza colonna che potrei fare?
      (sono sempre complicato a esprimermi)

      Elimina
    3. @ Andrea
      Visto che la cosa penso possa interessare anche altri ci farò un post. Salvo il commento su Pocket per ricordarmelo

      Elimina
  5. Ciao Ernesto,
    io ho utilizzato il gadget offerto da blogger per creare degli elenchi di link che ho piazzato nella nuova sidebar sinistra, e che conducono alle varie categorie del blog.
    Stasera ho notato però che con Firefox e Google Chrome si apre solo il primo link di ogni elenco, mentre quelli sotto no. Con Explorer invece funzionano tutti quanti.
    A cosa potrebbe essere dovuta la cosa? Sai se c'è un modo per sistemarla?...
    Grazie

    RispondiElimina
    Risposte
    1. @DietaEDintorni
      Con i browser ci sono sempre dei problemi. Questo a cui fai riferimento mi pare però uno di quelli transitori che si risolvono da soli. Forse c'è stato un aggiornamento. Aspetta qualche giorno poi vedi. Se il problema persiste passa a un altro widget.

      Elimina
    2. Infatti mi sembrava che ieri funzionasse. Ti ringrazio tanto e ti auguro una dolce notte ^^

      Giuliana

      Elimina
    3. Aggiornamento: il gadget continuava a malfunzionare; avevo anche provato a sostituirlo con uno simile, ma con Firefox e Google Chrome dava lo stesso identico problema. Alla fine, per risolvere la cosa (in caso qualcuno si trovasse nella mia stessa situazione e fosse come me un tipo poco paziente):

      1) Sono entrata nell'interfaccia da cui si scrivono i post
      2) Ho creato un elenco puntato con le voci che mi interessavano
      3) Ho associato a ciascuna delle voci il relativo link
      4) Ho copiato il codice html dell'elenco puntato
      5) Ho inserito detto codice nella sidebar utilizzando il gadget "html/javascript"
      6) Ho modificato i margini del gadget entrando nel modello html

      Adesso i link sono tutti cliccabili, con qualsiasi browser ;)

      Elimina
  6. Ciao !
    Ma si può fare una modifica in modo che le pagin linkate si aprano in un'altra pagina senza lasciare il blog ?
    Grazie !

    RispondiElimina
    Risposte
    1. @CollaFranco
      Certo che si può fare. Quando metti un link con l'Editor di Blogger devi mettere la spunta a Apri questo link in una nuova finestra. Lo si può anche fare andando su HTML e inserendo il Link con il tag target="_blank" in questo modo
      < a href="URL del Collegamento" target="_blank"/ > Anchor text < /a >
      ovviamente togliendo gli spazi prima e dopo i segni di minore e maggiore.

      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.