Inserire le Favicon dei Social Bookmarks nei post di Blogger

Continua il saccheggio del sito Blogger Hacks con un utile tutorial riguardante l'inserimento delle Favicon dei Social Bookmarks nei post di Blogger. Lo script è SEO Friendly e come consuetudine arricchito dagli screenshot dei vari passaggi.
Iniziamo.

Aprite il vostro Blog e spostavi nelle scheda Layout (1), Modifica HTML (2), e per sicurezza scaricate l'intero modello sul vostro computer cliccando su Scarica modello completo (3). A questo punto barrate la casella Espandi i modelli widget (4). Ora cercate la linea di codice <div class='post-footer'>, magari aiutandovi con la combinazione di tasti CTRL + F che attiva la funzione di ricerca del browser, e immediatamente dopo questa riga incollare il seguente codice:







<div style='float:center;'><BR/>

<small>VOTA questo articolo</small><BR/>

<a expr:href='"http://oknotizie.com/post?url=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank'><img alt='vota su OKNotizie' border='0' src='http://farm3.static.flickr.com/2065/2077963657_e0a82b68bb_o.gif'/></a>

<a expr:href='"http://segnalo.com/post.html.php?url=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank'><img alt='salva su Segnalo' border='0' src='http://farm3.static.flickr.com/2324/2077963703_a1a884727d_o.png'/></a>

<a expr:href='"http://www.diggita.it/submit.php?url=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank'><img alt='vota su Diggita' border='0' src='http://farm3.static.flickr.com/2037/2078753406_897e276d88_o.gif'/></a>

<a expr:href='"http://www.meemi.com/static/share/?u=" + data:post.url + "&amp;t=" + data:post.title' rel='nofollow' target='_blank'><img alt='Condividi su Meemi' border='0' height='16' src='http://www.meemi.com/static/images/share.png' width='16'/></a>

<a expr:href='"http://www.technotizie.it/posta_ok?action=f2&amp;url=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank'><img alt='segnala su Technotizie' border='0' src='http://farm3.static.flickr.com/2004/2078753616_be0dea9923_o.png'/></a>

<a expr:href='"http://www.wikio.it/vote?url=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank'><img alt='vota su Wikio' border='0' src='http://farm3.static.flickr.com/2080/2077963835_717bd108a0_o.gif'/></a>

<a expr:href='"http://fai.informazione.it/submit.aspx?url=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank'><img alt='vota su Fai Informazione' border='0' src='http://farm3.static.flickr.com/2383/2077963617_4100f86fc7_o.gif'/></a>

<a expr:href='"http://www.seotribu.com/submit.php?url=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank'><img alt='vota su SEOTribu' border='0' src='http://farm3.static.flickr.com/2342/2078008873_b5f56bff01_o.gif'/></a>

<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Add To Del.icio.us' border='0' src='http://farm3.static.flickr.com/2219/2077963495_259324f8de_o.png'/></a>

<a expr:href='"http://digg.com/submit?phase=2&amp;url=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Digg This' border='0' src='http://farm3.static.flickr.com/2141/2077963537_9a2520382a_o.png'/></a> <a expr:href='"http://www.technorati.com/faves?add=" + data:post.url' rel='nofollow' target='_blank'><img alt='Fav This With Technorati' border='0' src='http://farm3.static.flickr.com/2352/2078753568_534e49b1d1_o.png'/></a> <a expr:href='"http://www.pligg.it/submit.php?url=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank'><img alt=' Pligg.it Invia' border='0' src='http://farm3.static.flickr.com/2342/2078008873_b5f56bff01_o.gif'/></a> <a expr:href='"http://www.digo.it/submit.php?url=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Figo: lo DIGO!' border='0' src='http://www.digo.it/image/logo-small.gif'/></a> <a expr:href='"http://www.sugiu.it/submit.php?url=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank'><img alt=' SuGiu.it Invia' border='0' src='http://farm3.static.flickr.com/2381/2365927596_2ae1638033_o.gif'/></a>
</div>

Controllate l'anteprima cliccando nell'apposito pulsante (5), e se il risultato è di vostro gradimento, cliccate su salva modello (7)

Un sito per trasformare i codici e usarli su piattaforma Blogger.com

Grazie alla segnalazione dell'utente m1979 del forum di GiorgioTave.it ho finalmente risolto un problema che mi assillava da qualche tempo: inserire codici html, java o quant'altro all'interno dei post di My Webdesigner senza che gli stessi mi vengano stavolti dal motore di rendering di blogger.
Un esempio è il post precedente relativo al Label Cloud.
Per risolvere il problema è stato sufficiente nella pagina di questo sito incollare il codice nel box a sinistra, cliccare sul pulsante Parse, copiare il risultato e incollarlo all'interno del post del vostro blog su Blogger nell'area Modifica HTML (immagine a sinistra).
Il risultato è garantito.

Label Cloud in stile word press per gestire le etichette di Blogger - 2a Parte

In questo post del sito Blogger Hacks viene spiegato come implementare Label Cloud in stile wordpress per gestire le etichette di Blogger. Si tratta di un sistema molto più pratico ed elegante del semplice widget "Etichette" di Blogger, che si limita a mostrare tutti i tags utilizzati nel blog con il numero di ricorrenze tra parentesi.
Nello script segnalato da Blogger Hacks, invece, si può decidere il numero minimo di ricorrenze necessario per far si che un tags appaia nella Label Cloud. Più un tags è utilizzato all'interno del blog, più il font utilizzato diventa grande, ed anche in questo caso la dimensione minima e massima del font può essere personalizzata. Date uno sguardo a sinistra per vederne il risultato.

Riportiamo di seguito le istruzioni per l'implementazione dello script corredate da alcuni screen shot.

