Pubblicato il 10/11/13e aggiornato il

Mappa di un blog su Blogger per post, etichette e parole chiave.

Mappa del sito per i lettori con i post elencati in ordine di pubblicazione, di etichetta e di parole chiave con le relative miniature.
Le sitemap del blog inviate a Google servono per indicizzare meglio e più velocemente il nostro sito mentre le mappe del blog a disposizione dei lettori hanno la funzione altrettanto importante di presentare al meglio tutti i contenuti del nostro sito per farli rimanere più a lungo in modo da aumentare il tempo medio di permanenza e di diminuire la frequenza di rimbalzo che sono parametri molto importanti in ottica SEO per il posizionamento degli articoli del sito.

Dopo aver presentato una mappa del sito testuale, una mappa del sito per etichetta e una mappa del sito con miniature vada a presentare un compendio di tutte queste opzioni. Si tratta infatti di pubblicare una pagina statica con mirati strumenti di ricerca per i lettori che potranno non solo visualizzare tutti i contenuti ma anche effettuare delle ricerche visive molto più efficaci di quelle classiche

mappa-sito

Nella parte alta del layout saranno visualizzate le opzioni:
  1. Ordina gli articoli per data - Si potrà scegliere tra ULTIMI ARTICOLI e AGGIORNAMENTI. Nel primo caso saranno elencati tutti i post con relative miniature a partire dall'ultimo pubblicato mentre nel secondo caso saranno elencati gli ultimi articoli che sono stati aggiornati.
  2. Filtra i post per etichette - Si aprirà un menù verticale con l'elenco di tutte le categorie presenti nel blog. Il lettore potrà selezionarne una per vedere elencati tutti i post che la contengono
  3. Ricerca per parole chiave - Si potrà digitare una parola chiave e pigiare su Invio per visualizzare l'elenco di tutti i post che le siano pertinenti.

Di default vengono visualizzati solo 30 elementi ma il lettore potrà cliccare su Post Successivi ▼ per visualizzarne altri 30 e così via. Il numero 30 può essere modificato

post-successivi

Per la creazione di questa eccellente mappa del sito si va su Pagine > Nuova Pagina > Pagina vuota e si clicca su HTML accanto a Scrivi. Nell'Editor si incolla questo codice

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<br /></div>
<style type="text/css">
#resultDesc {
    margin:0 30px;
    padding:0 0;
    border-bottom:4px solid #cbe5fd;
    display:none;
}
#resultDesc span {
    display:block;
    margin:0 0;
    padding:5px 10px 7px;
    color:#cbe5fd;
}
#feedContainer {
    display:block;
    clear:both;
    margin:0 30px;
    padding:0 0;
    overflow:hidden;
    position:relative;
    border:1px solid #cbe5fd;
    border-top:none;
    text-shadow:0 1px 0 rgba(0, 0, 0, .4);
}
#feedContainer:after {
    content:"";
    display:block;
    width:1px;
    height:100%;
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    background-color:#cbe5fd;
}
#feedContainer li {
    list-style:none;
    margin:0 0;
    padding:0 0;
    border-top:1px solid #cbe5fd;
    color:#999;
    width:50%;
    float:left;
    display:inline;
}
#feedContainer li .inner {
    margin:15px 16px;
    height:120px;
    overflow:hidden;
    word-wrap:break-word;
    text-overflow:ellipsis;
}
#feedContainer li a {
    text-decoration:none;
    color:#cbe5fd;
}
#feedContainer li a:hover {
    text-decoration:none;
    color:##cbe5fd;
}
#feedContainer li a.toc-title {
    font-weight:bold;
    font-size:12px;
    margin:0 0;
}
#feedContainer li .news-text {
    margin:10px 0 0
}
#feedContainer li a img {
    margin:0 10px 0 0;
    padding:4px 4px;
    background-color:#cbe5fd;
    border:1px solid #111;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    -webkit-box-shadow:0 1px 0 #444;
    -moz-box-shadow:0 1px 0 #444;
    box-shadow:0 1px 0 #444;
    float:left;
}
#feedNav {
    margin:10px 30px 0;
    text-align:center;
    font:normal bold 12px/30px Verdana, Arial, Sans-Serif;
}
#feedNav a, #feedNav span {
    background-color:#cbe5fd;
    padding:0 0;
    color:#999;
    text-decoration:none;
    display:block;
}
#feedNav a:hover, #feedNav a:active {
    background-color:black;
    color:white;
    border:none !important;
}
#feedNav span {
    cursor:wait
}
#table-outer {
    padding:7px 10px;
    margin:30px 30px 0;
}
#table-outer input {
    display:inline-block;
    vertical-align:top;
    margin:0 2px 0 0;
    padding:0 0;
}
#table-outer table {
    border:none
}
#table-outer td {
    padding:2px 2px;
    border:none;
}
#table-outer label {
    font-weight:bold;
    color:#999;
    text-shadow:0 1px 0 rgba(0, 0, 0, .4);
    display:block;
    text-align:right;
    margin:0 10px 0 0;
}
#table-outer select[disabled] {
    opacity:.4
}
#postSearcher {
    display:block;
    margin:0 0;
    padding:0 0;
}
#postSearcher input, #table-outer select {
    width:180px;
    background-color:#111;
    border:none;
    display:block;
    margin:0 0;
    padding:5px 5px;
    font:normal normal 10px Tahoma, Verdana, Arial, Sans-Serif;
    text-transform:uppercase;
    color:#777;
    outline:none;
    -webkit-box-shadow:inset 0 1px 3px black, 0 1px 0 #444;
    -moz-box-shadow:inset 0 1px 3px black, 0 1px 0 #444;
    box-shadow:inset 0 1px 3px black, 0 1px 0 #444;
}
#postSearcher input {
    width:170px;
    padding:5px 5px;
}
#postSearcher input:focus, #table-outer select:focus {
    background-color:#090909;
}
@media (max-width:800px) {
    #feedContainer li {
        float:none;
        display:block;
        width:auto;
        height:auto;
    }
    #feedContainer:after {
        display:none
    }
}
</style>
<script type="text/javascript">
//<![CDATA[
var tocConfig = {
url: "http://nuovo-blog-di-prova.blogspot.com",
feedNum: 30,
labelName: false,
numChars: 0,
thumbWidth: 80,
navText: "Post Successivi ▼",
frontText: "Post Precedenti ▲",
resetToc: "Reset",
noImage: "https://lh4.googleusercontent.com/-aGHjos3Ic8M/Un9ObPPMebI/AAAAAAAAkxM/FfnKm9-FfDg/s425/bottone-blog.png",
loading: "<span>Sto caricando ...</span>",
searching: "<span>Ricerca ...</span>",
noResult: "Non ci sono risultati con questa query"
};
//]]>
</script>
<br />
<div id="table-outer">
<table border="0">
        <tbody>
