Visualizzazione post con etichetta blogger. Mostra tutti i post
Visualizzazione post con etichetta blogger. Mostra tutti i post

martedì 22 dicembre 2009

wiBlog.it

wiBlog
Ciao a tutti. Lascio Blogger per passare ad un dominio personalizzato: http://www.wiblog.it. Spero che il nuovo blog vi piaccia. Un nuovo blog, una nuova avventura :-)

Continua...

lunedì 14 dicembre 2009

Nuova versione di BloggerStat, il contatore per Blogger

BloggerStat è un semplice gadget per Blogger che ho realizzato, mostra il numero totale dei post e dei commenti presenti nel proprio blog. Nella sidebar è possibile vedere un esempio. Continua...

Continua...

martedì 8 settembre 2009

Blogger: widget dei post recenti con thumbnail

Oggi vedremo come aggiungere in Blogger un widget dei post recenti con thumbnail, il risultato sarà simile a questo:

Blogger: widget dei post recenti con thumbnail

Il widget, dunque, riporta gli ultimi post e per ognuno di essi una thumbnail e il numero dei commenti ricevuti. Ogni thumbnail del widget è la miniatura della prima immagine presente all'interno del rispettivo post.


Installazione

  1. Accedere a Layout->Elementi pagina e premere su "Aggiungi un gadget"
  2. Scegliere il gadget di tipo "HTML/JavaScript"
  3. Assegnare nella textbox "Titolo" un nome al gadget (Titolo può anche essere lasciato vuoto)
  4. Copiare e incollare il seguente codice nella textbox "Sezioni del sito":
  5. <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";
    
    home_page = "http://web-login.blogspot.com/";
    
    numposts = 5;
    boxwidth = 298;
    borderColor = "#ffffff";
    fntsize = 12;
    acolor = "#666";
    aBold = true;
    cellspacing = 8;
    
    bgTD = "#000000";
    thumbwidth = 40;
    thumbheight = 40;
    text = "commenti";
    
    showRandomImg = true;
    showPostDate = false;
    summaryPost = 40;
    summaryFontsize = 10;
    summaryColor = "#666";
    icon = " ";
    icon2 = " ";
    
    </script>
    
    <script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>
  6. Modificare l'URL in rosso con quello del proprio blog
  7. Salvare le modifiche premendo il bottone "Salva".

Configurazione

