Come personalizzare il widget LinkWithin.

Casualmente ho ricevuto un invito a pubblicare un articolo sulle possibili personalizzazioni del widget LinkWithin quando ci stavo già pensando. Per l'installazione del widget recatevi nel sito di LinkWithin e compilate il modulo sulla destra in cui dovete inserire email, URL del blog, piattaforma (Blogger, Wordpress self-hosted, TypePad o Altro), il numero di articoli correlati (da 3 a 5) e mettere o meno la flag per i blog che hanno il testo più chiaro dello sfondo. Si clicca su Get Widget per procedere con l'installazione. Il trucco sta nel selezionare Other e non Blogger per poter personalizzare il codice. Si clicca su Get Widget!

 

Si otterrà un codice di questo tipo

<script>
var linkwithin_site_id = XYZXYZX;
</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts Plugin for WordPress, Blogger..." style="border: 0" /></a>

dove al posto di XYZXYZX ci sarà un numero identificativo dell'URL del vostro blog. Occorre aggiungerci due tag condizionali e un div in questo modo

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='linkwithin_div'/>
<script>
var linkwithin_site_id = XYZXYZ;
</script>
<script>linkwithin_text=' Articoli Simili: '</script>
<script src='http://www.linkwithin.com/widget.js'/>
</b:if>

Questo codice, completo dell'ID specifico per il vostro blog, va incollato nel template. Per prima cosa se ne salva una copia andando su Modello > Backup/Ripristino quindi si torna su Modello > Modifica HTML > Procedi e si espandono i modelli widget. Si cerca la riga

<div class='post-footer'>

e si incolla il codice precedente subito sopra detta riga o anche subito sotto. Al posto di Articoli Simili: si può mettere il classico Ti potrebbero anche interessare: o una espressione analoga. Si salva il modello e si passa a personalizzare i CSS. Senza nessuna modifica l'aspetto del widget sarebbe questo

  Sempre su Modello > Modifica HTML > Procedi cerchiamo la riga  ]]></b:skin> e, subito sopra, incolliamo il codice

/* Personalizzazione Gadget LinkWithin
----------------------------------------------- */
.linkwithin_div {
background: #EFF6FC; /* Colore dello sfondo */
padding: 0 10px;
}
.linkwithin_text {
font-size:18px; /* Dimensione del titolo del widget */
color:#003366; /* Colore del titolo del widget */
}
a#linkwithin_logolink_0, a#linkwithin_logolink_1, a#linkwithin_logolink_2, a#linkwithin_logolink_3, a#linkwithin_logolink_4, a#linkwithin_logolink_5, a#linkwithin_logolink_6, a#linkwithin_logolink_7, a#linkwithin_logolink_8, a#linkwithin_logolink_9, a#linkwithin_logolink_10, a#linkwithin_logolink_11, a#linkwithin_logolink_12, a#linkwithin_logolink_13, a#linkwithin_logolink_14, a#linkwithin_logolink_15, a#linkwithin_logolink_16, a#linkwithin_logolink_17, a#linkwithin_logolink_18, a#linkwithin_logolink_19, a#linkwithin_logolink_20 {
display:none; /* Per rimuovere i link al logo di LinkWithin */
}
.linkwithin_posts {
width: 490px !important; /* Larghezza del gadget */
}
.linkwithin_posts a {
border: 0 !important;
padding-right: 10px !important;
}
.linkwithin_posts a:hover {
background: #CDD4DA !important; /* Colore dello sfondo al passaggio del mouse */
-webkit-border-radius: 10px !important; /* Raggio di curvatura arrotondamento */
-moz-border-radius: 10px;                                                          
border-radius: 10px;
}
.linkwithin_img_0 div, div.linkwithin_img_0,
.linkwithin_img_1 div, div.linkwithin_img_1,
.linkwithin_img_2 div, div.linkwithin_img_2,
.linkwithin_img_3 div, div.linkwithin_img_3,
.linkwithin_img_4 div, div.linkwithin_img_4,
.linkwithin_img_5 div, div.linkwithin_img_5,
.linkwithin_img_6 div, div.linkwithin_img_6,
.linkwithin_img_7 div, div.linkwithin_img_7,
.linkwithin_img_8 div, div.linkwithin_img_8,
.linkwithin_img_9 div, div.linkwithin_img_9,
.linkwithin_img_10 div, div.linkwithin_img_10,
.linkwithin_img_11 div, div.linkwithin_img_11,
.linkwithin_img_12 div, div.linkwithin_img_12,
.linkwithin_img_13 div, div.linkwithin_img_13,
.linkwithin_img_14 div, div.linkwithin_img_14,
.linkwithin_img_15 div, div.linkwithin_img_15,
.linkwithin_img_16 div, div.linkwithin_img_16,
.linkwithin_img_17 div, div.linkwithin_img_17,
.linkwithin_img_18 div, div.linkwithin_img_18,
.linkwithin_img_19 div, div.linkwithin_img_19,
.linkwithin_img_20 div, div.linkwithin_img_20 { /* Arrotondamento miniature immagini non visibile con IE */
-webkit-border-radius: 10px !important;
-moz-border-radius: 10px;
border-radius: 10px;
border:0 !important;
}
.linkwithin_title {
color: #940F04 !important; /* Colore del titolo dei post */
font-family: Arial !important; /* Famiglia dei font del titolo dei post */
font-size: 13px !important; /* Dimensione dei caratteri del titolo del post */
line-height: 14px !important; /* Altezza della linea del testo */
text-align:center;
text-decoration: none;
}
.linkwithin_title:hover {
color: #191919 !important; /* Colore dei titoli al passaggio del mouse */
font-weight: bold !important; /* Grassetto */ 
}

Si salva nuovamente il modello. Accanto a ciascun parametro in rosso c'è un commento colorato di verde con la spiegazione di quello a cui serve. I meno esperti possono leggersi i post sui codici dei colori e sull'attributo border-radius. Il widget prenderà questo aspetto

• Demo della Personalizzazione di LinkWithin -

Ricordo che i commenti colorati di verde, dopo che si sono personalizzati i parametri, possono anche essere tolti per rendere più leggero il modello anche se consiglio ai meno esperti di lasciarli per poi all'occorrenza poter più facilmente modificare il codice.