"Designer Modelli" e i nuovi template standard di Blogger

| 15 Commenti ]


Recentemente Blogger ha migliorato la sua piattaforma di blogging con delle novità sostanziali. Blogger ha infatti totalmente rinnovato i suoi template standard, che sono adesso molto più personalizzabili che in passato.

E’ importante sapere che alcuni suggerimenti (visti tra queste pagine) precedentemente validi per la modifica dei template potrebbero creare dei problemi con la nuova piattaforma. In altre parole se state utilizzando uno dei nuovi template standard di Blogger (Semplice, Finestra immagine, Fantastico, Filigrana, Etereo, Viaggi) alcuni dei nostri widget potrebbero non funzionare correttamente.

Se siete entrati da poco nel mondo dei blog, vi consiglio di utilizzare direttamente uno dei nuovi template standard di Blogger, invece di installare template provenienti da siti esterni. Risparmierete molto tempo e soprattutto eviterete di dover mettere mano al codice html per modificare l’aspetto del vostro blog.

Attraverso la nuova funzione “Designer Modelli” (disponibile solo per i nuovi template standard di Blogger) è possibile personalizzare praticamente ogni aspetto del vostro blog, come ad esempio l’immagine di sfondo, la larghezza e la disposizione delle colonne, il footer, eccetera. Insomma erano anni che si attendevano queste nuove possibilità di personalizzazione, che sono utili sia per utenti principianti che avanzati. Se avete già installato un template esterno non potrete sfruttare queste nuove funzioni di design.

Se volete passare ad uno dei nuovi template di Blogger vi consiglio di fare prima delle prove in un blog di test, perché il problema fondamentale (come già visto in passato) è importare i vecchi gadget.

Altre recenti novità di Blogger includono la possibilità di creare pagine statiche, spezzare i post (disponibile in modalità draft), il gestore dei commenti che visualizza gli avatar degli utenti, ed alcuni gadget come “Post più popolari” pronti da inserire senza modifiche al codice html.

» Leggi l'articolo

Post Recenti con icona anteprima per Blogger

| 37 Commenti ]
In questa guida vi mostrerò come inserire un widget che visualizza i Post Recenti con a fianco una miniatura corrispondente alla prima immagine che avete pubblicato nel post.
Ecco un esempio di cosa otterrete:

Come si vede dall'esempio, questo widget visualizza automaticamente gli ultimi 5 post presenti sul vostro Blog Blogger, e genera automaticamente l'anteprima delle immagini contenute in ciascun post. Inoltre è presente il conteggio del numero di commenti presenti su ciascun post.


Il widget è stato creato dall'autore di BloggerTricks.com sul cui blog troverete le spiegazioni in inglese.


Installazione del Widget Post Recenti con immagine

Assicuriamoci di aver abilitato i feed Rss per il nostro Blog e di averli impostati in modo da rendere disponibile gli interi post (non una anteprima). Per fare ciò andiamo in Impostazioni -> Feed Sito e selezioniamo Consenti Feed Blog -> Completo.
Passiamo all'installazione del widget.
1: Andiamo in Layout -> Aggiungi Gadget -> Html/Javascript
2: Copiamo e incolliamo il codice seguente

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 298;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://NOMEBLOG.blogspot.com/";
</script>
<script type="text/javascript">
function removeHtmlTag(strx,chop){ if(strx.indexOf("<")!=-1){ var s=strx.split("<"); for(var i=0;i<s.length;i++){ if(s[i].indexOf(">")!=-1){ s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length);} } strx=s.join(""); } chop=(chop<strx.length-1)?chop:strx.length-2; while(strx.charAt(chop-1)!=' '&&strx.indexOf(' ',chop)!=-1)chop++; strx=strx.substring(0,chop-1); return strx+'...'; } function showrecentposts(json){ document.write('<table width="'+boxwidth+'" border=0 bordercolor="#FF0000" align="left" cellspacing="'+cellspacing+'" bgcolor="'+borderColor+'">'); j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0; img=new Array(); for(var i=0;i<numposts;i++){ var entry=json.feed.entry[i]; var posttitle=entry.title.$t; var pcm;var posturl; if(i==json.feed.entry.length)break; for(var k=0;k<entry.link.length;k++){ if(entry.link[k].rel=='alternate'){ posturl=entry.link[k].href; break; } } for(var k=0;k<entry.link.length;k++){ if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){ pcm=entry.link[k].title.split(" ")[0]; break; } } if("content"in entry){ var postcontent=entry.content.$t; } else if("summary"in entry){ var postcontent=entry.summary.$t; }else var postcontent=""; postdate=entry.published.$t; if(j>imgr.length-1) j=0; img[i]=imgr[j]; s=postcontent; a=s.indexOf("<img"); b=s.indexOf("src=\"",a); c=s.indexOf("\"",b+5); d=s.substr(b+5,c-b-5); if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;cmtext=(text!='no')?'<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>':''; var month=[1,2,3,4,5,6,7,8,9,10,11,12]; var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]; var day=postdate.split("-")[2].substring(0,2); var m=postdate.split("-")[1]; var y=postdate.split("-")[0]; for(var u2=0;u2<month.length;u2++){ if(parseInt(m)==month[u2]){ m=month2[u2]; break; } } var daystr=(showPostDate)?'<i><font color="'+acolor+'"> - ('+day+' '+m+' '+y+')</font></i>':""; posttitle=(aBold)?"<b>"+posttitle+"</b>":posttitle; var trtd='<tr><td><img src="'+img[i]+'" width="'+thumbwidth+'" height="'+thumbheight+'"/></td><td style="font-size: 12px;">'+icon+'<a href="'+posturl+'">'+posttitle+'</a> - <span style="font-size: 9px; color: #616161;'+cmtext+' </span></td></tr>'; if(summaryPost==0){ trtd='<tr><td><img src="'+img[i]+'" width="'+thumbwidth+'" height="'+thumbheight+'"/></td><td>'+icon+'<a href="'+posturl+'">'+posttitle+'</a></td></tr>'; } document.write(trtd); j++; } document.write('</table>'); } document.write("<script src=\""+home_page+"feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>"); </script>
3: Prima di salvare passiamo alla configurazione del widget per adattarlo al nostro blog.

