Articoli correlati per categorie con anteprima su Blogger


Ecco un metodo alternativo per la visualizzazione dei post correlati su Blogger che produrrà un elenco con anteprima molto simile a LinkWithin ma senza appoggiarsi a servizi esterni e badandosi sulle categorie dell’articolo, come la visualizzazione con solo testo e link proposta diverso tempo fa.

L’effetto finale fa davvero la sua figura:

image

Installarlo su Blogger non è una operazione complicata ma, a scanso di qualsiasi problema, vi invito a fare il backup del template.

Modifiche al template

Da Layout->Modifica HTML, selezionate “Espandi i modelli widget” e cercate questa porzione di codice:

</head>

Subito prima, incollate questo:

<!--Articoli correlati con anteprima script e stile inizio-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://sites.google.com/site/creareblog/script-blog/articolicorrelati2.js?attredirects=0&amp;d=1' type='text/javascript'/>
</b:if>
<!--Articoli correlati con anteprima script e stile fine-->

A questo punto cercate questa riga di codice:

<div class='post-footer-line post-footer-line-1'>

Se non la trovate, provate a cercare questa:

<p class='post-footer-line post-footer-line-1'>

Se non riuscite neanche con questa, cercate post-footer-line-1 e tenete in considerazione l’elemento HTML che lo contiene (che inizia con < e finisce con >).

Subito dopo la riga che avete trovato, incollate questo:

<!-- Articoli correlati con anteprima inizio -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop> <script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=4;
var relatedpoststitle="Articoli correlati";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Articoli correlati con anteprima inizio -->

A questo punto potete salvare il template. Per vedere il widget in azione, dovrete entrare nella pagina del singolo post.

Personalizzare la visualizzazione

Potrete intervenire nell’ultima porzione di codice per modificare i due valori che ho indicato in rosso:

1. maxresults: indica il numero di post da visualizzare, io ho messo 4

2. relatedpoststitle: etichetta visualizza, io ho messo “Articoli correlati”

Chi ha pratica con il codice CSS potrà intervenire nella prima porzione di codice per personalizzare i colori e lo stile del widget.

Differenze rispetto a LinkWinthin

Mentre LinkWithin calcola automaticamente quale dei nostri articoli è legato al post visualizzato in quel momento, spesso con clamorosi errori (ma dipende dai casi), questo gadget è per certi aspetti più preciso, visto che si basa sulle categorie. Direi che entrambi i metodi possono essere preferibili, se avete dubbi potete fare delle prove. LinkWithin ha una velocità di caricamento leggermente migliore dello script, ma niente di eclatante.

Ultime parole

Il gadget che ho presentato in questo articolo è stato creato dall’autore di Blogger Widgets. Il risultato è così impressionante che mi ha fatto pensare ancora una volta come le cose più sorprendenti di Blogger arrivino da programmatori che investono il loro tempo libero gratuitamente, mentre Google centellina le novità.

Condividi su Facebook, Twitter o Google Buzz:
Condividi su Facebook Condividi su Twitter Pubblica su Google Buzz

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:
oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!

56 commenti:

Rocco ha detto...

Non male questa applicazione, però ho paura che appesantisca il blog allungandone i tempi di caricamento, può essere?

info ha detto...

No nessun problema di caricamenti lenti vai tranquillo...

giovanna ha detto...

mmm... domani provo quest'altra ..diavoleria :-))
(in senso buono, naturalmente!)
'notte Orazio,
grazie!
g

Lorenzo ha detto...

Beh normale che Google faccia così: se ci sono un sacco di appassionati che per loro iniziativa e passione, gratuitamente, sfornano script e novità che rendono disponibile a tutta la comunità di blogger, perché mai dovrebbero impiegare molte risorse - tempo, energie e soldi - per realizzare qualcosa magari pure di peggiore di ciò che già nasce spontaneamente?

Una domanda per te: perché se presenti questo nuovo script, usi sempre LinkWithin? :) Io volevo installarlo ma prima vorrei vederlo in funzione...

Altra domanda: com'è che lo script si ricava le immagini contenute nel post? Cavolo non sono mai riuscito a farlo e nemmeno ho trovato nessuna documentazione online a riguardo. Avrei in mente una bella "ideuzza" ma non riesco a realizzarla. Sai aiutarmi?

Grazie, Lorenzo :)

ec.log ha detto...

