Inserire barra dei social alla fine di ogni singolo post

Per tutti quelli che volgiono inserire alla fine di ogni singolo post di blogger dei pulsanti di condivisione sui social più conosciuti, propongo un'ottima soluzione.

Il risultato è come quello che trovi alla fine dei miei post, una sequenza di immagini che si illuminano al passaggio del mouse.

Come inserirla:

1- Vai su Layout --> Modifica html ed espandi i modelli widget

2- Fai un backup del template



3- Cerca il tag </head> e appena prima incollaci il seguente codice di stile

/* Social Bookmarks
--------------------------------------------------- */
.title{
color: #363636;
font-family:Georgia, Times New Roman;
font-size: 20px;
font-weight: normal;
margin-bottom:5px;
}
.rsociales, .subs{
color: #666;
font-weight: normal;
font-size:0.9em;
border: 1px solid #cfcfcf;
width: 583px;
padding: 10px 10px 10px 10px;
margin-bottom:0px;
}
.rsociales ul, .connect ul, .subs ul {
display:inline;
margin-top:0pt!important;
padding:0pt !important; }
.rsociales li, .connect li, .subs li {
background:transparent none repeat scroll 0%;
display:inline;
list-style-type:none;
margin:0pt;
padding:2px; }
.rsociales img, .connect img, .subs img {
border:0pt none;
float:none;
margin:0pt;
padding:0pt; }
.rsociales-sobre { opacity:0.4; }
.rsociales-sobre:hover { opacity:1; }

4- Ora cerca il tag <data:post.body/>  e incolla subito dopo questo codice:

<span style='font-family:Arial, Helvetica, sans-serif; font-size:16px; font-weight:bold;'>Se ti è piaciuto l&#39; articolo... condividilo!</span>
<div><a expr:href='&quot;http://feeds.feedburner.com/IL_TUO_ID&quot;' target='_blank'><img alt='Iscriviti ai feed' border='0' class='rsociales-sobre' src='http://i256.photobucket.com/albums/hh174/mozzy9/RSS-5-1.png'/></a>
<a expr:href='&quot;http://feedburner.google.com/fb/a/mailverify?uri=IL_TUO_ID&quot;' target='_blank'><img alt='Iscriviti via mail' border='0' class='rsociales-sobre' src='http://i256.photobucket.com/albums/hh174/mozzy9/EmailRSS-1-1.png'/></a>
<a expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;srcTitle=&quot; + data:blog.title+ &quot;&amp;srcURL=&quot; + data:blog.homepageUrl ' target='_blank'>
<img alt='Buzz It' border='0' class='rsociales-sobre' src='http://i256.photobucket.com/albums/hh174/mozzy9/25yy8pd-1.png'/></a>
<a expr:href='&quot;http://oknotizie.alice.it/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='vota su OKNotizie' border='0' class='rsociales-sobre' src='http://i256.photobucket.com/albums/hh174/mozzy9/oknotizie-1.jpg'/></a>
<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' target='_blank'><img alt='Agregar a Technorati' border='0' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTMskWCBzQBsY1619ueZ5jfpZ9lCXl5RNGQPAWi2pebc-9XvJeKlvab-q6qEUeTs9vgTB2Vp898HM-XQ5PSGnOPAW-lzxfJ9eTkAge7TwNddjZPCCqWoeyzzHDJhVDBz1Z24sNbvGKAIn_/s1600/technorati_32.png'/></a>
<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Agregar a Del.icio.us' border='0' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBWuxh6xwoAEFQXMvHNElivgIn-lLdMTUIuXz12gjpjw7WAVHlVLC2BmK4cohChKp8N2aedKZHlx2mruFicWPaRB_mmlWOeVj6_vRpic-ncYWJfA1Ig5ZQGc183Nah5JCYtL0tNZ_0yib5/s1600/delicious_32.png'/></a>
<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' target='_blank'><img alt='Agregar a DiggIt!' border='0' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPFF74ZlWrmdqjIbH4wI_8T9OMSNYe2uJabCTt8OvnjRPScIyCw2RibFFxRlGag-xNvPoA0WJyHgKQOOJDRfsZLiO-KXuVtjAKe65XpJ1jQXvkSxRH0xRSyyCBD5xgoZXhD9_GaR5xx4fN/s1600/digg_32.png'/></a>
<a expr:href='&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?t=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Agregar a Yahoo!' border='0' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhncrx8r6oZlbK2Z8RpWnus0wNYA9DB8MjSDoRt3WIAayjrotg0DqilhyphenhyphenASjI67vnlECdZkb3jHqMHWPZ6fC7dqe4jEnAWBhyphenhyphenJC1DoHqSsxfg1lATzAx5DslslRliOxuaSdOdtHi3foMLyQ/s1600/yahoo_32.png'/></a>
<a href='#' target='_blank'><img alt='Agregar a Google' border='0' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXRrdGZ-rC8Jcn1NhYNttSRcEMSYdJcqTSHElvaBzdqqCrGZvbOFMM3hfSNAAR_LVsIzlLOV5zE5Udjl9O_0avmbhU-LLP2jqZCAHQBY9lHFJMPSJdjBAqZNAr-f8xUjVIBH0o2e3fGcQI/s1600/google_32.png'/></a>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' target='_blank'><img alt='Agregar a facebook' border='0' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju0Zwbg0eKbiQP3UGQJBbxDa3_a7Mkf_rJW33X6TKAoZyeIrEgladLk7yYZo8c0Uj5yGkjYkTV7Wd_tiKOzMefX941Cs_xxRb7HxVM2VGEeK9-FvhKZySYZfgC03pre2rETUA9wBySkNkw/s1600/facebook_32.png'/></a>
<a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Agregar a twitter' border='0' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm33P5AB6_t8zwQaEL1yPaij2O_XfjYdcDZPHFswfC4OeSF0D8Hx4dtU-h9GXz5PfEJeUU38HNP1Luljjl5AV1QsXXoUC2TKr7X3vTolxtLKRy92Y8bgn4zsNiRWEAIVftqrYfcrnpAcK4/s1600/twitter_32.png'/></a></div>

5- Sostituisci i tuoi link per i feed e salva

Altri articoli simili:

Posted in: CSS,Feed,HTML,Layout,Modificare Template,Social,Tutorials