Configurazione del Widget

Di seguito la lista dei parametri da modificare. Quelli di default vanno abbastanza bene, l'unica cosa che dovete necessariamente modificare è il parametro home_page, inserendo l'indirizzo del vostro Blog.
boxwidth - larghezza del widget
cellspacing - spaziatura tra le celle
borderColor - Colore del bordo
thumbwidth & thumbheight - larghezza e altezza delle immagini visualizzate
fntsize - Larghezza del carattere
acolor - Colore del titolo
aBold - grassetto nel titolo (true o false)
numposts - Quanti post vuoi mostrare
home_page : http://NOMEBLOG.blogspot.com/ (cambialo con il nome del tuo blog)

Se avete post che non contengono immagini al loro interno, verrà visualizzata una immagine casuale (se volete personalizzarle basta inserirle tra quelle specificate in imgr[]).
» Leggi l'articolo

Avviso per gli utilizzatori di Google Page Creator

| 2 Commenti ]

Se utilizzate Google Page Creator per caricare immagini, javascript e quant'altro, sappiate che il servizio sarà sospeso nei prossimi giorni. Esso verrà sostituito da Google Sites, che però non permetterà di caricare nulla oltre che immagini, quindi niente javascript.

Se state riscontrando problemi di visualizzazione sul vostro Blog, potrebbe essere dovuto al fatto di aver caricato degli oggetti su Page Creator.

Alternative a Google Page Creator

Anzitutto vi consiglio di scaricare tutto il materiale che avete caricato su Page Creator.


Fatto ciò avete due possibilità:

1) Caricare le sole immagini su Google Sites, il nuovo servizio di Google.

2) Caricare gli script e le immagini su:

Si tratta di servizi gratuiti simili a Google Page Creator, che permettono di creare siti, e di caricare files. Per ora non posso recensire questi servizi, spero di farlo al più presto.

» Leggi l'articolo

Templates per Blogger: i temi dei Social Network

| 2 Commenti ]
Una raccolta di template per Blogger dei più importanti Social Network del pianeta.
Se passate molte ore al giorno su Facebook o Twitter e volete ritrovare lo stesso stile sul vostro Blog, troverete molto utile questa mini raccolta di template che vi permettono di avere su Blogger i temi dei più famosi Social Network.
I Template per Blogger di questa raccolta riguardano i seguenti Social Network:
  • Facebook
  • Twitter
  • Digg
  • Orkut

Il Tema di Facebook: template per Blogger

"Smells Like Facebook" è un template per Blogger che rappresenta un esatto clone del tema di Facebook. Uno stile molto semplice e lineare che però come sappiamo riscuote un enorme successo.

Demo | Supporto | Download

Il Tema di Twitter: template per Blogger

