Personalizzare il widget Etichette di Blogger

Il widget Etichette di Blogger può avere per il lettore appena arrivato sul nostro blog un aspetto un po' confusionario, soprattutto quando i tag sono molti. Ma come blogger non vogliamo creare disorientamento, al contrario vorremo far sentire chi arriva sulla nostra pagina pienamente a suo agio. Una delle cose che possiamo fare per raggiungere questo obiettivo è rendere i contenuti facilmente accessibili. Quindi ecco come personalizzare il widget delle etichette perché sia un po' più organizzato.

Prima di tutto è necessario inserire il widget in questione: dal menù di Blogger selezioniamo Layout > Aggiungi un gadget > Etichette. Quindi spuntiamo l'opzione Nuvola.

Adesso andiamo a prendere il codice HTML del blog e con Ctrl+f cerchiamo rapidamente la seguente linea: ]]></b:skin>

Proprio appena sopra di essa incolliamo il codice riportato qui sotto: 

.label-size{

position:relative;

margin:0;

padding:0;

}

.label-size a{

float:left;

padding:5px;

margin:5px;

font-size:15px;

}

#Label1 a{

color:black;

font-weight:normal;

background:white;

border-radius:0px;

padding:7px;

margin-bottom:10px;

text-transform:uppercase;

}

Adesso non resta che dare un'occhiata all'anteprima (perché non si sa mai) e salvare. 

In alternativa (se non si vuole usare l'HTML) lo stesso identico codice può essere inserito in Modello > Personalizza > Avanzato > Aggiungi CSS. Il risultato sarà lo stesso.

Modificando le due parti evidenziate in giallo è possibile cambiare il colore dei caratteri e dello sfondo (meglio usare il codice HTML del colore, ad es. #ffffff per il bianco). Allo stesso modo anche gli altri parametri possono essere modificati a piacimento ed adattati a seconda della esigenze.  

Questo è tutto! Piuttosto facile, no?!

Trasforma il tuo blog in un'applicazione per iPhone e iPad

Forse con questo titolo potrei averti tratto un po' in inganno, ma quello che intendo fare con questo post è spiegare come realizzare un'icona, del tutto simile a quelle delle altre app che hai su iPad ed iPhone, che consente ai lettori di accedere rapidamente al tuo blog (senza nemmeno dover aprire Safari). 

Per prima cosa dovrai creare un'icona con Gimp, Photoshop o altro. Come dimensione 150x150 vanno benone. 

E, se posso darti un consiglio, cerca di fare in modo che l'icona rispecchi lo stile del tuo blog. 

Una volta pronta l'icona, vai nel codice HTML del tuo blog ed immediatamente sotto <header> incolla la seguente striscia di codice: 

<link href='http://url-to-your-image.com/your-image.jpg' rel='apple-touch-icon-precomposed'/>

La parte evidenziata in giallo dovrà essere sostituita con l'url dell'icona da te precedentemente creata.

Quindi non rimane altro da fare se non salvare. 

Ed ora prendi il tuo iPhone/iPad, apri Safari e cerca il tuo blog. 

Rimanendo sulla pagina principale del tuo blog, clicca sull'icona di condivisione/esportazione di Safari e poi scegli Aggiungi a Home. Si aprirà un'altra finestra in cui, se vorrai, potrai cambiare il nome dell'icona. Se invece ti va bene così com'è clicca immediatamente su Aggiungi. 

Adesso l'icona da te creata comparirà tra le altre app presenti sul tuo dispositivo e funzionerà come un link veloce: cliccandoci sopra si aprirà immediatamente, per te ed i tuoi lettori, in Safari la pagina del tuo blog. 

Vuoi un esempio pratico? Prova a fare un giro su questo blog da iPad o iPhone! ;)

PS: questa procedura è valida anche per i dispositivi Android. 

La bellezza dei social network

Sono una persona curiosa, in particolare per quanto riguarda il mondo del Web. Questa mia curiosità mi ha spinto ad utilizzare praticamente tutti i social network (e anche ad aprire questo blog!) perché volevo scoprire il loro funzionamento.

Utilizzandoli dall'interno mi sono resa conto di come molti in realtà i sociali network non sappiano usarli. Ed è quindi ovvio il fatto che nemmeno si rendono conto del loro grande potenziale. 

È una cosa che ho notato un po' su tutte le piattaforme ma, devo dirlo, maggiormente su Facebook. 

Molto spesso vengono pubblicati aggiornamenti assolutamente privi di interesse. I più gettonati? Sono i classici "buongiorno", "buona notte", "buon appetito", "ho tanta fame"…senza l'aggiunta di altri contenuti. Totalmente inutili, ne converrete.

E quando la maggior parte delle persone usa i social network per condividere cose del genere diventa difficile contraddire quelli che, dopo averti chiesto in cosa consistano Twitter, Facebook e compagnia bella, ti dicono "Ma a me cosa importa di quello che sta facendo Caio?!".

I sociali network diventano un fantastico mezzo di condivisione quando vengono usati in maniera costruttiva, creativa. Quindi evitando le banalità estreme, puntando invece su commenti originali, interessanti, divertenti, che possono coinvolgere il lettore…

Ciò non significa che siamo costretti a snocciolare frasi memorabili in continuazione, ma semplicemente che bisogna valutare quello che si sta per scrivere. E se non si ha nulla da dire, il silenzio è la migliore delle soluzioni: non scrivere è diritto dello scrittore quanto non leggere e non finire il libro lo sono del lettore.

Ma la vera potenzialità dei sociali network è il dialogo. E con dialogo non intendo solo chiacchierare con le amiche e mettersi d'accordo su come trascorrere il sabato sera. Twitter e gli altri social diventano interessanti quando ognuno condivide le esperienze proprie e degli altri. Massima importanza dovrebbero quindi avere i link (possibilmente contestualizzati) e i collegamenti di ogni tipo, perché i social network diventano davvero social quando capiamo di non esserci soltanto noi e cominciamo ad aprire i nostri orizzonti.

Questa è la mia, discutibilissima, opinione. 

E tu cosa ne pensi? Quali ritieni essere i lati negativi e quali quelli positivi dei social network? Ed in che modo li usi? 

Come inserire il pulsante "Torna su"

Tempo fa mi era stato chiesto di spiegare come inserire un pulsante "Torna su" nel proprio blog (come quello che vedete qui in basso a sinistra), ed ora che Cris ha di recente rinnovato la richiesta, mi sono finalmente decisa. Ed eccomi qui, a cominciare la domenica con un tutorial facile facile! :)