Infine, dopo avere installato il widget bisogna configurarlo in modo da adattarlo al proprio blog. I parametri da modificare (ci sono anche altri paramenti, come le dimensioni delle miniature oppure lo spazio tra i vari elementi del widget, ma elenco solo quelli sufficienti per l'installazione) sono i seguenti:

numposts = numero di post nel widget (5 è il valore di default);
boxwidth = larghezza del widget (298 è il valore di default);
borderColor = sfondo del widget (bianco è il colore di default);
fntsize = dimensione del font del titolo;
acolor = colore del titolo;
aBold = "true" per il titolo in grassetto, in caso contrario "false";

Continua...

lunedì 13 luglio 2009

Due nuovi gadget per BloggerStat

BloggerStat è un contatore per Blogger che ho realizzato qualche mese fa, mostra in un unico gadget il numero totale dei post e dei commenti presenti nel proprio blog. Oggi ho deciso di fornire due nuovi gadget per BloggerStat, uno per i post e un altro per i commenti.


BloggerStat

Installazione
I due gadget, come nella prima versione di BloggerStat, sono del tipo HTML/JavaScript e l'installazione è praticamente identica. Quindi riporterò solo il codice dei due gadget da inserire nel punto 4 della procedura illustrata per la prima versione di BloggerStat.

BloggerStat per i post:
<!-- BloggerStat per i post: Inizio --><!-- Created by WebLogin (http://web-login.blogspot.com) --> <style>.bloggerstat2 { width: 100px; background: transparent; font-family: arial, sans-serif;  font-size: 9px; font-weight: normal;  text-decoration: none; text-align: center; color: #000;}.bloggerstat2 a:hover {text-decoration: underline;}.count_bloggerstat2 { padding: 1px; background: #CC0000; /* Colore del gadget. */ border: 1px solid #000;}.num_bloggerstat2 { width: 46px; padding: 1px; background: #fff; /* Colore dello spazio dei numeri del gadget. */ border: 1px solid #000; color: #000; /* Colore dei numeri del gadget. */}.type_bloggerstat2 { width: 44px; padding: 1px; background: transparent; color: #fff;}</style><script style="text/javascript">  function numberOfPosts(json) {   document.write('<b>' + json.feed.openSearch$totalResults.$t + '</b>');  }   function numberOfComments(json) {   document.write('<b>' + json.feed.openSearch$totalResults.$t + '</b>');  }</script><div class="bloggerstat2"> <table class="count_bloggerstat2">  <tr>   <td class="num_bloggerstat2">    <script src="http://nome_blog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script>   </td>   <td class="type_bloggerstat2">Post</td>  </tr> </table> <div><a href="http://web-login.blogspot.com/2009/07/due-nuovi-gadget-per-bloggerstat.html">By WebLogin</a></div></div><!-- BloggerStat per i post: Fine --> 

BloggerStat per i commenti:
<!-- BloggerStat per i commenti: Inizio --><!-- Created by WebLogin (http://web-login.blogspot.com) --> <style>.bloggerstat3 { width: 100px; background: transparent; font-family: arial, sans-serif;  font-size: 9px; font-weight: normal;  text-decoration: none; text-align: center; color: #000;}.bloggerstat3 a:hover {text-decoration: underline;}.count_bloggerstat3 { padding: 1px; background: #CC0000; /* Colore del gadget. */ border: 1px solid #000;}.num_bloggerstat3 { width: 46px; padding: 1px; background: #fff; /* Colore dello spazio dei numeri del gadget. */ border: 1px solid #000; color: #000; /* Colore dei numeri del gadget. */}.type_bloggerstat3 { width: 44px; padding: 1px; background: transparent; color: #fff;}</style><script style="text/javascript">  function numberOfPosts(json) {   document.write('<b>' + json.feed.openSearch$totalResults.$t + '</b>');  }   function numberOfComments(json) {   document.write('<b>' + json.feed.openSearch$totalResults.$t + '</b>');  }</script><div class="bloggerstat3"> <table class="count_bloggerstat3">  <tr>   <td class="num_bloggerstat3">    <script src="http://nome_blog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script>   </td>   <td class="type_bloggerstat3">Commenti</td>  </tr> </table> <div><a href="http://web-login.blogspot.com/2009/07/due-nuovi-gadget-per-bloggerstat.html">By WebLogin</a></div></div><!-- BloggerStat per i commenti: Fine --> 

Questo è tutto, fatemi sapere nei commenti cosa ne pensate ;-)

P.S. BloggerStat è gratuito, ma non bisogna rimuovere i credits. Inoltre è possibile personalizzare i colori del widget.


Aggiornamento: Nuova versione di BloggerStat, il contatore per Blogger

Continua...

sabato 13 giugno 2009

Un post dal passato: Post espandibili per Blogger

La soluzione dei post espandibili illustrata da me in questo post attualmente non funziona, la causa è la rimozione del file "hackosphere.js" dal server dell'autore. Per questo motivo ho deciso di riprendere il precedente post e con una piccola modifica (al punto 3) fornire una soluzione indipendente da file esterni.

I post espandibili permettono di visualizzare una determinata quantità di testo all'inizio dei post come invito alla lettura o comunque rappresentano una soluzione pratica se si hanno molti post lunghi sulla stessa pagina. La guida di Blogger descrive come realizzare i post espandibili per la vecchia e nuova versione, ma in questo post voglio descrivere un'alternativa per la nuova versione di Blogger. La particolarità della soluzione che vi sto per descrivere sta nel fatto che l'espansione del post avviene direttamente nella pagina principale senza dovere utilizzare il link dei singoli post. Per capire meglio cosa intendo proseguite con la lettura di questo post espandibile ;-)


Installazione

Le modifiche da fare al proprio template affinché sia possibile realizzare dei post espandibili sono le seguenti:
  1. Salvare una copia del template in modo da poterlo ripristinare in caso di errore. Quindi bisogna andare in Layout->Modifica HTML e premere sul link "Scarica modello completo".

  2. Attivare la checkbox "Espandi i modelli widget" e scorrere la pagina fino a trovare nel template il tag </head>

  3. Aggiungere prima del tag </head> il seguente codice:
    <b:if cond='data:blog.pageType != "item"'>
    
    <script type="text/javascript">
    var fade = false;
    
    function showFull(id) {
     var post = document.getElementById(id);
     var spans = post.getElementsByTagName('span');
     
     for(var i = 0; i &lt; spans.length; i++) {
      if(spans[i].id == "fullpost") {
       if(fade) {
        spans[i].style.background = peekaboo_bgcolor;
        Effect.Appear(spans[i]);
       } 
       else 
       spans[i].style.display = 'inline';
      }
      if(spans[i].id == "showlink")
       spans[i].style.display = 'none';
      if (spans[i].id == "hidelink")
      spans[i].style.display = 'inline';
     }
    }
    
    function hideFull(id) {
     var post = document.getElementById(id);
     var spans = post.getElementsByTagName('span');
     
     for(var i = 0; i &lt; spans.length; i++) {
      if(spans[i].id == "fullpost") {
       if(fade) {
         spans[i].style.background = peekaboo_bgcolor;
         Effect.Fade(spans[i]);
       }
       else spans[i].style.display = 'none';
      }
      if(spans[i].id == "showlink")
       spans[i].style.display = 'inline';
      if(spans[i].id == "hidelink")
       spans[i].style.display = 'none';
     }
     post.scrollIntoView(true);
    }
    
    function checkFull(id) {
     var post = document.getElementById(id);
     var spans = post.getElementsByTagName('span');
     var found = 0;
     
     for(var i = 0; i &lt; spans.length; i++) {
      if(spans[i].id == "fullpost") {
       spans[i].style.display = 'none';
       found = 1;
      }
      if((spans[i].id == "showlink") &amp;&amp; (found == 0))
       spans[i].style.display = 'none';
     }
    }
    </script>
    
    </b:if>
  4. Trovare nel proprio template il tag <div class='post-body'> e aggiungere le modifiche evidenziate in rosso nel seguente codice:
    <div class='post-body' expr:id='&quot;post-&quot; + data:post.id'>
    <b:if cond='data:blog.pageType == "item"'>
    
    <p><data:post.body/></p>
    
    <b:else/>
    <style>#fullpost {display:none;}</style>
    <p><data:post.body/></p>
    <span id='showlink'>
    <p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Read More...</a></p>
    </span>
    <span id='hidelink' style='display:none'>
    <p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Summary only...</a></p>
    </span>
    <script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
    </b:if>
    
    <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
    </div>
  5. Salvare le modifiche con "Salva le modifiche".
  6. Effettuare la pre-formattazione dei post per l'editor. Quindi bisogna andare in Impostazioni->Formattazione e aggiungere in Modello post il seguente codice:
    Inserire qui il sommario
    <span id="fullpost">Inserire qui il resto del post</span>
A questo punto le modifiche sono terminate, ogni volta che inizierete a scrivere un nuovo post avrete già il codice necessario per la realizzazione di un post espandibile. Per scrivere un post non espandibile non dovrete fare altro che cancellare il codice già presente nel nuovo post.

N.B. E' importante assicurarsi che il tag span con id="fullpost" sia presente solo una volta all'interno del post.

Continua...

mercoledì 3 giugno 2009

Motore di ricerca per Blogger

Blogger ha rilasciato un nuovo gadget, si tratta di un motore di ricerca personalizzato per i blog. Per poterlo inserire dobbiamo andare in Layout->Elementi pagina, premere su "Aggiungi gadget" e poi cliccare su "Casella di ricerca".

Blogger - Motore di ricerca

La configurazione prevede anche la scelta del tipo di ricerca (per impostazione predefinita sono utilizzati tutti):
  • Questo blog
  • Ricerca le pagine a cui ti sei collegato dai i tuoi post di blog
  • Il Web
Con questo nuovo gadget, dunque, è possibile effettuare le ricerche nel proprio blog, blogroll e in qualsiasi elemento a cui è collegato.

Continua...

lunedì 20 aprile 2009

Come inserire un bottone di segnalazione di BlogNews nei template di Blogger

Tra gli strumenti messi a disposizione da BlogNews ci sono anche i bottoni per segnalare i post direttamente dal proprio blog. Oggi vedremo come inserire uno di questi bottoni in un blog di tipo Blogger.

Blogger

Le modifiche da fare al proprio template sono le seguenti:
  1. Salvare una copia del proprio template in modo da poterlo ripristinare in caso di errore. Quindi bisogna andare in "Modifica HTML" e premere sul link "Scarica modello completo".
  2. Attivare la checkbox "Espandi i modelli widget", trovare nel proprio template il tag "<span class="post-icons">" e aggiungere subito dopo il codice del bottone che si desidera inserire:
    <a expr:href='&quot;http://www.blog-news.it/submit.php?url=&quot; + data:post.url' title='Segnala questo post su BlogNews' target='_blank'><b style='color:#cc3300;'>Blog</b><b style='color:#000;'>News</b></a>
  3. Salvare le modifiche con "SALVA MODELLO".
A questo punto le modifiche sono terminate, se la procedura è stata eseguita correttamente allora il bottone è presente alla fine di ogni post.


P.S. Approfitto dell'occasione per invitare i blogger che leggono WebLogin ad iscriversi a BlogNews ;-)

Continua...

domenica 14 dicembre 2008

Blogger in draft: I geotag

Blogger ha aggiunto il geotagging all'editor dei post di Blogger in draft. I geotag aggiungono ad un post la propria posizione geografica, un po' come avviene per i francobolli.
Aggiungere un geotag ad un post è facile: basta accedere a Blogger in draft, aprire l'editor dei post e premere su "add location".

Blogger Geotag

Quando si pubblica un post, il geotag viene visualizzato sotto il post come un link a Google Maps ed inoltre la posizione geografica viene aggiunta anche nel feed RSS del blog.
Il team di Blogger sta lavorando anche ad altri metodi per mostrare i geotag, ad esempio è disponibile un gadget che visualizza i geotag su una mappa.

Blog Map

Per aggiungere il gadget al proprio blog bisogna andare in Layout->Elementi pagina, premere su "Aggiungi un gadget", poi fare click su "Aggiungi il tuo" e incollare il seguente URL: 

"http://blogmap-gadget.googlecode.com/svn/trunk/blogmap.xml"

Attualmente il geotagging presenta alcuni problemi, tra questi:

  • Un geotag non può essere rimosso direttamente da un post una volta che è stato salvato, per farlo bisogna cancellare il post e copiare il suo contenuto in un nuovo post.
  • Alcuni modelli personalizzati non visualizzano i geotag, in tal caso è possibile risolvere il problema andando in Layout->Modifica HTML e ripristinando i modelli widget ai valori predefiniti.

[via blog di Blogger in draft]

Continua...

lunedì 1 dicembre 2008

BloggerStat, mostra il numero dei post e dei commenti

BloggerStat è un semplice gadget per Blogger che ho realizzato, mostra il numero totale dei post e dei commenti presenti nel proprio blog. L'installazione è molto semplice, si tratta di un "gadget di tipo HTML/JavaScript".

BloggerStat

Installazione

  1. Accedere a Layout->Elementi pagina e premere su "Aggiungi un gadget".
  2. Scegliere il gadget di tipo "HTML/JavaScript".

    Blogger - Gadget

  3. Assegnare nella textbox "Titolo" un nome al gadget (Titolo può anche essere lasciato vuoto).
  4. Copiare e incollare il seguente codice nella textbox "Sezioni del sito":
    <!-- BloggerStat: Inizio --><!-- Created by WebLogin (http://web-login.blogspot.com) --> <style>.bloggerstat1 {width: 120px;background: transparent;font-family: arial, sans-serif; font-size: 9px;font-weight: normal; text-decoration: none;text-align: center;color: #000;}.bloggerstat1 a:hover {text-decoration: underline;}.count_bloggerstat1 {padding: 2px; background: #CC0000; /* Colore del gadget. */border: 1px solid #000;}.type_bloggerstat1 {width: 48px;padding: 1px;font-size: 10px;text-align: left;color: #fff;}.num_bloggerstat1 {width: 54px;padding: 1px;font-size: 10px;text-align: right;color: #fff;}</style><script style="text/javascript">function numberOfPosts(json) {document.write('<b>' + json.feed.openSearch$totalResults.$t + '</b>');}function numberOfComments(json) {document.write('<b>' + json.feed.openSearch$totalResults.$t + '</b>');}</script><div class="bloggerstat1"><table class="count_bloggerstat1"><tr><td class="type_bloggerstat1">Post:</td><td class="num_bloggerstat1"><script src="http://nome_blog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script></td></tr><tr><td class="type_bloggerstat1">Commenti:</td><td class="num_bloggerstat1"><script src="http://nome_blog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></td></tr></table><div><a href="http://web-login.blogspot.com/2008/12/bloggerstat-mostra-il-numero-dei-post-e.html">By WebLogin</a></div></div><!-- BloggerStat: Fine --> 
  5. Sostituire l'URL scritto in rosso con quello del proprio blog.
  6. Salvare le modifiche premendo il bottone "Salva".

Questo è tutto, fatemi sapere nei commenti cosa ne pensate ;-)


P.S. BloggerStat è gratuito, ma non bisogna rimuovere i credits. Inoltre è possibile personalizzare i colori del widget.



Aggiornamento #1: Due nuovi gadget per BloggerStat

Aggiornamento #2: Nuova versione di BloggerStat, il contatore per Blogger

Continua...

sabato 29 novembre 2008

Come numerare automaticamente i commenti di Blogger

In un precedente post abbiamo inserito gli avatar di MyBlogLog nel nuovo modulo dei commenti di Blogger, oggi vedremo un hack per inserire in ogni commento il rispettivo numero.
Il numero associato al commento ci permetterà di identificare ogni commento all'interno di un post e non solo, infatti al numero assegneremo anche il permalink del commento.


Installazione

Le modifiche da fare al proprio template, per numerare automaticamente i commenti, sono le seguenti:

  1. Salvare una copia del template in modo da poterlo ripristinare in caso di errore. Quindi bisogna andare in Layout->Modifica HTML e premere sul link "Scarica modello completo".
  2. Attivare la checkbox "Espandi i modelli widget" e aggiungere prima di "]]></b:skin>" il seguente codice:
    .numberingcomments {
    float: right;
    display: block;
    width: 50px;
    margin-right: 5px;
    margin-top: -35px;
    text-align: right;
    font-family: 'Century Gothic', 'Lucida Grande', Arial, Helvetica, Sans-Serif;
    font-size: 30px;
    font-weight: normal;
    }
    
    .numberingcomments a:link, .numberingcomments a:visited {color: #445566 !important; text-decoration: none !important;}
    .numberingcomments a:hover, .numberingcomments a:active {color: #FF9933 !important; text-decoration: none !important;}
  3. Scorrere la pagina fino a trovare "<dl id='comments-block'>" e aggiungere le modifiche evidenziate in rosso nel seguente codice:
    <dl id='comments-block'>
    
    <script type='text/javascript'>var CommentsCounter=0;</script>
    
    <b:loop values='data:post.comments' var='comment'>
    
     <div class='' expr:id='data:comment.id'>
     
      <dt class='comment-author' expr:id='"comment-" + data:comment.id'>
       <a expr:name='"comment-" + data:comment.id'/>
       <b:if cond='data:comment.authorUrl'>
        <a expr:href='data:comment.authorUrl' rel='nofollow'>
         <data:comment.author/>
        </a>
       <b:else/>
        <data:comment.author/>
       </b:if>
       
       <data:commentPostedByMsg/>
       
       <span class='numberingcomments'>
        <a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
         <script type='text/javascript'>
          CommentsCounter=CommentsCounter+1;
          document.write(CommentsCounter);
         </script>
        </a>
       </span>
      </dt>
      
      <dd class='comment-body'>
      
       ...
      
      </dd>
     </div>
    
    </b:loop>
    </dl>
  4. Salvare le modifiche con "Salva le modifiche".

Attualmente ho adottato questa soluzione per questo blog, quindi potete provare il funzionamento anche lasciando un commento a questo post ;-)

N.B. Il passo due della procedura è il codice CSS che definisce lo stile dei numeri.

Continua...

mercoledì 26 novembre 2008

Come inserire un Tagroll animato in 3D in un blog

In un precedente post vi avevo parlato di Blogumus, un widget per Blogger che ci permette di avere nella sidebar del nostro blog una tag cloud animata in 3D. Questo widget attualmente presenta un problema con alcuni tipi di tag e quindi non funziona su tutti i blog, però esiste un'alternativa...

La tag cloud, generata dall'animazione Flash, può essere popolata manualmente. Questo vuol dire che possiamo decidere noi, sia i tag da inserire che i rispettivi nomi da assegnare: sono i nomi generati per alcuni tipi di tag (ad esempio quelli che presentano dei caratteri speciali) la causa del non funzionamento di Blogumus.


Esempio

Il seguente codice (inserito nella sidebar) permette di ottenere un tagroll animato in 3D per i tag: hacks, news, web e web 2.0, Software e web design di questo blog.

<!-- Tagroll animato in 3D: Inizio -->
<div align="center">
<embed quality="high" allowscriptaccess="always" flashvars="tcolor=0x000000&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;
&lt;a href='http://web-login.blogspot.com/search/label/hacks' style='12'&gt;Hack&lt;/a&gt;
&lt;a href='http://web-login.blogspot.com/search/label/news' style='12'&gt;News&lt;/a&gt;
&lt;a href='http://web-login.blogspot.com/search/label/web%20e%20web%202.0' style='12'&gt;Servizi e Siti web&lt;/a&gt;
&lt;a href='http://web-login.blogspot.com/search/label/Software' style='12'&gt;Software&lt;/a&gt;
&lt;a href='http://web-login.blogspot.com/search/label/web%20design' style='12'&gt;Web Design&lt;/a&gt;
&lt;/tags&gt;" type="application/x-shockwave-flash" height="200" src="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" id="tagcloud" bgcolor="#ffffff" width="250" name="tagcloud"></embed>
</div>
<!-- Tagroll animato in 3D: Fine -->

Per ogni tag la parte evidenziata in rosso corrisponde all'URL (l'ultima parte dell'URL è il tag), mentre quella in blu è il nome. Dunque, assegnando dei nomi privi di caratteri speciali (ad esempio con "Servizi & Siti web" il widget non funziona) abbiamo risolto il problema del widget Blogumus. A seguire il tagroll animato in 3D dell'esempio.




Continua...

lunedì 24 novembre 2008

Come inserire MyBlogLog nei commenti di Blogger

Ultimamente Blogger ha fornito la possibilità di posizionare il modulo dei commenti sotto il post. Questo nuovo modulo dei commenti è attualmente privo di avatar ed è per questo che oggi voglio mostrarvi come visualizzare gli avatar di MyBlogLog; si tratta di una mia personalizzazione dell'hack MyBlogLog Avatar Creator.


Installazione

Le modifiche da fare al proprio template, per inserire MyBlogLog nei commenti di Blogger, sono le seguenti:
  1. Caricare il seguente file sul proprio servizio di web hosting.
  2. Salvare una copia del template in modo da poterlo ripristinare in caso di errore. Quindi bisogna andare in Layout->Modifica HTML e premere sul link "Scarica modello completo".
  3. Attivare la checkbox "Espandi i modelli widget" e aggiungere prima di "]]></b:skin>" il seguente codice:
    .avatar img {float: right; border: 1px solid #76acd3;}
  4. Aggiungere prima del tag </head> il seguente codice con l'URL del file mybloglog.js caricato precedentemente:
    <script src='URL di mybloglog.js' type='text/javascript'/> <!-- MyBlogLog Avatar Creator -->
  5. Trovare nel proprio template le seguenti righe di codice (o simile):
    <dl id='comments-block'>
      <b:loop values='data:post.comments' var='comment'>
          <div class='' expr:id='data:comment.id'>
            <dt class='comment-author comment.authorClass' expr:id='data:comment.anchorName'>
  6. Immediatamente dopo queste linee di codice, incollare il seguente codice:
    <!-- MyBlogLog Avatar Creator: Inizio -->
    <div class='avatar'>
        <b:if cond='data:comment.authorUrl != &quot;&quot;'>
            <script>myBlogAvatar(&#39;<data:comment.authorUrl/>&#39;);</script>
        <b:else/>
            <script>myBlogAvatar(&#39;anonimo&#39;);</script>
        </b:if>
    </div>
    <!-- MyBlogLog Avatar Creator: Fine -->
  7. Salvare le modifiche con "Salva le modifiche".

A questo punto le modifiche sono terminate, tutti i commenti del proprio blog devono avere l'avatar: per gli utenti non iscritti a MyBlogLog viene mostrato un apposito avatar che può essere modificato con img_noavatar presente nel file mybloglog.js.

Qui trovate un esempio, ma attualmente potete provare anche lasciando un commento a questo post ;-)

N.B. Gli utenti con un account Google (hanno anche il profilo su Blogger) devono segnalare il loro profilo su MyBlogLog (in "My Sites and Services"), per potere visualizzare l'avatar anche quando commentano selezionando il "profilo Google".

Continua...

domenica 16 novembre 2008

Blogumus: tag cloud animato per Blogger

Oggi voglio parlarvi di Blogumus, un widget per Blogger che ci permette di avere nella sidebar del nostro blog una tag cloud animata in 3D (lo si può vedere in azione nella parte superiore di questo post). E' stato realizzato da Amanda Fazani, l'autrice di Blogger Buster, ed è la versione per Blogger del noto WP-Cumulus di Roy Tanck.
Il widget è totalmente personalizzabile e l'installazione è sorprendentemente semplice.


Come installare Blogumus

Le modifiche da fare al nostro template per installare Blogumus sono le seguenti:
  1. Salvare una copia del template in modo da poterlo ripristinare in caso di errore. Quindi bisogna andare in Layout->Modifica HTML e premere sul link "Scarica modello completo".
  2. Attivare la checkbox "Espandi i modelli widget" e cercare la seguente riga (o simile):
    <b:section class='sidebar' id='sidebar' preferred='yes'>
  3. Immediatamente dopo questa linea, incollare il seguente codice:
    <!-- Blogumus: Inizio -->
    <b:widget id='Label99' locked='false' title='Labels' type='Label'>
    <b:includable id='main'>
      <b:if cond='data:title'>
        <h2><data:title/></h2>
      </b:if>
      <div class='widget-content'>
        &lt;object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" &gt;
          &lt;param name="movie" value="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" /&gt;
          &lt;param name="bgcolor" value="#ffffff" /&gt;
          &lt;param name="flashvars" value="tcolor=0x000000&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;
          <b:loop values='data:labels' var='label'>
        <a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'><data:label.name/></a>
       </b:loop>
       &lt;/tags&gt;" /&gt;
         &lt;p&gt;Blogumulus by &lt;a href='http://www.roytanck.com/'&gt;Roy Tanck&lt;/a&gt; and &lt;a href='http://www.bloggerbuster.com'&gt;Amanda Fazani&lt;/a&gt;&lt;/p&gt;
        &lt;/object&gt;
      </div>
      <b:include name='quickedit'/>
    </b:includable>
    </b:widget>
    <!-- Blogumus: Fine -->
  4. Visualizzare l'anteprima del blog, se l'installazione ha avuto successo si dovrebbe vedere il nuovo widget nella sidebar e quindi è possibile salvare le modifiche con "Salva le modifiche".

Per impostazione predefinita, l'installazione utilizza i seguenti valori:
  • La larghezza (width) è 250px
  • L'altezza (height) è di 200px
  • Il colore (bgcolor) dello sfondo è bianco
  • Il colore del testo (tcolor) è nero
  • La dimensione dei caratteri (style) è di 12

Tutte queste opzioni, evidenziate in rosso nel codice, possono essere modificate in modo da adattare meglio il widget al proprio blog.

N.B. Per funzionare Blogumus richiede l'installazione di Flash Player v7 o superiore.

Continua...

domenica 26 ottobre 2008

Blogger in draft: Gadget dei Lettori

Blogger in draft
In Blogger in draft è ora disponibile il gadget Lettori che possiamo aggiungere al nostro blog su Blogger in modo da visualizzare l'elenco dei nostri lettori (iscritti a Google). Per poterlo inserire dobbiamo andare in Layout->Elementi pagina e premere su "Aggiungi gadget". Una volta inserito nella sidebar i nostri lettori potranno aggiungersi all'elenco.

Gadget Lettori

Per gestire le iscrizioni al nostro blog bisogna andare nella Bacheca, lì è riportato il link con il numero degli iscritti. Cliccando sopra il link si accede ad una pagina che riporta tutti gli iscritti suddivisi in due categorie, pubblici e bloccati. Infatti è possibile bloccare un lettore indesiderato con il pulsante Blocca.

Gadget Lettori: Iscrizioni

Nella Bacheca è inoltre possibile gestire le nostre sottoscrizioni ad altri blog: nella scheda "Blog che seguo" sono riportate le nostre sottoscrizioni ad altri blog. Per ogni sottoscrizione è riportato il nome del blog e il feed degli ultimi post.

Gadget Lettori: Blog che seguo

Le sottoscrizioni sono riportate anche in Google Reader, nella cartella "I blog che seguo".

Il gadget dei lettori è un'interessante novità, una specie di MyBlogLog di Google che credo sia destinato ad avere successo.

P.S. Ho inserito il gaget dei lettori, mi raccomando iscrivetevi! ;-)

Continua...

martedì 14 ottobre 2008

Templates Blogger, directory di template per Blogger

Templates Blogger è un sito web dove è possibile trovare tantissimi template per Blogger. Il sito è molto simile a BTemplates, anche qui è possibile navigare tra i template per categorie o con la tag cloud ed è presente la classifica dei template più scaricati, quella dei più visti e quella dei più votati. Ogni template presenta una descrizione, può essere votato, commentato, valutato attraverso una versione demo ed è possibile seguirne gli aggiornamenti via feed RSS.

Templates Blogger

Infine, chi realizza i template per Blogger può chiederne l'inserimento a questa pagina.

Continua...

martedì 5 agosto 2008

Vuoi sapere chi ti commenta su Ziczac? La soluzione c'è

Oggi voglio fornire un semplice hack ai blogger che possiedono un blog su Blogger o su Splinder e che sono iscritti a ZicZac. La soluzione che vi sto per descrivere è stata realizzata da me e Tisbe e sfrutta le API messe a disposizione da ZicZac. In pratica, grazie a questo hack per ogni vostro post segnalato su ZicZac verrà riportato il numero dei commenti ricevuti su ZicZac e il link per poterli leggere.


I commenti di ZicZac


Allora, per Blogger le modifiche da fare al proprio template sono le seguenti:
  1. Salvare una copia del proprio template in modo da poterlo ripristinare in caso di errore. Quindi bisogna andare in "Modifica HTML" e premere sul link "Scarica modello completo".

  2. Attivare la checkbox "Espandi i modelli widget", trovare nel proprio template il tag <span class="post-icons"> e aggiungere subito dopo il seguente codice:

    <!-- ZicZac - Commenti: Inizio -->
    <script type="text/javascript">
    zz_ok = 0;
    url_post = &quot;<data:post.url/>&quot;;
    titolo_post = &quot;<data:post.title/>&quot;;
    </script>
    <script expr:src='&quot;http://ziczac.it/a/e/api.php?u=&quot; + data:post.url' type="text/javascript"></script>
    <script language='javascript'>
    if (zz_ok == 1) {
    document.write('&lt;img src=&quot;http://ziczac.it/a/e/zzsmall.png&quot; alt=&quot;Commenti su ZicZac&quot; align=&quot;absmiddle&quot; style=&quot;border:0px;&quot;/&gt;');
    document.write('&lt;a href=&quot;'+ zz_url_commenti +'&quot; title=&quot;Commenti su ZicZac&quot; target=&quot;_blank&quot;&gt;('+ zz_commenti +')&lt;/a&gt;');
    }
    else
    document.write('&lt;a href=&quot;http://ziczac.it/a/segnala/?gurl='+ url_post +'&amp;gtit='+ titolo_post +'&quot; title=&quot;Segnala questo post su ZicZac!&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://ziczac.it/a/e/zzsmall.png&quot; alt=&quot;Segnala questo post su ZicZac!&quot; align=&quot;absmiddle&quot; style=&quot;border:0px;&quot;/&gt;&lt;/a&gt;');
    </script>
    <!-- ZicZac - Commenti: Fine -->

  3. Salvare le modifiche con "SALVA MODELLO".



Per Splinder, invece, le modifiche da fare al proprio template sono:


  1. Salvare una copia del proprio template in modo da poterlo ripristinare in caso di errore. Quindi bisogna andare in Template, selezionare tutto il codice HTML riportato sotto a "Template del blog" e salvarlo su di un file.

  2. Trovare il tag <$BlogItemComments$> e inserire subito dopo il seguente codice:

    <!-- ZICZAC - COMMENTI: INIZIO -->
    <script type="text/javascript">
    zz_ok = 0;
    url_post = "http://nome_blog.splinder.com<$BlogItemPermalink$>";
    titolo_post = "<$BlogItemTitle no_seo=1>";
    </script>
    <script src="http://ziczac.it/a/e/api.php?u=http://nome_blog.splinder.com<$BlogItemPermalink$>" type="text/javascript"></script>
    <script language='javascript'>
    if (zz_ok == 1) {
    document.write('<img src="http://ziczac.it/a/e/zzsmall.png" alt="Commenti su ZicZac" align="absmiddle" style="border:0px;"/>');
    document.write('<a href="'+ zz_url_commenti +'" title="Commenti su ZicZac" target="_blank">('+ zz_commenti +')</a>');
    }
    else
    document.write('<a href="http://ziczac.it/a/segnala/?gurl='+ url_post +'&gtit='+ titolo_post +'" title="Segnala questo post su ZicZac!" target="_blank"><img src="http://ziczac.it/a/e/zzsmall.png" alt="Segnala questo post su ZicZac!" align="absmiddle" style="border:0px;"/></a>');
    </script>
    <!-- ZICZAC - COMMENTI: FINE -->

  3. Sostituire l'URL scritto in rosso con quello del proprio blog.

  4. Salvare le modifiche con "Salva le modifiche".



A questo punto le modifiche sono terminate, i commenti su ZicZac ai vostri post sono segnalati sul vostro blog.


P.S. Questo hack è stato segnalato sul blog di ZicZac.

Continua...

sabato 28 giugno 2008

Blogger in draft: 5 novità in arrivo per Blogger

Blogger in draft


Blogger in draft, la sezione ufficiale di Blogger dove è possibile provare le nuove funzioni prima che vengano rese disponibili a tutti, ha reso la piattaforma di blog offerta da Google ancora più completa introducendo le seguenti interessanti novità.


  • Importa blog/Esporta blog: "Esporta blog" permette di effettuare il backup del proprio blog, completo dei post e dei commenti, in un unico file XML. Con "Importa blog", invece, è possibile importare tutti i post e i commenti dal file XML esportato con "Esporta blog" e scegliere se pubblicarli automaticamente. I post importati verranno uniti a eventuali post correnti, ordinati per data. Questa funzionalità fa parte di "Strumenti del blog" e si trova in Impostazioni->Generale.

  • Nuovo posizionamento per il modulo dei commenti: adesso i commenti, oltre alla pagina intera e alla finestra popup, possono essere incorporati sotto il post. Per scegliere la nuova opzione basta andare in Impostazioni->Commenti.

  • Sistema di votazione per i post: permette ai lettori di esprimere un giudizio (da 1 a 5 stelle) sui post pubblicati. Per attivare questa funzionalità bisogna accedere in Layout->Elementi pagina e modificare il widget "Post sul blog".

  • Nuovo editor per i post: l'editor dei post è stato rielaborato per una migliore gestione HTML e per fornire il supporto drag-and-drop per l'inserimento delle immagini.

  • Integrazione con Google Webmaster Tools: un nuovo link permette di accedere a Strumenti per i Webmaster per controllare il proprio blog.



Infine, è possibile settare come predefinita la bacheca di Blogger in draft ("Imposta Blogger in Draft come mia bacheca predefinita") in modo da potere utilizzare le nuove funzionalità accedendo direttamente su Blogger invece che su Blogger in draft.


Continua...

mercoledì 7 maggio 2008

Blogger: Post programmati

Blogger ha aggiunto la funzione che permette di schedulare la pubblicazione dei propri post. Tale funzione, come avevo riportato in un precedente post, è stata prima testata in Blogger in draft. Il funzionamento su Blogger è identico, quindi:

una volta che avrete scritto il vostro post dovrete, in "Opzioni post", impostare la data e l'ora in cui desiderate che il post venga pubblicato e dopodiché premere "PUBBLICA POST". A questo punto vedrete il messaggio "Il tuo post verrà pubblicato automaticamente il..." ed il post sarà classificato come "programmato".

Per eliminare la schedulazione di un post bisognerà salvarlo come bozza.

Continua...

martedì 25 marzo 2008

BTemplates, il sito web dei migliori template per Blogger

BTemplates è un sito web dove sono raccolti tutti i migliori template per Blogger. L'aggiornamento è costante e attualmente ci sono più di duecento template gratuiti disponibili per il download. Il sito è organizzato in modo intuitivo, infatti è possibile navigare tra i template per categorie, dalle classiche 1, 2, 3 colonne a quelle per colore o stile. Ogni template ha numerose informazioni: nome, live demo, autore, voto, numero visualizzazioni, categoria, proprietà, autore e data di inserimento.

BTemplates

Inoltre è possibile votare i template, visualizzare le statistiche dei più votati o scaricati e seguire gli aggiornamenti via feed RSS. Infine, è un'ottima vetrina per chi crea template; se avete sviluppato un template è possibile chiederne l'inserimento in modo molto semplice da questa pagina.
Insomma, le premesse ci sono tutte perché BTemplates diventi il sito web di riferimento per i template della piattaforma Blogger.

Continua...

mercoledì 20 febbraio 2008

Blogger in draft: Post programmati con Blogger

In Blogger in draft, la sezione ufficiale di Blogger dove è possibile provare le nuove funzioni prima che vengano rese disponibili a tutti, è ora presente la funzione che permette di schedulare la pubblicazione dei propri post. In pratica, attraverso questa funzione potrete scrivere dei post e programmare la loro pubblicazione decidendo il giorno e l'ora in cui dovranno essere pubblicati.

Attualmente con Blogger è possibile fare questo ma solo se, sfruttando la possibilità offerta da Blogger di inviare e pubblicare i post via email ("Mail-to-Blogger"), si ricorre a servizi esterni come Icontact oppure LetterMeLater che permettono di inviare email schedulate.

In attesa che la nuova funzione venga resa disponibile a tutti è possibile già utilizzarla scrivendo i post con Blogger in draft. Una volta che avrete scritto il vostro post dovrete, in "Opzioni post", impostare la data e l'ora in cui desiderate che il post venga pubblicato e dopodiché premere "PUBBLICA POST". A questo punto vedrete il messaggio "Il tuo post verrà pubblicato automaticamente il..." ed il post sarà classificato come "programmato".


I post programmati risultano essere molto utili ad esempio per chi vuole continuare a pubblicare i propri post anche quando è in vacanza e non può accedere al blog, oppure per chi scrive diversi posti e vuole distribuire la loro pubblicazione nell’arco di diverse ore.

[via blog di Blogger in draft]

Continua...