Oggi vi presenterò un hack moooolto interessante! Dopo aver spiegato ed illustrato il hack per gli articoli espandibili (leggi tutto) Oggi tocca ai Widget Espandibili.
Prima di spiegarvi do cosa consiste vi invito a vedere la DEMO.

Quante volte siete stati costretti a diminuire il numero delle etichette nella vostra barra laterale a causa della loro numerosità? bhe ecco a voi la soluzione:

Fase 1- Senza espandere i vostri widgget, cercate questo codice nel vostro modello:



<b:widget id='Label1' title='Labels' locked='false' type='Label'>


Fase 2- Sostituire tale riga con il seguente codice:


<b:widget id='Label2' title='Etichette (Nascoste)' locked='false' type='Label'>
<b:includable id='main'>
<script type='text/javascript'>
//<![ CDATA [
if (typeof (Rnd) == 'undefined') var rnd ='';
rnd = Math.floor (Math.random () * 1000);
RND = 'id-' + rnd;
document.write ( '<a href = "#" onclick = "tmp = document.getElementById ("' + RND + ' "); = tmp.style.display (tmp.style.display ==" none " )? "blocco": "none"; return false; "style =" float: left; margin-right: 5px ;">');
//]]>
</ script >[+/-]
<script type='text/javascript'>
//<![ CDATA [
document.write ( '<\ / a>');
//]]>
</ script>
<b:if cond='data:title'>
<h2> <data:title/> </ h2>
</ b: if>
<div class='widget-content'>
<script type='text/javascript'>
//<![ CDATA [
document.write ( 'id="' <div + rnd +'" style="display:none;">');
//]]>
</ script>

<ul>
<b:loop values='data:labels' var='label'>
<li>


<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'> <data:label.name/> </ a>
</ b: if>
</ li>
</ b: loop>
</ UL>

<script type='text/javascript'>
//<![ CDATA [
document.write ( '<\ / div>');
//]]>
</ script>
<b:include name='quickedit'/>
</ div>
</ b: includable>
</ b: widget>


E voila!

Al fine di questo hack, devi avere un widget etichetta al posto di quello gia esistente intitolato 'Etichette (Nascoste)'.


Finalmente un widget che vi permette di visualizzare "correttemente" gli articoli più commentati del vostro blog con il numero dei commenti per ogni articolo...


Installazione:

Connettetevi su Blogger, andate su "Elementi pagina", "Aggiungi un gadget" di tipo "HTML/JavaScrtipt" e copiate/incollate il seguente codice:

<script language='JavaScript'>
Grassetto = true;
numposts=200;
NumeroArticoliDaVisualizzare=5;
IndirizzoBlog = "http://bloggerperinulli.blogspot.com/";
</script>
<script src='http://youtubbiamo.googlepages.com/articolipiucommentati.js' type='text/javascript'></script>

Potete disattivare il grassetto sostituendo il comando true con false


Cercando di dare ad un'immagine angoli arrotondati in Photoshop o usando i CSS è stata una delle cose più difficili per me quando cercavo di abbellire l'aspetto di un mio blog o sito. Cercavo sempre di creare quelle curve ma mai uscivano come speravo!.

RoundPic è un servizio gratuito che ha risolto questo problema! Usando RoundPic potete prendere una qualsiasi immagine e darle angoli arrotondati istantaneamente! Non solo, lo sfondo è trasparente, quindi potete metterela in qualsiasi sfondo senza dover modificarla ulteriormente.

Arrontondare gli angoli di un immagine, blogger per i nulli

Ecco a voi una prova:
Ecco com'era la mia immagine
arrotondare gli angoli di un immagine tramite internet, blogger per i nulli

Ed ecco com'è diventata:
blogger per i nulli, arrotondare gli angoli di un immagine

Facile no?!
RoundPic non si limita a darvi solo questo; Con l'aiuto di una finestrina in alto a destra potrete scegliere ad esempio quali angoli devono essere arrotondati e quali no! la larghezza e l'altezza dell'immagine, la dimensione dell'angolo arrotondato ed anche il colore di sfondo se non si desidera averlo trasparente.

finestra configurazioni, blogger per i nulli

Dal momento che ho trovato questo sito non perdo più tempo cercando di usare codici CSS , JavaScript oppure con Photoshop.
E' solo una perdita di tempo dal momento in cui questo sito può fare tutto per voi! Enjoy!<



Oggi vi presento un widget semplicissimo da usare che vi permettera di visualizzare le statistiche del vostro blog: il numero totale degli articoli ed i commenti presenti nel proprio blog.

