Esistono tantissimi templates per Blogger, gia' disponibili in rete e facili da scaricare e utilizzare per il proprio blog. E' anche vero che Blogger, con la funzione Designer modelli ha veramente fatto un balzo in avanti e ci consente, gia' di per se', di partire da uno dei modelli preimpostati e poi personalizzare tanti aspetti del blog, non solo colori, anche immagini, colonne di cui si compone il blog ecc..
Tanti modelli preconfezionati, come ad esempio quelli che trovate su http://www.premiumbloggertemplates.com/, nella home hanno una miniatura, o thumbnail, dell'immagine contenuta nei post e il bottone read more che compare automaticamente, ovvero senza dover cliccare sul bottone stecca da biliardo mentre scrivi il post.
Volendo utilizzare un template di Designer modelli, dato che questi templates, nativi di Blogger, offrono tante comodita', ma volendo anche mettere una miniatura per ogni post, ho quindi trovato in rete del codice da aggiungere al modello. Il sito da dove l'ho preso e' http://www.bloggerbuster.com.
Ecco come fare.
Passo 1: eseguire il backup del modello!
E 'importante eseguire il backup del modello di Blogger prima di effettuare qualsiasi modifica. In questo modo si puo' facilmente ripristinare il template se qualcosa va storto.
Per eseguire il backup modello di Blogger, andare Design> Modifica HTML nella vostra dashboard di Blogger, fare clic sul link Scarica modello completo vicino alla parte superiore della pagina.
Ti verrà richiesto di salvare un file XML sul disco rigido del computer - questo file XML include tutti i modelli HTML e widget necessario per visualizzare il progetto attuale Blogger. Assicurarsi di salvare questo file in una cartella facile da ricordare e prendere nota del nome del file nel caso in cui successivamente necessario ripristinare modello.
Ti verrà richiesto di salvare un file XML sul disco rigido del computer - questo file XML include tutti i modelli HTML e widget necessario per visualizzare il progetto attuale Blogger. Assicurarsi di salvare questo file in una cartella facile da ricordare e prendere nota del nome del file nel caso in cui successivamente necessario ripristinare modello.
Passo 2: aggiungere il codice per visualizzare riepiloghi e miniature
La fase successiva è quella di aggiungere il codice di Blogger che mostrerà un riepilogo delle miniature e dei nostri posti. Vai alla Design> Modifica HTML e selezionare la casella Espandi widget di modelli e cercare la seguente riga di codice:<data:post.body/>
e sostituire con<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</b:if>
<data:post.snippet/>
<b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
Salva il modello e visualizza l'anteprima.Passo 3 (ci siamo quasi)Se e' tutto ok, ora cerchiamo ]]></b:skin>
Immediatamente prima di questa stringa aggiungere. Pollice img {
float: left; float: left;
margin: 0 10px 10px 0; margin: 0 10px 10px 0;
} }
In questo modo l'immagine e' allineata a sinistra, se la vuoi allineare a destra basta sostituire left, con la parola right.Inoltre per cambiare le dimensioni della miniatura o il margine basta impostare dei valori differenti.
Commenti
Ciao