Sommario in Blogspot (more)

Da qualche mese Blogger ha fatto un piccolo passettino verso la standardizzazione del modello blog, proponendo agli utilizzatori la possibilità di utilizzare il tasto:

<!– more –>

Ovvero quel tasto che permette di inserire una interruzione in un post e visualizzare in homepage solo l’incipit / sommario che abbiamo deciso, invitando l’utente alla pagina del singolo post, per leggere l’articolo completo.

Purtroppo non è tutto così immediato e saranno necessarie alcune facili operazione per consentirvi di farlo funzionare a regola d’arte.

Questo è il tasto "more" di blogspotInserire il "more" nel post

Questa è realmente l’operazione più banale: nell’editor HTML (WYSIWYG – What You See Is What You Get – Quello che vede è quello che hai creato) è apparso un nuovo pulsantino fatto a pagine- strappate. E sufficiente selezionare il punto desiderato all’interno del post e cliccare su quel pulsante. Il suo corrispondente in linguaggio HTML (per blogger) è un commento che assume questa forma:

<!– more –>

 

Appunto tecnico (20091022-12.08)

Kaeel nei commenti ci segnala delle incompatibilità con alcuni layout. Come ho già spiegato nei commenti non è un problema del <!– more –> ma di dove il more è inserito. Se viene inserito all’interno di un TAG Html aperto es.:

<div class="miaclasse"><!-- more --></div>

Il risultato sarà che nella homepage verrà visualizzato solo

<div class="miaclasse">

Senza il resto e senza la chiusura di se stesso. Se la classe miaclasse definisce il testo rosso, il resto del sito apparirà rosso. Dovete quindi porre un po’ di attenzione, ma solamente se inserite il more in un testo che avete copiaincollato da Word o da altre fonti testuali, perchè l’editor wysiwyg non le pulisce.

Il consiglio che vi do è di incollare sempre testo non direttamente da word o dai siti ma di eseguire questi passi:

  1. copio il testo dalla fonte
  2. lo incollo su Notepad, lo ricopio
  3. lo incollo sull’editor di Blogger

In questo modo qualsiasi formattazione originale viene persa!

 

Inserire il testo per saltare alla pagina singola

Per personalizzare il link verso la pagine del singolo post, contenente il vostro intero articolo, è necessario entrare nell’interfaccia di amministrazione di Blogspot (www.blogger.com) quindi Layout e cliccare "modifica" all’interno del riquadro "post sul blog". Quindi personalizzare il messaggio nel campo input "Testo del link della pagina di post" come mostrato in figura.

Configurare il tag More

 

Modificare il template di blogger (html)

Ahimè per i più dummy o neofiti di blogger ora bisogna mettere le manine sul template, sempre che il vostro blogspot template non sia già pronto. Quindi il consiglio è questo: dopo aver inserito un "more" in un post, fate in modo di verificare se già funziona altrimenti prepariamo il template.

Accediamo alla interfaccia di amministrazione di BloggerLayout > Modifica HTML, quindi checkare (selezionare) "Espandi i modelli widget".

Regola uno di ogni modifica, fate un backup: o scaricate il template cliccando su "scarica modello completo", o ancora più semplicemente selezionate tutto il testo/codice del modello, salvatelo in un file di testo (usate notepad, notepad++, dreamweaver… quello che volete tanto l’HTML è banale testo ASCII) e siamo pronti per fare del casino. Se qualcosa non dovesse funzionare ripristinate il precedente template che abbiamo salvato, copiaincollando dal file di backup, nella textarea e ripubblicando.

Arriviamo al dunque. Il testo del vostro post viene pubblicato dal template tramite questo codice:

<data:post.body />

Questo deve essere mantenuto, ma dobbiamo aggungere del codice che verifica se esiste il "More" e pubblica la frase che precedentemente avete configurato. Questo codice lo mettiamo immediatamente dopo <data:post.body>, ma subito dopo, come ho fatto io qui:

<data:post.body />
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >

All’interno del div classificato "jump-link" apparirà la frase che avete configurato. Se volete potete modificare il CSS per definire lo stile di tale link. Se ad esempio volete il link su sfondo rosso, e nero al passaggio del mouse potete scrivere all’interno di <style…> </style>:

.jump-link a{
background-color: red;
padding: 3px;
color: white;
text-decoration: none;
}
.jump-link a:hover{
background-color:black;
}

 

Amici miei ora abbiamo effettivamente finito. Non resta che cliccare su "Salva modello". Se avete dubbi però mi raccomando usate "Anteprima".

L’articolo ufficiale a cui fare riferimento è "Creating ‘After the jump’ summaries".

 

Loading Facebook Comments ...

4 pensieri su “Sommario in Blogspot (more)

  1. Kaeel

    Occhio che questa guida può creare problemi.
    Decine di utenti hanno avuto problemi con le sidebar, che venivano spostate da destra in basso alla pagina (e non c’era apparentemente verso di aggiustarle).

    Il problema si risolve facendo attenzione, quando si copia-incolla del testo formattato su altri editor (MS word, openoffice, altre pagine web), ad inserire il manualmente, dall’editor HTML, curandosi che non finisca dentro qualche .
    Non dovrebbero invece esserci problemi se si utilizza l’editor integrato per tutto.

    Ultima nota importante: questa “correzione” va applicata a tutti gli articoli per cui si vuol creare il sommario (se ne avete già modificati un discreto numero e si è verificato il problema segnalato, può esser un grande smazzo)

    Rispondi
  2. Merlinox Autore articolo

    @Kaeel hai fatto bene a farlo notare, ma non è certo un problema del “More”. Lui tronca, se poi uno lo inserisce dentro a qualche tag aperto e non chiuso il casino è inevitabile. E’ per quello che, ad esempio, su molti wordpress multimano si configura il wysiwyg in modo che pulisca quello str***o di Word 🙂

    Comunque vedo di apportare un appunto!

    Rispondi
  3. Kaeel

    Buona idea 🙂
    L’ho fatto notare perché, dopo aver seguito questa guida ( http://creareblog.blogspot.com/2009/09/post-espandibili-finalmente-nativi-su.html ) che tratta lo stesso argomento, abbiam avuto in molti quel problema e non se ne saltava fuori.
    Poi è venuto fuori che il problema era arcinoto su wordpress ed abbiam risolto; l’autore ha poi pubblicato questo post ( http://creareblog.blogspot.com/2009/10/come-evitare-le-colonne-che-vanno-sotto.html ) in cui spiega quanto ho sostanzialmente riportato nel commento precedente 🙂

    Rispondi

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *