Blogger: personalizzare la barra "Sharing is Sexy!"

Capitoli 1-2: installare la barra

consultabili qui

Capitolo 3: personalizzare il messaggio

La frase "Sharing is Sexy" potrebbe non piacervi, e poi perchè piazzare lo stesso messaggio che la stragrande maggioranza delle persone che utilizza questo tipo di barra fa visualizzare? Io per esempio ho optato per "Condividi questo articolo con i tuoi amici!", ma di sicuro potete trovare qualcosa di meglio.

Per prima cosa scaricatevi questo file, vi semplificherà il lavoro non poco: contiene infatti un file PSD preimpostato con dimensioni e posizionamenti corretti di testo, linee e frecce. Il font ovviamente può essere cambiato a piacimento, l'unica attenzione da porre è che rispetti come grandezza, quello fornitovi da noi.

Una volta finita la composizione del messaggio, salvate in formato PNG non interlacciato e caricate il file sul vostro server o su un hoster gratuito tipo ImageShack.

Loggatevi in Blogger

Cliccate sulla scheda LAYOUT, quindi su MODIFICA HTML e marcate la checkbox ESPANDI MODELLI I WIDGET.

Per sicurezza cliccate su SCARICA MODELLO COMPLETO (un backup fa sempre comodo).

Vi ricordate nel capitolo 1, i  primi due collegamenti evidenziati in fucsia? Per la precisione erano http://i43.tinypic.com/2ueii3t.png. Tramite il solito CTRL+F individuateli e sostituiteli con quelli ottenuti da ImageShack a seguito dell'upload dell'immagine di cui sopra (o con l'indirizzo a cui questa è reperibile sul vostro server).

Salvate e avrete la vostra barra con tanto di messaggio personalizzato.

Leggi tutto...

Blogger: installare la barra "Sharing is Sexy!"

La barra in questione, che abbiamo integrato anche in questo blog, sta venendo sempre più utilizzata dai creatori di templates perchè è oggettivamente carina, elegante, si amalgama bene con il design della maggior parte dei siti e con quelle "schedine" che si alzano al passaggio del puntatore dà un'illusione di interratività ben superiore ai classici immobili bottoncini.

Vediamo quindi come è possibile inserirla in Blogger.

Capitolo 1: aggiungere il codice CSS

Loggatevi in Blogger

Cliccate sulla scheda LAYOUT, quindi su MODIFICA HTML e marcate la checkbox ESPANDI MODELLI I WIDGET

Per sicurezza cliccate su SCARICA MODELLO COMPLETO (un backup fa sempre comodo)

Tramite CTRL+F trovate nel vostro template il codice ]]></b:skin>

immediatamente sotto inserite il codice seguente 
 

<style type="text/css">
div.sexy-bookmarks {
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat left bottom;
position:relative;
width:540px;
}

div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat right bottom;
position:absolute;
right:-17px;
}

div.sexy-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}

div.sexy-bookmarks ul.socials li {
display:inline-block !important;
float:left !important;
list-style-type:none !important;
margin:0 !important;
height:29px !important;
width:48px !important;
cursor:pointer !important;
padding:0 !important;
}

div.sexy-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;
}

.sexy-furl,
.sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit,
.sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover,
.sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover,
.sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati,
.sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover,
.sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover,
.sexy-mixx, .sexy-mixx:hover, .sexy-script-style,
.sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover,
.sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover {
background:url('http://img509.imageshack.us/img509/3131/sexysprite.png') no-repeat !important;
}

.sexy-furl {
background-position:-300px top !important;
}
.sexy-furl:hover {
background-position:-300px bottom !important;
}
.sexy-digg {
background-position:-500px top !important;}
.sexy-digg:hover {background-position:-500px bottom !important;}
.sexy-reddit {
background-position:-100px top !important;
}
.sexy-reddit:hover {
background-position:-100px bottom !important;
}
.sexy-stumble {
background-position:-50px top !important;
}
.sexy-stumble:hover {
background-position:-50px bottom !important;
}
.sexy-delicious {
background-position:left top !important;
}
.sexy-delicious:hover {
background-position:left bottom !important;
}
.sexy-yahoo {
background-position:-650px top !important;
}
.sexy-yahoo:hover {
background-position:-650px bottom !important;
}
.sexy-blinklist {
background-position:-600px top !important;
}
.sexy-blinklist:hover {
background-position:-600px bottom !important;
}
.sexy-technorati {
background-position:-700px top !important;
}
.sexy-technorati:hover {
background-position:-700px bottom !important;
}
.sexy-myspace {
background-position:-200px top !important;
}
.sexy-myspace:hover {
background-position:-200px bottom !important;
}
.sexy-twitter {
background-position:-350px top !important;
}
.sexy-twitter:hover {
background-position:-350px bottom !important;
}
.sexy-facebook {
background-position:-450px top !important;
}
.sexy-facebook:hover {
background-position:-450px bottom !important;
}
.sexy-mixx {
background-position:-250px top !important;
}
.sexy-mixx:hover {
background-position:-250px bottom !important;
}
.sexy-script-style {
background-position:-400px top !important;
}
.sexy-script-style:hover {
background-position:-400px bottom !important;
}
.sexy-designfloat {
background-position:-550px top !important;
}
.sexy-designfloat:hover {
background-position:-550px bottom !important;
}
.sexy-syndicate {
background-position:-150px top !important;
}
.sexy-syndicate:hover {
background-position:-150px bottom !important;
}
.sexy-email {
background-position:-753px top !important;
}
.sexy-email:hover {
background-position:-753px bottom !important;
}
</style>