Andate su Layout, aggiungete un nuovo widget di tipo HTML/JavaScript e copiate/incollate il seguente codice:

<script style="text/javascript">
function numberOfPosts(json) {
document.write('Articoli in questo blog: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
function numberOfComments(json) {
document.write('Commenti in questo blog: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
</script>
<font color="blue"><script src="http://bloggerperinulli.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script>
<script src="http://bloggerperinulli.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></font>

A questo punto sostituite L'URL in rosso con l'indirizzo del vostro blog.
Per personalizzare questo widget potete modificare le righe in blu.

Finalmente ho trovato una soluzione al misterioso problema della visualizzazione degli avatar nei commenti blogger.
Come ben sapete, la visualizzazione degli avatar su blogger è una funzionalità gia integrata per default nelle impostazioni però essa non funziona, eh si...non funziona. Ma ora state tranquilli :) , ecco a voi la soluzione!

Prima di tutto andate su impostazioni -> commenti... scegliete: Mostrare immagini profilo nei commenti? SI



A questo punto andate su Layout->Modifica HTML , Fate il backup del vostro Layout-> selezionate Espandi i modelli widget.

Ora cercate la seguente riga di codice


<dl id='comments-block'>


Sostituitela con la seguente:

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>


Poco in basso, cercate la seguente:

<a expr:name='data:comment.anchorName'/>


Sostituitelo con:


<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<div expr:class='data:comment.avatarContainerClass'>
<data:comment.authorAvatarImage/>
</div>
</b:if>



Questo hack vi permetterà di visualizzare gli avatar dei commentatori in alto a sinistra come è mostrato in quest'immagine:


L'ultima cosa da fare è quella di aggiungere questo codice CSS che serve anche per visualizzare un avatar per i commentatori anonimi subito prima di </b:skin> ( Grazie ad Albania di averci segnalato la mancaza di questo codice)

.avatar-image-container {background:url(http://2.bp.blogspot.com/_u4gySN2ZgqE/SrTInZfKwVI/AAAAAAAAAwA/xaGlRIqkHDw/s400/default.gif); width:35px;height:35px; }
.avatar-image-container img { border:none;}

E' un sistema di commenti simile a quelli usati dai blog caricati sulla piattaforma Wordpress.

Spero che vi sia tutto chiaro, e non esitate di fare domande ;)


In quest'articolo vi spiego il modo in cui si può personalizzare la visualizzazione dei codici all'interno dei vostri articoli. Esistono vari metodi, oggi mi limitero' a spiegare la versione SyntaxHighlighter che vi permetterà di avere una cosa di questo tipo:

(questo codice è solo un esempio, non ha niente a che fare con questo hack).

Ecco a voi i passi da seguire:
1) Prima di tutto vi consiglio di salvare il vostro codice HTML.
2) Inserite il seguente codice subito prima il tag </head>



<link href="'http://sites.google.com/site/simoxisite/syntaxhighlighter/SyntaxHighlighter.css'" rel="'stylesheet'" type="'text/css'/">
<script src="'http://sites.google.com/site/simoxisite/syntaxhighlighter/shCore.js'" type="'text/javascript'/">
<script src="'http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushCpp.js'" type="'text/javascript'/">
<script src="'http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushCSharp.js'" type="'text/javascript'/">
<script src="'http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushCss.js'" type="'text/javascript'/">
<script src="'http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushDelphi.js'" type="'text/javascript'/">
<script src="'http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushJava.js'" type="'text/javascript'/">
<script src="'http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushJScript.js'" type="'text/javascript'/">
<script src="'http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushPhp.js'" type="'text/javascript'/">
<script src="'http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushPython.js'" type="'text/javascript'/">
<script src="'http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushSql.js'" type="'text/javascript'/">
<script src="'http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushVb.js'" type="'text/javascript'/">
<script src="'http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushXml.js'" type="'text/javascript'/">
<script src="'http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushRuby.js'" type="'text/javascript'/">


2) Ora subito dopo </body> , incollate il seguente codice:


<script language="'javascript'">
function start() {
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code', true, true, false, 1, false);
}
window.onload = start;
</script>


A questo punto salvate il vostro template.
Per poter applicare questo Hack all'interno dei vostri articoli bisogna usare il seguento codice all'interno di quest'ultimi:


<pre name="code" class="css">
Inserire il codice qui
</pre>

Oppure

<textarea name="code" class="css">
Inserire il codice qui
</textarea>


Usando pre bisogna convertire i tags <> in & lt; e & gt; (senza lo spazio tra & e g )
Tutto chiaro? :)