Visualizzazione post con etichetta html. Mostra tutti i post
Visualizzazione post con etichetta html. 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.


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
*************************************************************************************

domenica 29 marzo 2009

Ripulire l'HTML generato da Word con Tidy

Come sapete Microsoft Word consente di salvare i suoi documenti anche in formato HTML, quindi subito pronti per il web. Fra le opzioni disponibili c'è anche quella di salva come "Pagina web (filtrata)" che consente di generare un HTML più pulito. Comunque sia, l'HTML generato è pieno di codice inutile ed illeggibile.

HTML Tidy nasce proprio per questo scopo: correggere l'HTML non valido e riordinare il codice sorgente di una pagina. Inizialmente sviluppato da un membro del W3C, è poi passato nelle mani dei volontari di sourceforge. Scritto in C è un'applicativo ma anche una libreria.

L'applicativo è a linea di comando ed ha tante opzioni. Ad esempio si può ripulire un html utilizzando un file di configurazione in questo modo:
tidy -config config.txt -m test.html

o passando direttamente i parametri
tidy –m –-uppercase-tags no –-word-2000 yes test.html

Nota: esiste uno speciale parametro word-2000 utilizzato per rimuovere tutte le cose in più inserite da Word durante il salvataggio.