In fucsia ho evidenziato i collegamenti alle immagini... per adesso limitiamoci ad osservare dove stanno.

Capitolo 2: aggiungere il codice HTML

Sempre tramite CTRL+F trovate nel vostro template il codice  <data:post.body/>


Prestate attenzione... se ne trovate più d'uno vuol dire quasi sicuramente che nel vostro template è abilitata la visualizzazione sintetica dei post (leggi tutto... read more... e così via). Quello che dovete prendere in considerazione è l'ultimo.

immediatamente sotto inserite il codice seguente 

<div class='sexy-bookmarks'>
<ul class='socials'>
<li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Condividi questo post su Del.icio.us'/></li>

<li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Condividi questo post su Digg'/></li>

<li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Condividi questo post su Technorati'/></li>

<li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Condividi su Reddit'/></li>

<li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Condividi su StumbleUpon'/></li>

<li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Condividi su DesignFloat'/></li>

<li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Condividi questo post su Facebook'/></li>

<li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Condividi questo post su Twitter'/></li>

<li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Condividi questo post su Furl'/></li>

<li class='sexy-syndicate'><a href='http://VOSTRO_INDIRIZZO_FEED' title='Iscriviti agli RSS'/></li>

<li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Segnala questo post con una mail'/></li>

</ul>
<span class='sexy-rightside'/></div>

Il codice postato incorpora una piccola miglioria rispetto a quello "ufficiale": per venire incontro a chi non ha dimestichezza con le icone di tutti i social network visualizzati ne abbiamo aggiunto il nome, per ciascuna e tramite l'attributo TITLE, che sarà mostrato quando il puntatore del mouse vi si soffermerà sopra per qualche istante.

Occhio a specificare al posto di http://VOSTRO_INDIRIZZO_FEED l'indirizzo del feed del vostro blog.


A questo punto salvate il modello, dovreste trovare integrata la barra alla fine di ciascuno dei post.

Capitolo 3: personalizzare il messaggio

...continua qui



Il codice base originale è di Cahaya Biru.

Leggi tutto...

Che formato comprime di più?

Il formato di compressione ZIP continua ad essere tutt'oggi il più utilizzato del web (e non solo) ma... è davvero quello maggiormente efficace per ridurre le dimensioni dei nostri amati files?

Abbiamo deciso di metterlo alla prova confrontandolo con altri 5 formati. Il formato RAR lo abbiamo escluso perchè non ci risultano esistere programmi gratuiti in grado di gestirne correttamente la compressione (è sempre necessario acquistare delle librerie a pagamento).

Nella tabella qui sotto potete vedere i risultati dei test effettuati con 10 files .mdl di modelli 3d, un grosso file .bmp e 27 files di Word '97 (un libro di 200 pagine)...

Tipo file	10 modelli 3d	1 file bmp	27 files Word
non compresso	12,00 Mb	10,70 Mb	3,26 Mb
tar	12,00 Mb	10,07 Mb	3,27 Mb
zip	5,32 Mb	5,62 Mb	0,67 Mb
bz2	7,02 Mb	3,68 Mb	0,55 Mb
ice	6,46 Mb	3,51 Mb	0,56 Mb
cab	0,80 Mb	5,62 Mb	0,64 Mb
7z	0,80 Mb	4,39 Mb	0,43 Mb

Salta subito all'occhio come il formato TAR sia fuori dal gioco (praticamente comprime qualcosina solo con il .bmp) e come lo ZIP venga sempre surclassato in maniera marcata da ICE, CAB e 7z. Se del CAB avrete certamente sentito parlare, probabilmente ancora non conoscete ICE e 7z, due nuovi formati molto interessanti...

7z in particolare è stato sviluppato in maniera open-source ed è destinato di farne, di strada... se per ora è MOLTO più lento in fase di compressione di tutti gli altri standard (e necessita anche di molta più ram), è anche vero che permette di ottenere sensibili guadagni in termini di spazio. Dite la verità, quando mai vi sareste sognato di portarvi, in un comune dischetto da 1,44 Mb , 21 Mega e mezzo di roba?

Preoccupati che questo formato sia supportato solo dal programma di compressione di chi lo ha sviluppato? A breve recensiremo qualcosina... intanto se 7z vi ha incuriosito potete visitarvi l'homepage del progetto.

Leggi tutto...