And84 - Mind: blogger

13 gennaio 2008

Post Espandibili per Blogger!!!

Una nuova funzione che ho inserito con l'anno nuovo, è quella dei post espandibili.

Infatti da oggi gli articoli troppo lunghi che pubblicherò, appariranno nella home solo come anteprime. Per chi segue questo blog con i feed RSS, ho aprirà il singolo post, vedra comunque l'intero articolo.

In fondo ad ogni anteprima, sarà presente un link che farà apparire l'intero articolo immediatamente, senza aprire altre pagine.

Ma veniamo a noi, ecco la procedura per inserire questa funzione nel vostro blog.

per prima cosa, andate su Modello->Modifica HTML, e salvate il vostro modello sul pc per mantenerlo in caso di errore, cliccando su"Scarica modello completo".
spuntate la casella "Espandi i modelli widget", poi trovate il tag <head> andate a capo e sotto inserite il codice seguente:
```
<script type='text/javascript'
src='http://www.anniyalogam.com/widgets/hackosphere.js' />
```
Salvate! Adesso, dovete trovare <div class="'post-body'">; scorrete la pagina nell' editor fino a trovare la parte indicata (fate riferimento allo screenshot successivo) e sostituitela con questo codice:
```
<div class='post-body' expr:id='"post-" + data:post.id'>
```
Andiamo a capo ed incolliamo nella nuova riga questo:
```
<b:if cond='data:blog.pageType == "item"'>
```

Andiamo a capo dopo <p><data:post.body/></p> (che lascerte inalterato) e incollate il codice seguente:

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Read More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Summary only...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>

Salvate! Ora l'ultimo passo, è quello di inserire in ogni post, che volete accorciare, scrivere questo codice:
```
Qui l'Anteprima
<span id="fullpost">
Qui il resto del post
</span>
```

Dopo tutta questa fatica anche voi avete i vostri "Post Espandibili", non c'è nient'altro da aggiungere, solo che dovrete scrivere l'anteprima da far apparire nella prima riga, e il resto del post a scomparsa nella terza riga.

Ringraziamenti per questa realizzazione:
Guesta guida è Liberamente tratta e personalizzata da http://sid05.blogspot.com sotto licenza Creative Commons .

8 gennaio 2008

Inserire gli "Articoli Correlati" nel Blog di Blogger.

Oggi vi presento una delle novità appena introdotte nel mio Blog, ovvero gli articoli correlati ad un post.

Navigando su molti blog, in cerca informazioni particolari, mi sono accorto che ciò che cercavo era spesso tra gli articoli correlati che appaiono in fondo ai ogni post.

Così ho deciso che questa funzione basata sui tags di ogni post, poteva essere utile a chi visita il mio blog.

Ora vi spiego come è "semplice" la procedura per inserire questa funzione.

per prima cosa, andate su Modello->Modifica HTML, e salvate il vostro modello sul pc per mantenerlo in caso di errore, cliccando su"Scarica modello completo".

trovate il tag <head> andate a capo e sotto inserite il codice seguente:

<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

Salvate! poi sempre su Modello->Modifica HTML, espandete i wid get spuntando l'apposita casella e cercate questo:

   <b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>

e sostituitelo con questo, basterebbe inserire il codice in grassetto:

    <b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

Ok, Salvate, fatto ciò, andate su Modelli->Aggiungi elemento a pagina, aggiungete un box javascript/HTML, posizionatelo immediatamente sotto al post dategli il titolo "Articoli Correlati"e all'interno scrivete:
```
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
```

Ora l'ultimo passo, andate su Modello->Modifica HTML, ri-espandete i widget e cercate il box appena creato, attenzione perché il tuo id='HTMLx' (la x un numero) potrebbe essere diverso dal mio. Per finire dovete solo inserire le righe in grassetto, e salvare:

<b:widget id='HTML13' locked='false' title='Related Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Dopo tutta questa fatica anche voi avete i vostri "Articoli Correlati", mi rimangono da fare solo alcune osservazioni: ovviamente gli articoli correlati appaiono solo quando si clicca su un post, nella home non sono presenti; per cambiare il numero di articoli da linkare potete intervenire nel terzo box alla voce allback=related_results_labels&max-results=10 cambiando il numero 10 con quello che preferite.

Ringraziamenti per questa realizzazione:
Guesta guida è Liberamente tradotta da Purplemoggy: Related Posts sotto licenza Creative Commons .

And84 - Mind

linguette

Cerca nel blog

13 gennaio 2008

Post Espandibili per Blogger!!!

8 gennaio 2008

Inserire gli "Articoli Correlati" nel Blog di Blogger.

Tag Cloud

Lettori fissi

Quanti siamo?