<tr>
                <td><label for="orderFeedBy">ORDINA GLI ARTICOLI PER DATA:</label>
                </td>
                <td><select id="orderFeedBy">
                        <option selected="" value="published">ULTIMI ARTICOLI</option>
                        <option value="updated">AGGIORNAMENTI</option>
                    </select>
                </td>
            </tr>
<tr>
                <td><label for="labelSorterSelect">FILTRA I POST PER ETICHETTE:</label>
                </td>
                <td><span id="labelSorter"><select disabled="" id="labelSorterSelect"><option selected="">CERCA...</option></select></span>
                </td>
            </tr>
<tr>
                <td><label for="feed-q-box">RICERCA PER PAROLE CHIAVE:</label>
                </td>
                <td><form id="postSearcher">
<input id="feed-q-box" type="text" />
                    </form>
</td>
            </tr>
</tbody>
    </table>
</div>
<br />
<header id="resultDesc"></header>
<br />
<ul id="feedContainer"></ul>
<div id="feedNav">
</div>
<script src="https://sites.google.com/site/progetto3322/archivio/mappa-sito.js" type="text/javascript"></script></div>

Si pubblica la pagina. Oltre alla personalizzazione dei codici dei colori possono essere modificate le espressioni visualizzate nella mappa del sito. È necessario sostituire l'URL del nostro sito a quello del blog di prova che ho usato come test

Gli altri parametri più importanti riguardano l'URL della immagine visualizzata di default quando non ce ne fossero nel post e il numero di articoli visualizzati per volta (30). I possessori di un blog con dominio personalizzato dovranno scaricare il file javascript evidenziato di giallo incollandone l'URL nel browser e cliccando su Invio. Tale file dovrà essere caricato nella cartella Public di Dropbox o su un dominio personale per poi ottenerne l'URL diretto da sostituire nel codice.
Fonte | DHF Web -




