Passa ai contenuti principali

Post con riassunto e thumbnail per Blogger

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.

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

Unknown ha detto…
aiutamiiiii..... non me lo fa
admin ha detto…
Prova a controllare di aver copiato bene ... poi dimmi se è ok.
Ciao

Post popolari in questo blog

Imparare a scrivere più velocemente con la tastiera, gratis e online

Imparare a scrivere più velocemente con la tastiera del comput er, gratis e online Quelli un po' più grandicelli si ricorderanno come, prima della diffusione dei personal computer, fosse complicato buttar giù con la macchina di scrivere anche una lettera di poche righe ... se si sbagliava voleva dire, spesso, dover ripartire da capo. Molti hanno imparato a digitare i caratteri sulla tastiera da soli, un po' alla volta ma senza nessuna guida ... senza proccuparsi troppo di sbagliare, tanto i tasti backspace o canc sono lì, belli comodi, e utilizzarli non comporta nessun problema. Poter utilizzare correttamente tutte le dita tuttavia ci consentirebbe di scrivere più velocemente. Ho trovato un servizio gratuito che consente di imparare a digitare sulla tastriera del nostro computer utilizzando le dita delle mani nella maniera corretta. Il servizio, gratuito e utilizzabile senza dover installare alcun programma , ci guida passo passo iniziando da esercizi con livelli di difficoltà

Let's go, It's Google I/O

Come sincronizzare i contatti Google in Thunderbird?

Thunderbird, Thunderbird e ancora Thunderbird!!! Da un po' di tempo non funziona più Gcontacts, estensione che consentiva di sincronizzare i contatti memorizzati su un account Google con la rubrica di Thunderbird. Ho però trovato un valido sostituto, si chiama TBSync. Anche questa estensione permette di memorizzare i contatti e di sincronizzarli in un verso o nell'altro o solo in lettura. Per il corretto funzionamento è necessaria anche l'installazione di "Provider CalDAV e CardDAL" che è anche questa un'estensione liberamente scaricabile. Ho visto che però non è compatibile con le ultime versioni di Thunderbird. Se poi ti dovessero essere utili perchè richieste in fase di configurazione dell'estensione, ti indico qui di seguito gli indirizzi cardav e caldav di Google, ricopiati dall'estensione che dicevo sopra: CALDAV GOOGLE  https://apidata.googleusercontent.com/caldav/v2/ CARDDAV GOOGLE https://www.googleapis.com/.well-known/carddav   Enjoy!