Tumblr hack & tutorial - 2/3

Proseguo con la miniserie dedicata a Tumblr. Con questo secondo post voglio fornire alcune indicazioni riguardo la sua personalizzazione; alcuni semplici hacks e brevi tutorial.

Se è vero che il minimalismo radicale è il principale motivo (o uno dei principali) del successo di Tumblr, è altrettanto vero che alcune funzioni di base sarebbero gradite; in molti vorrebbero i commenti, un campo per la ricerca, tag, titolo delle pagine, una navigazione più "ricca"...

» continua

Cerchiamo di andare con ordine, passo per passo.

Commenti

Tumblr non implementa i commenti. Non voglio discutere se sia più o meno giusto ma il dato nudo e crudo è quello. L' unico sistema è quello di rivolgersi altrove. La quasi totalità dei tumblr che hanno implementato i commenti ha scelto disqus; un sistema sicuramente evoluto e che piano piano compare anche su blog importanti. Personalmente non inserirò i commenti nel mio tumblr ma se cambiassi idea quella sarebbe la mia scelta (anche se Haloscan è in netto recupero).

Navigazione

L' inserimento degli archivi è sicuramente una buona mossa ma ancora si avverte la mancanza di un sistema efficiente di navigazione tra le pagine; sotto questa voce vi segnalo quindi tre hacks che miglioreranno l' usabilità del nostro tumblr. Sono operazioni piuttosto semplici da eseguire ma un minimo di attenzione non guasta.
Mi sento di darvi un consiglio, visto che andremo a scrivere nel modello e che la visualizzazione theme è pessima copiate e incollate il codice del vostro tumblr in un documento di testo, effettuate li tutte le modifiche e quindi tornate nell' editor e incollate il nuovo modello.

Le tre modifiche che segnalo sono l' inserimento di un contatore delle pagine, la funzione Shuffle che permette una navigazione in random tra le pagine ed infine l' inserimento di un motore di ricerca interno.

Del primo per la verità avevo parlato in precedenza, ma lo ripeto volentieri anche qui (e ringrazio Denis della citazione); si tratta di inserire un contatore delle pagine (del tipo pagina 1 di 30) e l' operazione è semplicissima. Una volta deciso dove collocare il contatore nella pagina inserite questa semplice riga:

pagina {CurrentPage} di {TotalPages}

Il secondo hack/tutorial è leggermente più complesso, ma nemmeno troppo. Trovate il post originale in inglese qui (grazie a Corax della segnalazione). Prima cosa da fare è inserire la funzione Javascript nella pagina, quindi una classe CSS. Risultato, un pulsante Shuffle che una volta cliccato aprirà una pagina a caso del vostro tumblr (non un singolo post ma una delle pagine navigabili nel modo next/previous); non importa dove inserirete lo script (nel body ovviamente) visto che il CSS successivo si occuperà di posizionare gli elementi caricati.

Questo è lo script (sostituite ***):

<script type="text/javascript">
function shuffle() {
var s1='<p class="shuffle"><a href="http://***.tumblr.com/';
var s2='</a></p>';
Total=0+{TotalPages};
if(Total>0) {
  var r=Math.ceil(Math.random() * Total);
  document.write(s1+'page/'+r+'">'+'<img src="http://data.tumblr.com/OY9NpboAI2s341ccHnGYcjf0_500.png">'+s2);
}
}
shuffle();
</script>

Quindi, nel foglio di stile, inserite il codice seguente:

p.shuffle {
position: fixed;
top: 3px;
left: 3px;
_position: static;
_margin: 3px;
_text-align: right;
z-index: 1;
}

Il terzo hack permette l' inserimento di un campo di ricerca che caricherà i risultati direttamente nella pagina e senza refresh. Ecco il post originale di Jacobd (qui una versione più "leggibile") e anche qui un grazie a Tommaso che per primo lo ha tradotto in italiano.

Partiamo copiando il seguente codice nella head del nostro modello:

<script type="text/javascript" src="http: //mirzaisziked.googlepages.com/tumblr.js"></script>

Quindi inserite questo codice dove volete che appaia il campo di ricerca:

<div style="margin-top:  5px">
<div class="searchbox" id="mainsearch">
Search<script type="text/javascript">Tumblr.searchBox();</script>
</div></div>

Con queste modifiche ora il nostro tumblr è senza dubbio più funzionale.

Titolo delle pagine

Come nel primo dei tre esempi sopra, anche in questo caso useremo le variabili di tumblr (consultabili nella sezione Custom Themes) per inserire il titolo del post nelle singole pagine (sostituendo il titolo del tumblr). Dobbiamo sostituire solo la parte relativa al titolo della pagina quindi, nella head del vostro modello sostituite <title>{Title}</title> con:

<title>{Title}{block:PostTitle} - {PostTitle}{/block:PostTitle}</title>

Ora al posto di un criptico Titolo Tumblr avrete il titolo del vostro post (anche se vale solo per i post testuali o normal text)

Tag as Classes

Con la terza versione è possibile taggare i nostri contenuti anche se ancora la funzione si limita solo a quello. Però è possibile utilizzare i tag come classi CSS; sfruttando questa caratteristica (e soprattutto grazie al tutorial di Cameron I/O) ho inserito nella mia digital{wood}moleskine un sistema per votare i link che segnalo (che è un po' come commentarli). Praticamente assegnando una tag al link inserisco il mio voto, questo il risultato:

Naturalmente avete bisogno delle immagini, supponendo una scala di cinque vi serviranno 6 immagini (da voto 0 a voto 5, l' esempio sopra è 3).

La prima cosa da fare è aggiungere il comando {TagAsClasses} dove vogliamo caricare le classi; nel caso specifico ho scelto di applicarlo solo ai link ma potete utilizzarlo per ogni tipo di contenuto. Cercate quindi nel corpo (body) del modello la parte relativa ai link, qualcosa di questo tipo:

{block:Link}
<div class="link">...

Ora basta aggiungere il comando insieme alla classe link, in questo modo:

{block:Link}
<div class="link {TagsAsClasses}">...

A questo punto dobbiamo creare 6 classi CSS ognuna delle quali visualizzerà un voto da zero a cinque. Naturalmente dovremmo taggare i link (ahime non dal bookmarklet) con lo stesso nome utilizzato per la singola classe. Di seguito trovate il CSS che ho utilizzato sul mio tumblr, dovete chiaramente modificare il percorso delle 6 immagini (in caso contrario utilizzerete le stesse che utilizzo io, no problem, fate voi):

body div.post div.voto0 {
background-image: url(http://lab.sid05.com/MYTumblr/voto0.png) ;
         background-position: right top;
background-repeat: no-repeat;
}
body div.post div.voto1 {
background-image: url(http://lab.sid05.com/MYTumblr/voto1.png);
background-position: right top;
background-repeat: no-repeat;
}
body div.post div.voto2 {
background-image: url(http://lab.sid05.com/MYTumblr/voto2.png);
      background-position: right top;
background-repeat: no-repeat;
}
body div.post div.voto3 {
background-image: url(http://lab.sid05.com/MYTumblr/voto3.png);
     background-position: right top;
background-repeat: no-repeat;
}
body div.post div.voto4 {
background-image: url(http://lab.sid05.com/MYTumblr/voto4.png);
    background-position: right top;
background-repeat: no-repeat;
}
body div.post div.voto5 {
background-image: url(http://lab.sid05.com/MYTumblr/voto5.png);
    background-position: right top;
background-repeat: no-repeat;
}