Visualizzazione post con etichetta blogger. Mostra tutti i post
Visualizzazione post con etichetta blogger. Mostra tutti i post

domenica 18 ottobre 2009

Blogger: come eliminare il nome del blog dal titolo della pagina


Il titolo che Blogger visualizza sulle pagine dei suoi blog è composto dal nome blog seguito dal titolo del post (nel mio caso "The Monkey Beach: Titolo post").
Personalmente preferisco avere come titolo della pagina il titolo del post e sulla home il titolo del blog.



Quindi ora vediamo come eliminare il nome del blog dal titolo della pagina.


giovedì 11 giugno 2009

Blogger: ordinare gli "Articoli Correlati" presenti nei post

In un articolo precedente avevamo visto come inserire gli articoli correlati in fondo ad ogni post.
Oggi vediamo come fare in modo che gli articoli correlati vengano visualizzati in ordine alfabetico così da facilitare la lettura da parte dell'utente ed aumentare l'efficacia di questa funzionalità.
Gli step da seguire sono semplici:

  • Nella porzione di codice javascript inserita nella intestazione del blog, bisogna aggiungere due nuove funzioni e modificare la funzione printRelatedLabels(). Le modifiche sono evidenziate in rosso.
    <script type='text/javascript'>
    //<![CDATA[

    Array.prototype.remove = function(from, to) {
    var rest = this.slice((to || from) + 1 || this.length);
    this.length = (from < 0 ? this.length + from : from);
    return this.push.apply(this, rest);
    };

    function sortResult() {
    var tmp = new Array(0);
    var tmp2 = new Array(0);
    var nItems = relatedTitles.length;
    var minItem;
    var minItemIdx;

    for(var j = 0; j < nItems; j++) {
    minItemIdx = 0;
    minItem = relatedTitles[minItemIdx];
    for(var i = 1; i < relatedTitles.length; i++) {
    if(minItem > relatedTitles[i]) {
    minItemIdx = i;
    minItem = relatedTitles[minItemIdx];
    }
    }
    tmp.length += 1;
    tmp[tmp.length - 1] = relatedUrls[minItemIdx];
    tmp2.length += 1;
    tmp2[tmp2.length - 1] = relatedTitles[minItemIdx];
    relatedUrls.remove( minItemIdx );
    relatedTitles.remove( minItemIdx );
    }

    relatedTitles = tmp2;
    relatedUrls = tmp;
    }


    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 r = 0;

    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>
  • poi bisogna modificare la porzione di codice aggiunta la volta scorsa :
    <div><span class='post-related-articles'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='similiar'>
    <div class='widget-content'><br/>
    <h3 style='color:#FF9900;'>Articoli correlati</h3>
    <div id='data2007'/>
    <script type='text/javascript'>
    removeRelatedDuplicates();
    sortResult();
    printRelatedLabels();
    </script>
    </div>
    </div>
    </b:if>
    </span> </div>
  • salvete il nuovo modello
L'elenco degli articoli correlati è in ordine alfabetico.

lunedì 1 giugno 2009

Blogger: Rimuovere il Blogger Banner (o barra di navigazione)


I blog creati con Blogger hanno una NavBar che consente di contrassegnare, cercare e visualizzare altri blog. Comunque è possibile nascondere questa barra aggiungendo pochissimo codice:


  • fare il log in a Bloger
  • andare alla sezione Layout -> Modifica HTML qui sarà possibile vedere e modificare l'HTML del blog
  • è consigliato fare un backup del modello completo
  • copiare il codice evidenziato in rosso dopo l'intestazione del template
    ...
    <b:skin><![CDATA[/*
    -----------------------------------------------
    Blogger Template Style
    Name: Rounders
    Designer: Douglas Bowman
    URL: www.stopdesign.com
    Date: 27 Feb 2004
    Updated by: Blogger Team
    ----------------------------------------------- */

    #navbar-iframe {
    display: none !important;
    }

    /* Variable definitions
    ====================
    <Variable name="mainBgColor" description="Main Background Color"
    type="color" default="#fff" value="#ffffff">
    <Variable name="mainTextColor" description="Text Color" type="color"
    default="#333" value="#333333">
    ...

  • rimuovere il codice per rivedere di nuovo la navbar

giovedì 7 maggio 2009

Blogger: inserire annunci AddSense nei posts.


Se volete guadagnare qualche soldino dal vostro blog, vi consiglio di inserire degli annunci AddSense. Ovviamente la posizione migliore per un annuncio pubblicitario è all'interno dei post.
Gli step da seguire sono semplici:
  • prima di tutto, scegliete il tipo di annuncio che volete piazzare e recuperate lo script fornito da Google.

  • lo script così come fornito da Google non è utilizzabile all'interno dei post perchè racchiusi all'interno di tag commenti e quindi vengono ignorati dal motore di rendering di Blogger. Quindi è necessario trattare il codice sostituendo i carattesi speciali con gli equivalenti codici HTML
    (es. il simbolo < verrà sostituito con &lt; oppure " con &quot;) in modo da ottenere sul browser esattamente il codice originale. È possibile apportare le modifiche ai tag attraverso uno strumento reperibile a questo indirizzo: http://blogcrowds.com/resources/parse_html.php. In realtà è sufficiente cambiare <!-- ... --> con &lt;!-- ... --&gt; .

  • andare ora alla sezione Layout -> Modifica HTML del vostro blog. Dopo aver fatto un backup del modello completo, è necesario espandere i modelli widget spuntando il box in alto a sinistra.

  • Se volete inserire un annuncio sotto il titolo di ogni post della home page, cercate l'elemento
    <div class='post-header-line-1'/>
    ed inserite il codice modificato subito dopo questa riga.

  • Se invece volete inserire un annuncio sotto il titolo di un post quando esso viene selezionato (visualizzato da solo), bisogna racchiudete il codice modificato all'interno di una condiziona if :
    <b:if cond='data:blog.pageType == "item"'>

    (Inserite qui il codice adsense modificato)

    <b:else />

  • ora salvete il nuovo modello... dovreste vedere l'elenco gli annunci come avete tanto desiderato!!!

domenica 3 maggio 2009

Blogger: inserire gli "Articoli Correlati" alla fine di ogni post.


Per avere un blog di successo è necessario cercare di aumentare il numero di visite giornaliere ma anche fare in modo che i visitatori restino a lungo sul tuo blog trovando facilmente le notizie che cercano.
Un accorgimento che può aiutarti in questo compito è quello di mettere a disposizione dei visitatori un elenco di articoli correlati.
Il meccanismo di funzionamento è semplice ed è basato sulle etichette assegnate ad ogni post:
post con etichette comuni sono post simili quindi correlati.

Gli step da seguire sono semplici:
  • andare alla sezione Layout -> Modifica HTML e dopo aver fatto un backup del modello completo è necessario espandere i modelli widget spuntando il box in alto a sinistra.

  • ora cercate l'elemento </head> ed inserite il seguente codice subito prima di questa riga.
    <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>
  • adesso cercate questo la seguente porzione di codice
    <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
    <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 != &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&amp;max-results=10&quot;' type='text/javascript'/>
    </b:if>

    </b:loop>
    </b:if>
  • infine posizionatevi subito dopo l'elemento <div>...</div> che racchiude la porzione di codice modificata al punto precedente ed inserite il seguente codice
    <div><span class='post-related-articles'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='similiar'>
    <div class='widget-content'><br/>
    <h3 style='color:#FF9900;'>Articoli correlati</h3>
    <div id='data2007'/>
    <script type='text/javascript'>
    removeRelatedDuplicates();
    printRelatedLabels();
    </script>
    </div>
    </div>
    </b:if>
    </span> </div>


  • salvete il nuovo modello... dovreste vedere l'elenco degli articoli correlati subito dopo la lista delle etichette (come su questo post).

*************************************************************************************
UPDATE
*************************************************************************************