"Twitter Blog Template" è un template per Blogger che ci porta nel mondo di Twitter. Twitter adotta uno stile meno serio di Facebook, ed è più adatto a un Blog, grazie alla combinazione di colori celeste - bianco.

Demo | Supporto | Download

Il Tema di Digg: template per Blogger

"Digg Blogger Template" è l'esatta copia del tema utilizzato su Digg, il noto social network su cui si condividono i propri segnalibri. Questo template porta su Blogger lo stile di uno dei Social Network più frequentati del mondo.

Demo | Supporto | Download

Il Tema di Orkut: template per Blogger

"Orkut Blogger Template". Orkut è un Social Network non molto conosciuto in Italia. Ma concorderete che questo template è davvero ben fatto. Colorato, semplice e pronto per essere installato sul vostro Blog.

Demo | Supporto | Download
» Leggi l'articolo

Mega Collezione di Icone RSS per Blogger

| 7 Commenti ]

Ho selezionato per te una grande raccolta di Icone RSS per creare pulsanti di iscrizione ai feed RSS del tuo Blog su Blogger.

Perchè dovresti utilizzare un pulsante RSS

  • Questi bottoni RSS facilitano l'iscrizione dei tuoi lettori al feed RSS del tuo Blog
  • Rendono il tuo Blog più originale e diverso dagli altri
  • Attirano maggiormente l'attenzione su un servizio che permette ai tuoi lettori di seguire gli aggiornamenti del tuo Blog
  • Blogger come sappiamo pubblica oltre ai feed relativi ai post, anche il feed dei commenti. Perchè non invogliare i tuoi lettori ad iscriversi anche al feed dei commenti, per seguire le discussioni che si vengono a creare sul tuo Blog?

Scegli il bottone che più è in linea con il tuo template, oppure spezza con il layout del template per attirare ancor più l'attenzione! Oppure scegli il pulsante RSS che è più a tema con gli argomenti di cui parli su tuo Blog.

Come creare un pulsante per l'iscrizione ai feed RSS nel tuo Blog Blogger

  • Carica l'icona che hai scelto su un servizio online (ad esempio Picasa, o Imageshack o Flickr) e prendi nota dell'indirizzo URL dell'icona
  • Prendi nota anche dell'indirizzo del tuo feed RSS (basta guardare nelle impostazioni del tuo Blog, o cliccare sull'icona rss presente nella barra dell'indirizzi del tuo browser)
  • Vai in Layout->Elementi Pagina->aggiungi un Gadget (di tipo HTML/Javascript)
  • Inserisci un codice simile al seguente:

<a href="URL_DEL_TUO_FEED_RSS"><img src="URL_ICONA" width="150" height="150" /></a>

Ovviamente sostituisci gli indirizzi precedentemente appuntati, (ricorda che devi inserire degli indirizzi completi di http). Se l'icona è troppo grande (nell'esempio è 150), modifica i valori width e height.

Scarica le icone RSS

Clicca su ciascuna immagine per scaricare il pacchetto che contiene le icone RSS.

Ciascun lavoro è distribuito con licenza Creative Commons, quindi liberamente utilizzabile.

» Leggi l'articolo

Nascondere il conteggio delle etichette in Blogger

| 11 Commenti ]
Se avete installato il gadget delle etichette sul vostro Blog su Blogger, vi sarete accorti che accanto a ciascuna etichetta è visualizzato un numero che rappresenta il conto dei post che contengono tale etichetta.
Probabilmente il vostro Blog avrà un aspetto più professionale se tale conteggio non è visualizzato. Può infatti capitare di aver scritto pochi articoli con una etichetta e molti con un'altra, e dunque vogliamo che i nostri lettori non visualizzino il numeretto accanto all'etichetta.
Se quindi vi siete sempre chiesti come riuscire ad eliminare questo conteggio delle etichette su Blogger, sappiate che la cosa è estremamente semplice, ed è illustrata qui di seguito.

Esempio di ciò che otterrete

Prima di procedere ecco un esempio di cosa otterrete applicando questa guida (prima -> dopo).




Come procedere

1: Andiamo in Layout->Modifica Html e clicchiamo su "espandi widgets"
2: Cerchiamo nel modello il seguente codice:

<span dir='ltr'>(<data:label.count/>)</span>
esempio:


3: Eliminiamo questo codice e salviamo il modello
Dopo questa modifica, potrete finalmente scrivere di quello che volete senza preoccuparvi troppo delle etichette!
Inoltre il vostro Blog avrà un aspetto molto più professionale!
» Leggi l'articolo