Per inserire un pulsante "Torna su" (ovvero un'icona, una freccia o altro su cui cliccare per tornare in cima alla pagina) in un blog di Blogger come prima cosa bisognerà creare il pulsante in questione. Su internet se ne troveranno sicuramente molti già fatti, ma a farne uno personalizzato con Photoshop, Gimp o altro ci va un attimo. Io ho realizzato un cerchietto azzurro con dentro una freccetta che punta in alto, ma voi potete farlo in mille modi diversi.

Adesso possiamo entrare in Blogger e dal menu selezionare Layout > Aggiungi un gadget > HTML/Javascript. 

All'interno del gadget andremo a copiare il codice riportato qui sotto, andando a sostituire alla parte in rosso l'URL del pulsante da noi prima creato.

<span><a href='#' style='position: fixed; bottom:20px;right:20px;' title='Torna su'><img src='LinkPulsante' style='border: none;'/></a></span>

Ora il vostro pulsante "Torna su" dovrebbe comparire in basso, sul lato destro, del vostro blog. Per modificarne la posizione dovrete andare a cambiare le coordinate riportate nel codice (sono i numeri evidenziati in giallo). Per spostare il pulsante da destra a sinistra sarà sufficiente sostituire "right" con "left".

Come sostituire con immagini i link "Post più recenti/vecchi"

Al fondo del nostro blog (mi riferisco a Blogger), dopo tutti i post, ci sono tre link: Post più recenti, Home e Post più vecchi (come nell'immagine qui sotto). 

Se lo si desidera, questi link possono essere facilmente sostituiti con immagini create da noi. Per esempio io li ho sostituiti con le due scritte newer e older realizzate con lo stesso font usato per il titolo del blog (come potete vedere anche nell'immagine qui sotto) e ho tolto il link Home perché in basso a sinistra ho già un bottone che svolge la stessa funzione.

Naturalmente la prima cosa da fare sarà creare le immagini che vogliamo utilizzare (possono essere per esempio scritte, come nel mio caso, oppure semplici frecce...) servendoci di programmi come Photoshop o Gimp (ognuno può scegliere di lavorare con quello con cui si trova meglio). 

Una volta create le nostre immagini dobbiamo inserirle in Photobucket (o simili) perché di esse ci servirà l'URL. Secondo me però la soluzione più rapida per ottenere l'URL di un'immagine è quello di caricarla in un post (esattamente come faremmo se dovessimo pubblicare un post sul nostro blog) e quindi cliccare sopra l'immagine con il tasto destro del mouse e scegliere Copia indirizzo. Ovviamente il post non dovrà essere pubblicato ma conservato nell'archivio.  

Adesso, in Blogger, possiamo andare in Modello > Modifica HTML. La striscia di codice che dobbiamo cercare è questa: <b:includable id='nextprev'> (e cliccando Ctrl + F la potremo trovare rapidamente). Questa linea di codice dovrà essere sostituita con il codice riportato qui sotto:

<b:includable id='nextprev'>
<div id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<a expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' id='blog-pager-newer-link'>
<img src='URL FRECCIA SINISTRA'/></a>
</b:if>
<b:if cond='data:olderPageUrl'>
<a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='blog-pager-older-link'>
<img src='URL FRECCIA DESTRA'/></a>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<img src='URL HOME PAGE'/></a>
</div>
<div class='clear'/>
</b:includable>

Ora non resta che andare a sostituire le parti in rosso con l'URL richiesto. E se per caso si volesse eliminare il link Home come ho fatto io basta non inserire alcun URL al posto della scritta in rosso URL HOME PAGE.  

Blogging // Articoli correlati solo nella pagina del singolo post

Avevo già dedicato in passato un altro post alla possibilità di inserire sotto ogni post del nostro blog una serie di articoli correlati tramite LinkWithin.

Questo però in effetti potrebbe rendere la grafica del blog un tantino caotica, per cui mi è venuto in mente che la soluzione migliore sarebbe quella di fare in modo che l'elenco degli articoli correlati compaia soltanto nella pagina del singolo blog (provate a cliccare su uno dei titoli dei miei post e ne avrete un esempio...). 

Per fare ciò, una volta installato il widget di LinkWithin, andate a cercare nel codice HTML del blog il codice relativo a tale widget (verso il fondo, sotto il nome di LinkWithin). Una volta trovato cliccate sulla freccia nera per espanderlo ed aggiungete al codice la parte di testo evidenziata che trovate qui sotto.

<b:widget id='HTML1' locked='false' title='LinkWithin' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:content/>
</b:if>
</b:includable>
</b:widget>

Salvate e andate a vedere il risultato finale.

NB: Prima di effettuare qualsiasi modifica io consiglio sempre di salvare il modello che avete attualmente in uso, in modo da poter sempre rimediare a qualsiasi eventuale errore...