ciao !! prima cosa, GRAZIE !! il tuo blog è molto bello ed "utile". ho inserito questa modifica nel mio blog ma ho dovuto cambiare un'etichetta eliminando il carattere "/" perché altrimenti non funzionava. sbaglio io? ciao!

AUTOdiMERDA ha detto...

Ottimo tene, l'avevo già visto ed utilizzato appena uscì ma non funzionò. Riprovo con le tue indicazioni - soprattutto perchè a me Linkwithin si è impantanato con le vecchie immagini ed a nulla è valso crearmi nuovi account.

Mio Capitano ha detto...

Ottimo consiglio. L'unica controindicazione è che i consigli vanno sulla pagina interna, il che potrebbe essere pure un vantaggio. Ciao.

giovanna ha detto...

Oraziooo, :-)
ho inserito lo script e tutto, ma... : non è cambiato nulla, visualizzo sempre solo testo e link.
avrò sbagliato io qualcosa? ma non mi pare :-(
ho seguito le indicazioni.
Aspetto altri commenti ... vedrò se dipende da me o dal mio blog.
grazie,
g

Mio Capitano ha detto...

ho un piccolo problema per te. Ho notato che Link Whitin nelle anteprime non schiaccia l'immagine se di proporzioni differenti (in quel caso ne pubblica solo una parte, ma integra). Sapresti dire come fare per ottenere lo stesso effetto con questo script?
Un suggerimento simile sarebbe utile pure per le foto anteprima dei post espandibili. No allo schiacciamento, insomma.

Tenebrae ha detto...

@rocco: non significativamente

@lorenzo: provarlo è facile, basta creare un blog di prova con un paio di post con categorie.. mi piacerebbe fornire sempre delle prove su strada delle modifiche, ma dovrei creare decine e decine di blog :)

mi piace il fatto che linkwithin mescoli un po' le cose, tirando fuori anche post vecchi... tutto sommato, ho visto che trova articoli abbastanza attinenti, quindi al momento mi sta bene così

quanto alla domanda tecnica, ti invito a guardare lo script... purtroppo ho una brutta influenza (incrociamo le dita) e proprio non riesco a lanciarmi in discorsi tecnici... casomai ti rispondo a mente più lucida, se non ci si aiuta tra noi smanettoni... :)

@ec.log: potresti aver trovato un bug dello script, è possibilissimo... come ho risposto sopra, purtroppo mi trovate in un momento di poca lucidità, quindi non so confermare o smentire

@paolo: si, ricordo i tuoi problemi con linkwithin, fammi sapere se con questo risolvi

@giovanna: prova a fare la modifica su un blog di prova scaricando il template da quello ufficiale e caricandolo lì... magari ci sono altre cose che gli creano problemi, tipo la vecchia visualizzazione... così puoi eliminarla e provare senza far danni

@capitano: ottimo suggerimento, appena potrò mi dedicherò a questa modifica

Elisabetta ha detto...

ho inserito la modifica,Orazio,tutto bene,pero'gli articoli correlati,possiamo visionarli solo noi autori..chi entra, non sa che deve cliccare sulla data, per poter visionare le correlazioni,è cosi' o sbaglio io?comunque in bocca al lupo per la tua salute,rimettiti in forma!!!:)

giovanna ha detto...

Orazio,
in primo luogo, auguri per la tua influenza. Rimettiti presto su...!
ora vado a provare il suggerimento,
grazie
g

peter79 ha detto...

Fatto. Mi pare che vada tutto bene. Grazie per questa opzione. Dvavero utile.

giovanna ha detto...