22 commenti :

  1. Molto bella anche questa mappa. Ne sai sempre una più del diavolo. ;)

    RispondiElimina
  2. Bellissima. Utilizzata. Unico piccolo problema: è possibile togliere la scritta con il numero dei commenti? Grazie e ciao.

    RispondiElimina
  3. L'ho caricata su "il paese degli Sputnik" e mi pare che faccia un'ottima riuscita, grazie! :)

    RispondiElimina
  4. che bello!! mi piace molto l'ho subito inserito!! ora devo modificare un po' i colori...
    grazie!!!
    vedo se riesco ad inserirlo anche sul mio blog giallo zafferano, grazie!! :)
    buona domenica!!

    RispondiElimina
  5. @# Francesco
    Lo script l'ho preso da un blog indonesiano. Per non mostrare commenti prova a scaricare il javascript a aprirlo con Notepad++ per poi cancellare questa stringa
    "</a><strong> - (" + commentNum + ")</strong><br>" +
    Devi quindi salvare il file e caricarlo su un altro hosting come illustrato nel post. Non ho testato quindi non so se funzionerà.

    RispondiElimina
  6. Grazie. A posto. Gentilissimo come al solito.

    RispondiElimina
  7. con le dinamic view però non funziona :(

    RispondiElimina
  8. Grazie Ernesto, sempre validi i tuoi suggerimenti. Ti chiedo, però, una cosa. Io non riesco a modificare un colore, perchè non capisco dove inserirlo. Vedo di spiegarmi riferendomi alla demo.
    Nei tre riquadri per la ricerca, riesco a modificare lo sfondo e il colore del testo, ma non quello della barra che evidenzia le varie categorie (che è in azzurro). Cosa mi sono persa?
    Grazie

    RispondiElimina
    Risposte
    1. Prova a scaricare questo javascript
      https://sites.google.com/site/progetto3322/archivio/mappa-sito.js
      incollandolo nel browser e cliccando su Invio. Lo puoi modificare cercando tutti i colori che intendi cambiare che sono facilmente riconoscibili come codice. Poi il file lo carichi su Google drive
      http://www.ideepercomputeredinternet.com/2014/01/google-drive-hosting-hotlink.html
      @#

      Elimina
    2. Scusa il ritardo nella risposta. Ho provato a fare quello che mi dici qui sopra, scaricando quello che mi dici. Non mi ritrovo per nulla e non vedo dove diavolo sono i codici dei colori. Ho le visioni oppure ho sbagliato qualcosa?

      Elimina
    3. Forse sono stato troppo frettoloso nella risposta. In effetti i colori sono tutti nel CSS e quasi tutti con lo stesso cbe5fd
      Non ti prometto nulla ma se ho un po' di tempo e di voglia ci tornerò su questo widget
      @#

      Elimina
    4. In effetti ci sono tutti. L'unico che non riesco a trovare (possibile che non lo veda?) è quello per modificare appunto la barra che evidenzia le varie categorie che rimane in azzurro, colore che non si lega per nulla ai colori del mio blog. Per il momento, quindi, mi studio un'altra soluzione. Ovviamente continuo a seguirti!!! Grazie

      Elimina
  9. Ciao, ti chiedo una mano perché non riesco a trovarlo. Vorrei scurire il colore del titolo degli articoli che compaiono sotto alla ricerca, ma non riesco a individuare la stringa giusta. Mi aiuti? Grazie.

    RispondiElimina
  10. Il colore del titolo è lo stesso per tutti i post e devi andare su Modifica > Personalizza > Avanzato. Prima di procedere salva il modello per sicurezza
    @#

    RispondiElimina
    Risposte
    1. Intendevo riferito a questo post. Sono riuscita a cambiare il colore delle caselle di ricerca, invece i titoli delle miniature che vengono fuori sono troppo chiari e ne mio blog si leggono poco. Non riesco a capire qual è il colore che devo modificare nel codice che hai messo qui.
      Grazie (e scusami, sono un disastro)

      Elimina
    2. Non avevo capito. Cambia il codice dei colori a questi due blocchi di codice

      #feedContainer li a {
      text-decoration:none;
      color:#cbe5fd;
      }
      #feedContainer li a:hover {
      text-decoration:none;
      color:##cbe5fd;

      Il primo colore è quello che si vede in situazione normale e il secondo quello che si vede quando si punta il link con il mouse
      @#

      Elimina
    3. Mi ero spiegata malissimo io! Grazie mille.

      Elimina
  11. ciao, mi piacerebbe usarlo sul mio blog ma non so perché non funziona... lo trovi qui http://www.maninellaterra.org/p/anteprima.html grazie per l'aiuto

    RispondiElimina
    Risposte
    1. Il perché non funziona è spiegato nell'ultimo paragrafo del post. Hai un dominio personalizzato quindi i javascript caricati su Google Sites non funzionano. Puoi usare la cartella Public di Dropbox oppure usare Google Drive per caricarvi il javascript
      http://www.ideepercomputeredinternet.com/2014/07/hotlink-google-drive.html
      @#

      Elimina
  12. https://docs.google.com/file/d/0BwQnfaw7tGuUS21PYlhUdF9NUm8/edit
    può essere questo l'url diretto e in che parte del codice va sostituito?

    RispondiElimina
    Risposte
    1. No. Devi seguire il post il cui URL è incollato nel commento 11.a. L'URL diretto di Google Drive deve terminare con nomefile.js non con edit
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.