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='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Condividi questo post su Del.icio.us'/></li>
<li class='sexy-digg'><a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Condividi questo post su Digg'/></li>
<li class='sexy-technorati'><a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Condividi questo post su Technorati'/></li>
<li class='sexy-reddit'><a expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Condividi su Reddit'/></li>
<li class='sexy-stumble'><a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Condividi su StumbleUpon'/></li>
<li class='sexy-designfloat'><a expr:href='"http://www.designfloat.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Condividi su DesignFloat'/></li>
<li class='sexy-facebook'><a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Condividi questo post su Facebook'/></li>
<li class='sexy-twitter'><a expr:href='" http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Condividi questo post su Twitter'/></li>
<li class='sexy-furl'><a expr:href='" http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + 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='" mailto:?subject=" + data:post.url + "&title=" + 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.
Vinyl Software è una società molto giovane, autrice del buon RevoluTV e di questo Winyl, compatto riproduttore audio che è stato il suo iniziale cavallo di battaglia.