Orazio,
:(
spero tu stia bene...
ho provato sul blog prova e là va ok.
Quindi sul blog "vero" ho cancellato il precedente script, dell'altra visualizzazione e ... ora non appare alcun link correlato! Né testo Né con immagine.
Confrontando i due "html" la differenza che riesco a trovare, in proposito...:
nel blog di prova trovo (metto doppie virgolette al posto del tag che non accetta):
""div class='post-footer'""
""div class='post-footer-line post-footer-line-1'""

in quello "vero":
""div class='post-footer'""
""p class='post-footer-line post-footer-line-1'""
Ho provato anche a sostituire la seconda con la prima, ma non mi salva la modifica avvertendomi di errore ... su div, parla di tag non corretto...
Insomma, questo è!
Ti aspetto...solo quando puoi..
caso mai rimetto il vecchio script...
grazie
g

grifone72 ha detto...

Interessante ma nel mio template non riesco a trovare la riga div class='post-footer-line post-footer-line-1' ne similari, peccato! Avrei voluto provarlo :(

Vinnie ha detto...

Bello!

L' ho provato sul blog e fa veramente un ottima impresssione, solamente che visualizza i post di una sola categoria mentre la maggior parte dei miei articoli fa parte di più categorie..peccato.

Cmq ottimo

G. Gualco ha detto...

ciao Orazio, Ho appena tolto il widget in questione per mettere linkwithin.. soprattutto se i titoli dei post sono lunghi viene un pò orripilante, unico vantaggio che si può modificare. Ma i tumbnails sono assolutamente migliori con linkwithin e anche la grafica.. purtroppo non hanno pensato di lasciar decidere di mostrare anche più tumbnails che 5 max.
Per quanto riguarda la lettura in home page o solo post, linkwithin può essere aggiunto anche al template sopra data:post.body/ . Apparirà npon in Home Page ma solo tra i post singoli sotto tutto l'articolo prima del post-footer.. Grazie di averlo messo nel tuo sito così ti ho potuto copiare!!:) ciao e a presto

aerie ha detto...

Lo proverò prossimamente, anche perchè con linkwithin ho sempre un problema di visualizzazione.
Cmq grazie per tutti i tuoi post, sono davvero utili :D
Volevo anche dirti che ho aggiunto il tuo link al mio blog

LeoRock_BogSmiertij ha detto...

Ciao!
ho provato ad inserire questo affare, salvando il template prima, ed è successo un casino con la sidebar: adesso viene visualizzata alla fine del "main" dove ci sono i post...
ho provato a ridimensionarla, sperando fosse un problema di eccessivo carico e che "andasse fuori da i limiti" ma niente...
cosa posso fare?

grazie... complimenti per i post sono davvero utili

Lorena ha detto...

è bellissimoooooooooooooooooooooooooooooooooooo
funziona!!!!!!!!!!!!!!!!!!!!!!!!!!!
mi serviva questa funzione nel blog!!!!!!!!!!! :-*
grazie! ;-)

DANY ha detto...

purtroppo con linkwithin ci ho proprio rinunciato, ma questo va benissimo grazie.
ciao

LeoRock_BogSmiertij ha detto...

hey!

Ho risolto!! ovviamente avevi già dato la soluzione al problema (http://creareblog.blogspot.com/2009/10/come-evitare-le-colonne-che-vanno-sotto.html), che era causato dai post espandibili.

Grazie, come al solito.

Nurix ha detto...

non riesco a trovare questa porzione di codice:

post-footer-line post-footer-line-1

nè niente di minimamente simile, perciò per adesso nada..

cavoliamerenda ha detto...

Non so se metterlo o meno, ho letto i commenti contrastanti e sono un po' indecisa, LinkWithin non mi soddisfa troppo, tu quale consigli?
A questo proposito avrei una domanda: LinkWithin si riaggiorna? Voglio dire: fissato il post A già pubblicato, quando avrò pubblicato dei post X,Y,Z molto simili ad A, LinkWithin mostrerà quelli o continuerà a mostrare quelli (fuori tema) che mostra ora?

communication mood ha detto...

a me non funge :)

Giuseppe ha detto...

Ciao Tene, ho effettuato il tricks e per lo meno è sul blog, l' unica cosa sono le descrizioni dei post che rimangono con dei puntini e non finiscono ed il titolo "ti potrebbero Interessare" è rimasto troppo grande, potresti darmi un braccetto?

Tenebrae ha detto...

@elisabetta: c'è qualcosa che non va, gli articoli correlati sono visibili da tutti... vedo comunque che sei tornata/passata a linkwithin... c'è però quel "articoli correlati per categorie" nel tuo template che è fuori posto, appare dopo ogni commento... ti consiglio di togliere tutto e lasciare solo linkwithin

@giovanna: se cambi la seconda riga, devi cambiare anche il tag di chiusura, cercando "/p" e facendolo diventare "/div"... comunque dopo la seconda riga del blog "vero" dovrebbe andare benissimo :-/

@vinnie: in realtà li prende anche da più categorie, forse se ce n'è abbastanza nella prima che trova si accontenta

@leo rock: tutto è bene quel che finisce bene :)

@cavoli a merenda: si, linkwithin si "riaggiorna" con i nuovi post, anche se magari non immediatamente... come ho detto prima, al momento mi trovo bene con linkwithin, ma non escludo di provare questa modifica in futuro

@giuseppe: i puntini è perchè i titoli sono troppo lunghi, deve troncarli... per la scritta troppo grande (ma non così tanto, dai!) puoi provare a chiuderla tra i tag "small" e "/small" nella variabile relatedpoststitle

Giuseppe ha detto...

@tenebrae per i puntini allora nada, per la scritta grande gli ho dato un h4 complimentonissimissimi per il tricks, già il blog mi piace di più, aspetto sempre il tuo articolo per mettere in automatico gli adsense all' interno dell' articolo dpo un certo numero di parole alla prox grazxie

Channel 360 News ha detto...

fatto! è molto meglio di LinkWithin! che era decisamente più casuale... ci ho messo un pò solo a toglierlo dato che non avevo più il whidget ma c'era ancora...

su questo nuovo il testo può essere cambiato sia in grandezza che in grassetto... ho provato e ci sono riuscito... il colore invece non me lo cambia.. poco male. grazie ancora tenebra

giovanna ha detto...

Orazio,
grazie per la dritta sul tag di chiusura...giusto! :-)
Ho corretto, ora non mi da l'errore ma ugualmente non riesco a ottenere la visualizzazione voluta. Ho provato a ri-cancellare il vecchio script e, come già sperimentato, non ho alcuna visualizzazione (quindi rimesso il vecchio. - non cancellato però il nuovo!)
Succede però una cosa un po' strana: su vecchi post appare, insieme alla visualizzazione con solo link, anche "qualche" visualizzaz. con immagine! "qualche" perché ne appare che so, una o due... ma, ripeto solo su vecchi post! Solo casualmente mi pare. Insomma dovrei ritrovarli anche io...:-(
Acci, sono dispiaciuta, non tanto per la mancata visualizzazione MA per la non riuscita!!!
grazie però!
g

Vinnie ha detto...

ah ok perfetto

Channel 360 News ha detto...

come non detto ho parlato troppo presto... oggi mi collego ed è sparito.
non c'è più... incredibile!
ho rifatto la procedura ma niente non vuole apparire eppure è identica a quella che ho fatto ieri e ieri funzionava...
Cosa può essere?

aerie ha detto...

Evvai!! Funziona!
Meglio di linkwithin ^_^
Grazie!

roro ha detto...

Sigh..sigh...a quando ho cambiato template, pur avendo apportato nuovamente le modifiche per inserire gli articoli correlati non li vedo più. uffa, vuoi didentare il mio consulente? Ciao Orazio e buon inizio d'anno. Un abbraccio Ros

Wolfango Free ha detto...

Grazie Orazio, è perfetto. Unico neo che non ho più la finestra dove scrivere i commenti, solo il titolo "Commenta", ma non si scrive più. Questo già da quando ho messo il codice per espandere i post, ...aiuto! Ciao Orazio, comunque complimenti.

Wolfango Free ha detto...

