BlueGriffon, HTML Jquery, librerie Giochi, Blogger, Templates Blogger, widget, gadget, aspetto QR, codice, Blogger AdWords, Google, pubblicità Templates, Blogger, Natura Nlogger, templates, Manga

Come personalizzare il widget dei post più popolari in Blogger.

Le personalizzazioni offerte dal servizio sono ancora minime e non sempre ben funzionanti.

Vediamo come ovviare a un paio di queste manchevolezze, ricordando che il widget si basa su un elenco e su delle miniature, quindi il suo aspetto dipenderà dallo stile che il nostro modello ha per questi due elementi.

1.- Come diminuire il numero dei post più popolari visualizzati.

Uno dei problemi maggiori è che di default vengono mostrati i dieci post più visti e non c'è data possibilità di modificare questo numero. Ecco come si può ovviare a questo inconveniente. Il trucco è quello di modificare la lunghezza del widget con il vincolo di non mostrare la parte eccedente. Occorre andare in Design > Modifica HTML e cercare la seguente riga:

post più popolari

]]></b:skin>


cliccando su F3 o su Ctrl+F. Immediatamente sopra deve essere incollato il seguente codice

/* Post Popolari */
#PopularPosts1 {
height: 420px;
overflow: hidden;
}

dove la prima riga è un commento che serve per ritrovare il codice per eventuali future modifiche e il parametro da modificare è height: 420px; cercando l'altezza giusta per mostrare solo il numero dei post che desideriamo. Ovviamente va salvato il modello.

2.- Come modificare l'aspetto del widget.

Sempre su Design > Modifica HTML possiamo visualizzare quello che è il codice standard per il widget

<b:widget id='PopularPosts1' locked='false' title='Post più popolari' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail-center'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

che può variare a seconda che abbiamo optato per la presenza o meno di miniature e snippet. Il codice, come quello di tutti i gadget inizia con <b:widget id=… e termina con </b:widget>. Una possibile personalizzazione è quella di cancellare totalmente tutto questo codice e di sostituirlo con quest'altro

<b:widget id='PopularPosts1' locked='false' title='Articoli più letti' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
<b:else/>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img src='http://t9pysw.blu.livefilestore.com/y1pyDV2pEY18AF2Mp8eieGrghWSLgB1udVJJq3fNps6_-t5NcEqMOQQ51e8TM2v0-DPEi5eXJypDjrqC46urd98E2e9apZHo9NG/miniatura-90.jpg'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Le parti evidenziate di rosso possono essere personalizzate e riguardano principalmente l'immagine che dovremo mostrare come miniatura se nel post non ce ne fosse nessuna. Una tale immagine deve essere caricata su un servizio tipo Picasa o Skydrive.

Adesso cerchiamo la riga
]]></b:skin>
e, immediatamente sopra, incolliamo il CSS del widget

/* Post Popolari Stile */
#PopularPosts1 li{
list-style:none;
width:300px;
height: 70px;
border-bottom: 1px solid #111;
margin: 5px ;
padding: 0 0 15px 0;
}
.item-thumbnail {
padding: 5px;
}
.item-title {
padding: 30px 0;
font-size: 14px;
}

Le parti in rosso indicano tutto quello che si può personalizzare e riguardano

  1. La larghezza del widget (width:300px;) e l'altezza di ogni singolo elemento dell'elenco (height: 70px;)

  2. La larghezza del bordo (1px), la sua forma (solid o dashed o dotted) e il suo colore (#111)

  3. La dimensione dei caratteri del titolo del post (14px)

  4. Si possono anche modificare i valori del margin (distanza tra il widget e il resto del layout) e del padding (distanza tra l'esterno del widget e il suo contenuto interno)

  5. La dimensione della miniatura deve essere coerente con l'altezza che si è impostata per ogni singolo elemento dell'elenco

Ecco un esempio di come può diventare il widget con queste modifiche

widget-post-più-letti

Se ti è piaciuto l'articolo , iscriviti al feed cliccando sull'immagine sottostante per tenerti sempre aggiornato sui nuovi contenuti del blog:

Come personalizzare il widget dei post più popolari in Blogger. Come personalizzare il widget dei post più popolari in Blogger. Reviewed by Luca Soraci on settembre 10, 2014 Rating: 5

Trovato questo articolo interessante? Condividilo sulla tua rete di contatti Twitter, sulla tua bacheca su Facebook o semplicemente premi "+1" per suggerire questo risultato nelle ricerche in Google, Linkedin, Instagram o Pinterest. Diffondere contenuti che trovi rilevanti aiuta questo blog a crescere. Grazie! CONDIVIDI SU!!

Nessun commento

!-- Google Tag Manager (noscript) -->