La prima cosa da fare è, ovviamente, includere il widget Etichette nel vostro blog. Per farlo dovete andare sulla sezione di gesione del layout del blog e cliccare su Ad a Page Element.

Posizionarsi su etichette, cliccare aggiungi a blog e nella finestra successiva selezionare il tipo di ordinamento: in ordine alfabetico o di frequenza. Per un risultato finale graficamente migliore consiglio di ordinare le etichette in ordine alfabetico.

Spostatevi nella sezione modifica HTML della scheda layout e lasciate deselezionata la casella di controllo espandi widget. Tramite la funzione trova testo del browser cercate il codice ]]></b:skin>
ed immediatamente prima inserite il seguente codice:

/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{ }
#labelCloud .label-cloud { }
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

Ora posizionatevi immediatamente dopo il codice ]]></b:skin> e inserite il seguente listato

<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

Il passo successivo consiste nell'andare a cercare il seguente codice:


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

Attenzione: il alcuni blog può essere leggermente diverso, ad esempio il termine Labels può essere sostituito da Tags, pertanto vi sconsigliamo di cercare l'intera stringa con il comando CRTL + F del browser.

Al posto del codice indicato inserire il seguente

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a&gt;b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}


var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = &quot;<data:label.name/>&quot;;
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] &lt; cloudMin){
continue;
}
for (var i=0;3 &gt; i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>

<noscript>
<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>
(<data:label.count/>)
</li>e
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>


A questo punto è sufficiente cliccare su anteprima per verificare il risultato e successivamente su salva per consolidare le modifiche

Un aspetto decisamente interessante di questo script è la facilità di personalizzazione. Per fare ciò è sufficiente modificare i seguenti parametri:

• var claudMin=1 indica che è sufficiente che un tag sia citato una sola volta all'interno del nostro blog per far si che compaia all'interno del Label Cloud. Ovviamente aumentando questo numero si applica una selezione al livello di tags visualizzabili.
• var maxFontSize = 20 indica la dimensione massima del font relativo al tag presente più volte
• var minFontSize = 10 indica invece la dimensione minima del font relativo al tag presente meno volte
• var maxColor = [0,0,255] indica il colore del font relativo al tag presente più volte in formato RGB
  
• var minColor = [0,0,0] indica il colore del font relativo al tag presente meno volte
• var lcShowCount = false indica che non deve comparire il numero relativo alla quantità di volte in cui un tag è presente nel blog. Se invece vogliamo far comparire il numerino di fianco ad ogni tag dovremo sostituire il valore false con true

Consigliamo di rendere questi parametri omogenei allo stile del proprio blog

Migliorare il proprio blog su piattaforma blogger.com con i consigli di Blogger Hacks

Incuriositi da alcune caratteristiche presenti in un blog su piattaforma blogger.com, solitamente non implementabili tramite il servizio di blogging gratuito di Google, abbiamo chiesto all'autore dove avesse scovato i codici utilizzati per tali migliorie. La risposta è stata pressoché immediata: si tratta del sito Blogger Hacks, che come recita il sottotitolo contiene "hacks per blogger, seo - compatibili, semplici, chiari, per migliorare i nostri blog".
Tra quelli più interessanti segnaliamo lo script per trasformare il widget "etichette" di blogger in un Label Cloud stile Wordpress e quello per inserire le favicon più importanti all'interno di ogni post.
Entrambi gli script saranno oggetto dei prossimi post

Angoli smussati con script PHP

Gli angoli smussati nelle pagine web vengono ormai utilizzati da gran parte dei web master. La resa grafica ottenuta arrotondando quadrati e rettangoli è spesso gradevole e rendono un sito internet un po' meno amatoriale senza un eccessivo ricorso alla grafica.

Purtroppo HTML e CSS, stratagemmi contorti a parte, non gestiscono nativamente questo tipo di implementazione.

Lo script che trovate nel sito Tonino Web Site consente di aggiungere angoli smussati con poche righe di codice, senza appesantire le pagine e con risultati grafici decisamente buoni.

Stiamo sperimentando lo script in pagine complesse su un sito del nostro network e al momento l'unico problema rilevato è con i div ad altezza variabile su FireFox 2. Nessun problema invece con Explorer 7

Includere Feed RSS esterni sul proprio sito con MagpieRSS

Segnalato su questo articolo pubblicato da HTML.it, lo script PHP MagpieRSS permette di importare sulle pagine del proprio sito Feed RSS provenienti da fonti esterne.

Lo script è decisamente facile da configurare e non richiedere conoscenze approfondite di PHP. Nell'articolo di Luca Melloni vengono inoltre spiegate passo passo le procedure per l'implementazione del codice nelle priprie pagine PHP.

Decisamente utile è la configurazione di una cartella di cache, che permette di accedere ai Feed su altri siti senza sovraccaricare troppo il proprio.

Consigliamo di approfondire il tema tramite la lettura dell'articolo originale.

Installare il gestore di forum phpBB 3

Segnaliamo questo interessante articolo pubblicato dal sito HTML.it, la bibbia dei webdesigner.
In molti conoscono phpBB, il noto gestore di forum freeware realizzato in PHP.
Per chi utilizza questo linguaggio di programmazione per la realizzazione delle propri siti internet, l'installazione della versione 3.0 di phpBB non dovrebbe essere troppo difficile. Tuttavia potrebbe essere d'aiuto consultare una guida che mostri passo passo i passaggi salineti per l'implementazione dello script nel sito.
L'articolo segnalato è, come da tradizione di HTML.it, decisamente completo e ben realizzato, pertanto consigliamo a tutti gli utenti, esperti o meno, di provare a darci uno sguardo, se non altro per valutare le implementazioni della versione 3.0 di phpBB rispetto alla 2.0