Blogger Book

Molti lettori di questo blog me l'hanno chiesto, e si tratta dei pulsanti per le piattaforme social che uso attualmente. Dato che una promessa è una promessa, e non voglio indebitarmi ulteriormente, eccolo qui.

Questi pulsanti servono per collegarsi ai social network : Facebook , Twitter , Google+ , Feed RSS e abbonamento email .
Ciò che molti trovano interessante è l'effetto hover che si crea quando ci si passa sopra, con l'icona che si muove verso l'alto mentre lo sfondo cambia colore.

Vedremo questo gadget in due versioni: una con cinque piccoli pulsanti allineati orizzontalmente e un'altra con quattro pulsanti leggermente più grandi allineati su due colonne. Sono realizzati con sprite e transizioni CSS3.
Aggiungeremo entrambe le versioni in un unico passaggio, ovvero incollando sia gli stili che la struttura HTML in un gadget. Perché? Solo per pigrizia, ma chiunque voglia inserire gli stili nella posizione corrispondente nel template può farlo senza problemi.

Quindi, per aggiungerli al tuo blog, vai su Design | Aggiungi un gadget | HTML/Javascript e incolla il codice per i pulsanti che preferisci.

Questa è la prima versione a 5 pulsanti.

<style>
/* Pulsanti dei social network - Ciudad Blogger */
.social_bookmarks_container {
width:100%;
height:65px;
padding:0;
position:relative;
}
.social_bookmarks {
position:relative;
float:left;
margin:0;
padding:0;
}
.social_bookmarks li {
margin:0 0 1px 1px;
height:57px;
width:57px;
list-style:none;
float:left;
padding:0;
-webkit-transition: tutti gli ease-in-out da 0,4 s;
-moz-transition: tutti gli ease-in-out da 0,4 s;
-o-transition: tutti gli ease-in-out da 0,4 s;
-ms-transition: tutti gli ease-in-out da 0,4 s;
transition: tutti gli ease-in-out da 0,4 s;
}
.social_bookmarks li a {
float:left;
larghezza:57px;
altezza riga:24px;
visualizzazione: blocco;
rientro testo: -99999px;
margine:0px;
contorno: nessuno;
spaziatura:0;
altezza minima:57px;
altezza:100%;
decorazione testo:nessuna;
}
.social_bookmarks .iconrss{background: #A4A4A4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ8Kbt-uhIorlVidc2YJ9HNSHhOHizEH64tru9lPKzmoeA1go GDzfflP64SXOV8_wcOtJQiSWvlEUIcPuOE4Te3zkflsjHaXP_skhSGPOt2MDsoYumv5VzNc_UgZB-Y_-Fu-yqc58EG_pn/s114/icon-rss.png) in alto a sinistra senza ripetizione;}
.social_bookmarks .iconrssmail{background: #BDBDBD url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZxzZ9WBDmn-wY5zVTJXn4oM_xiB5QQtBb-bYbUujnEeCBpNPsq LAdWU5INBe5naJU3CLsa87UR9MLM5tDuIKH0RzYgg_dg2T4Yh-Qr4Gl8wJI9XjFuz6YZ7D58aUBz_yydSAVeaTwyYpj/s114/icon-rssmail.png) in alto a sinistra senza ripetizione;}
.social_bookmarks .icontwitter{background: #D8D8D8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz_lGB3qFKnLoqdr5TVAP0qG1umN5dEJnzHw2FIq7zOX4F-lePT vRN0ulGC4VB_ujN8uQpRPPDzC2aV7owD0oMsF2IhKBF3JTL26CMc4x0aLnwTK88mfLSJh7vevshzcR8eNh6Lwf4GJO0/s114/icon-twitter.png) in alto a sinistra senza ripetizione;}
.social_bookmarks .iconfacebook{background: #E6E6E6url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWKuFaylNawHkw2x-8SBNyFdqtTop2BLGGvNNHvB6mt6hmVfSo2 7u9-z_EKRzxx1sEtPr0I5LSaef-a6S8TztDTMcR2noTULqL2-jh0X1tAgk2pyoJUS-2zl3Mjflpl68EDlgCL5K3cxU0/s114/icon-facebook.png) in alto a sinistra senza ripetizione;}
.social_bookmarks .icongplus{background: #F1F1F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnb6hyphenhyphen8423G0Y4atMdWIK_R0OWkwvMn-FPTKsI9HZTTV- YnpmOEYcfwg8f2UckeWWP7XW7rpaF-jvdJYfyV3TlwjQyknNaTQhsECTH8shArnzYvVaVOfEJoR-cqJ5ewt8YRu4TvAwzvn_i/s114/icon-gplus.png) in alto a sinistra no-repeat;}
.social_bookmarks .iconfacebook:hover{background-position:center -57px; background-color: #37589b ;}
.social_bookmarks .icontwitter:hover { background-position:center -57px; colore di sfondo: #46d4fe ;}
.social_bookmarks .icongplus:hover {posizione di sfondo: centro -57px; colore di sfondo: #de5a49 ;}
.social_bookmarks .iconrss:hover{posizione di sfondo: centro -57px; colore di sfondo: #ff6600 ;}
.social_bookmarks .iconrssmail:hover{posizione di sfondo: centro -57px; colore di sfondo: #FFDE00 ;}
.social_bookmarks li:hover a{sfondo: url trasparente(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXl3v0GbEqIl9AYJLAlJb-bnAW4NBZaJtkJjZpuGZmWoe4qpGm2vj_ 5MKrqtDitgLlujjGO6HW_O-0PR_FG__iVHnBbDfqyj44j7NQgJ_hDpEWqF7eYEYVje1t0P0Jw5CtSziDWYevQMnh/s57/icon-social-reflect.png) no-repeat;
}
</style>
<div class='social_bookmarks_container'>
<ul class='social_bookmarks'>
<li class='iconrss'>
<a href='/atom.xml'>
RSS
</a>
</li>
<li class='iconrssmail'> <a href='http://feedburner.google.com/fb/a/mailverify?uri= FeedName '>
RSS Posta </a> </li> <li class='icontwitter'> <a href='http://twitter.com/ user '> Twitter </a> </li> <li class='iconfacebook'> <a href='http://facebook.com/ utente '> Facebook </a> </li> <li class='icongplus'> <a href='http://plus.google.com/+ utente
/about'>
Google Plus
</a>
</li>
</ul>
</div>

E questo è il codice che dovresti incollare nel tuo gadget HTML/Javascript .

<style>
/* Pulsanti dei social network - Ciudad Blogger */
.social_bookmarks_container {
width:176px;
height:176px;
padding:0;
position:relative;
}
.social_bookmarks {
position:relative;
float:right;
margin:0;
padding:0;
}
.social_bookmarks li{
margin:0 0 1px 1px;
height:77px;
width:77px;
list-style:none;
float:left;
padding:0;
-webkit-transition: tutti gli ease-in-out da 0,4 s;
-moz-transition: tutti gli ease-in-out da 0,4 s;
-o-transition: tutti gli ease-in-out da 0,4 s;
-ms-transition: tutti gli ease-in-out da 0,4 s;
transition: tutti gli ease-in-out da 0,4 s;
}
.social_bookmarks li a {
float:left;
larghezza:77px;
altezza riga:24px;
visualizzazione: blocco;
rientro testo: -99999px;
margine:0px;
contorno: nessuno;
spaziatura:0;
altezza minima:77px;
altezza:100%;
decorazione testo:nessuna;
}
.social_bookmarks .iconrss{background: #A4A4A4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ8Kbt-uhIorlVidc2YJ9HNSHhOHizEH64tru9lPKzmoeA1g oGDzfflP64SXOV8_wcOtJQiSWvlEUIcPuOE4Te3zkflsjHaXP_skhSGPOt2MDsoYumv5VzNc_UgZB-Y_-Fu-yqc58EG_pn/s0/icon-rss.png) in alto a sinistra senza ripetizione;}
.social_bookmarks .icontwitter{background: #D8D8D8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz_lGB3qFKnLoqdr5TVAP0qG1umN5dEJnzHw2FIq7zOX4F-leP TvRN0ulGC4VB_ujN8uQpRPPDzC2aV7owD0oMsF2IhKBF3JTL26CMc4x0aLnwTK88mfLSJh7vevshzcR8eNh6Lwf4GJO0/s0/icon-twitter.png) in alto a sinistra senza ripetizione;}
.social_bookmarks .iconfacebook{background: #E6E6E6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWKuFaylNawHkw2x-8SBNyFdqtTop2BLGGvNNHvB6mt6hmVfSo 27u9-z_EKRzxx1sEtPr0I5LSaef-a6S8TztDTMcR2noTULqL2-jh0X1tAgk2pyoJUS-2zl3Mjflpl68EDlgCL5K3cxU0/s0/icon-facebook.png) in alto a sinistra senza ripetizione;}
.social_bookmarks .icongplus{background: #F1F1F1url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnb6hyphenhyphen8423G0Y4atMdWIK_R0OWkwvMn-FPTKsI9HZTTV -YnpmOEYcfwg8f2UckeWWP7XW7rpaF-jvdJYfyV3TlwjQyknNaTQhsECTH8shArnzYvVaVOfEJoR-cqJ5ewt8YRu4TvAwzvn_i/s0/icon-gplus.png) in alto a sinistra no-repeat;}
.social_bookmarks .iconfacebook:hover{background-position:center -77px; background-color: #37589b; }
.social_bookmarks .icontwitter:hover {background-position:center -77px; colore di sfondo: #46d4fe ;}
.social_bookmarks .icongplus:hover {posizione di sfondo: centro -77px; colore di sfondo: #de5a49 ;}
.social_bookmarks .iconrss:hover{posizione di sfondo: centro -77px; colore di sfondo: #ff6600 ;}
.social_bookmarks li:hover a{sfondo: url trasparente(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXl3v0GbEqIl9AYJLAlJb-bnAW4NBZaJtkJjZpuGZmWoe4qpGm2vj _5MKrqtDitgLlujjGO6HW_O-0PR_FG__iVHnBbDfqyj44j7NQgJ_hDpEWqF7eYEYVje1t0P0Jw5CtSziDWYevQMnh/s0/icon-social-reflect.png) no-repeat;
}
</style>
<div class='social_bookmarks_container'>
<ul class='social_bookmarks'>
<li class='iconrss'>
<a href='/atom.xml'>
RSS
</a>
</li>
<li class='icontwitter'> <a href='http://twitter.com/ utente '>
Twitter </a> </li> <li class='iconfacebook'> <a href='http://facebook.com/ utente '> Facebook </a> </li> <li class='icongplus'> <a href='http://plus.google.com/+ utente /about'> Google Plus </a> </li> </ul> </div>

Facile e veloce, vero? Non ti resta che inserire i tuoi nomi utente per ogni social network dove indicato in rosso .
Nella prima versione, dovrai inserire il nome del tuo feed Feedburner dove indicato e, naturalmente, abilitare le iscrizioni via email in Feedburner .

E se i colori non ti piacciono, puoi anche cambiarli. I codici esadecimali in grassetto sono i colori normali, mentre quelli arancioni sono i colori al passaggio del mouse.E questo è tutto.

fonte