Dimenticavo:Clicca qui per visitare il mio blog! Ciao e grazie ancora se mi vuoi aiutare. :((

berebettolo ha detto...

Ciao e Complimentissimi per il blog!

Trovo l'applicazione degli articoli correlati utilissima, e ti chiedo se è possibile avere un'anteprima di "default" nei post, ovvero se non ho caricato un'immagine nei post, che appaia un'anteprima standard (caricata da un url ad esempio...).

Grazie mille e complimenti ancora

Silvia ha detto...
Questo commento è stato eliminato dall'autore.
PC Space and Exploration ha detto...

ciao Orazio! ho eliminato LinkWithin propio oggi per poter provare quanto hai proposto nel tuo articolo, e devo dire che lo preferisco per vari motivi. Ho solo una domanda per te: è possibile visualizzare i post correlati anche nella paggina principale del blog (l'home page per capirci) e non solo nella singola pagina del post interessato ? Spero tu possa aiutarmi. Ciao e grazie in ogni caso :)

Luca Chirico ha detto...

Ciao, ho una domanda da sottoporti.

Ho degli articoli con determinate tag presenti solo per quell'articolo.

Come faccio a fare in modo che non compaiano tag senza articoli?

si dovrebbe mettere una condizione "IF" ma non ho idea ne dove ne come...

DEUSEXMACHINA™ ha detto...

Ciao! grazie per il modello, mi sembra più affidabile (negli argomenti) rispetto a LinkWithin.
Avrei due domande però
1.é possibile rimpicciolire la scritta articoli correlati?se sì come?
2.é possibile avre delle preview delle immagini de post più grandi?

grazie mille!! confido in una risposta!

Roberta ha detto...

scusa ma quando mi chiedi di inserire i codici html non li trovo ho preso in considerazione le varie opzioni ma nessun codice c'è nel mio template cosa devo fare ?

Lia ha detto...

Ufffaaaaaaa, arrivo tardi e con un problemuccio, il che è una meraviglia! :o) dopo aver incollato la prima parte di html non riesco andare avanti perchè mi mancano tutti e tre i codici successivi...lo so che dovrei averceli ma non so più dove cercarli(manca il post-footer-line), fra un po' chiedo al blog vicino!!!E' possibile o son torda io?

Tenebrae ha detto...

@lia: ahahahah questa del blog vicino è bellissima!

nel tuo caso dovrebbe essere

div class='post-footer-line post-footer-line-1'

prova a cercare questa e fammi sapere

Lia ha detto...

Amennn, dopo essermi cavata gli occhi per cercare i codici ce l'ho fatta!!Grazie mille ora mi piace un mondo. Sei un tesoro, un abbraccio e buon w-e!!

Tenebrae ha detto...

@lia: grazie, anche a te

Mammatrafficona ha detto...

Ho installato il widget e funziona benissimo!!! Grazie mille!!!
Una domanda: mi interesserebbe farlo comparire anche sull'homepage, e non solo sui singoli posts, è possibile?

Mammatrafficona ha detto...

Come non detto! Ci sono riuscita da sola! grazie ancora!

Andrea Rattacaso ha detto...

Ciao Tenebrae, potresti dirmi gentilmente come posso fare a modificare i titoli dei post correlati?Non capisco molto di CSS e riesco solo a cambiare il colore modificando:

#related-posts a:hover{
color: black;
}

Però se provo ad aggiungere un "font size: 11px;" non mi varia nulla

potresti dirmi dove sbaglio?

Alessandra ha detto...

Non so in cosa sbaglio ma neanche questo mi si visualizza, quando salvo compare solo la sritta , bo magari riprovo un altro giorno. Ciao Orazio e grazie sempre.

SE-Gen ha detto...
Questo commento è stato eliminato dall'autore.
Lucarus ha detto...

Sempre perfetto ;)

VALENTINA ha detto...

Ciao, ho un problema: di solito metto un'immagine per scrivere il titolo del post, inserendo quest'opzione, l'anteprima che dovrebbe risultare è quella di un'anteprima del blog in specifico (il che attrae sicuramente più di una normale scritta) invece io ho chiaramente il problema della visualizzazione della prima immagine (che per me è il titolo) del blog.
C'è un modo per risolvere la questione? Ti ringrazio in anticipo e ti chiedo se per favore puoi rispondermi con un commento al mio blog o con una mail a valetricomi@gmail.com

Venus ha detto...

Grazie! Ho inserito anche questo nel mio blog!

Yuanyuan Lin ha detto...

7.25lllllyuanmichael kors outlet online
michael kors outlet
mulberry outlet
mulberry uk
abercrombie and fitch
abercrombie outlet
abercrombie and fitch
abercrombie outlet
adidas outlet store
adidas outlet
adidas shoes
adidas trainers
adidas uk store
adidas uk
adidas wings shoes
adidas wings
air force 1 shoes
nike air force 1
air jordan 11
jordan 11
air jordan 13
jordan 13
air jordan 4
jordan 4
air jordan shoes for sale
air jordan shoes
air max 90
nike air max 90
air max 90
air max 90
asics,asics israel,asics shoes,asics running shoes,asics israel,asics gel,asics running,asics gel nimbus,asics gel kayano
asics
babyliss flat iron
babyliss pro
basketball shoes,basketball sneakers,lebron james shoes,sports shoes,kobe bryant shoes,kobe sneakers,nike basketball shoes,running shoes,mens sport shoes,nike shoes
7.25

Unknown ha detto...

kansas city chiefs jerseys weekly
new orleans saints jerseys and
michael kors handbags up
tiffany and co outlet is
michael kors outlet your
louis vuitton sacs and
cheap michael kors handbags business
nike store uk we
nike blazer post
salomon boots this


Prima di lasciare un commento, leggete qui

Posta un commento