Impolitico.org

Visualizzazione post con etichetta social network. Mostra tutti i post

19 giu 2010

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:

<a expr:href=''&quot;http://feeds.feedburner.com/TUO-NOME-FEED'&quot;' target='_blank'><img alt='Iscriviti ai feed' 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=TUO-NOME-FEED'&quot;' target='_blank'><img alt='Iscriviti via mail' class='rsociales-sobre' src='http://i256.photobucket.com/albums/hh174/mozzy9/EmailRSS-1-1.png'/></a>
<a expr:href=';http://www.google.com/reader/link?url= + 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' 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' 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' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXkxiso3Y0CaE-hJ5vVNjQhyNLLPW0pYNKWDK5cFL00yIaGnjlHpxX5yCJISO353cQUfE9eGbQkcmKhXpNmbsH4doaBhkgNdWEZmPiajdVhYJnH-7_7XBL6mC2sfmL1YpIV5At5PPwbw0F/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' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnblNPf9npdrpjRk7LlBWukcpm04GNn8WDwVtfKcFsHqmz9JpjVHHTP20vZ2K8rmisDb4-Q9rTWXAGBm-EnL9xbQOb6UqNxrRzFUMol9a6cn59z_ENer2SLyTlP0DeMzmpFWeLAQIBI5i2/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!' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnxzZDgGqf8xj864sGahrkYOfShRM6qEOyw-ivtugRAfLXAJG6VDTg_TKUsPpQJRh8ABJPQ4mgPMnst8sb4Blnzm5GPPhLRwI-Uo432Yvegbt5F6NOfq_wotTUthwx8H7PKJN2acPxRHyz/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!' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh53Jl6vugcco0cgceXl0jy0DLqPobafwjYmZdg3E82tbLjZK3UFgmfeBKY4BQpx55gb0rEC9WjYBy9yHHc3yMAX_WA6qjXcbz8hl2to0V_0vhk1zCshA8Aa-7yPPvbirpd_Ys7x5Ei-350/s1600/yahoo_32.png'/></a>
<a href='#' target='_blank'><img alt='Agregar a Google' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGx02GA2x5BzHRsfRbkuov-dIemF3h7VFt0onSylQaKKAHj8GIjwPHTX2_gyEiZfVxfl8_ko9K2Fr4eXbGJiP6PZKlf3CFT6NsaQ9TiXf97ZeLkPZCzHFy6KvJ5APMg3j2oh-EnWiu9nCH/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' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg03Os5i7DVcbJxP6GEWpFcZGklJr6CN_58gqEP6oN4ltpls90yrFJeM2fWeiDxIeTOA7wT_Ilb9JQge6PinWJHxWLX9ZUjMblpPLsMcNzeCt0UsrMXl3jqH6Urf4RqY49N-cIl_ZD156l8/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' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg42CSHxD3aqRJ197FMD239dH5Ep7DQn0VZuJWEYi83Z1Gs0cXAo-mD0TYGH1KR1adEXHlkPiFAWzic9rq1lB1E62_vA4rBmRQ33n_q4a5l_6LPtMp9vJtN6oCSA1AEhD4M0HIW6HTDabMm/s1600/twitter_32.png'/></a>

5- Sostituisci i tuoi link per i feed e salva

Se avete dubbi lasciatemi un commento. Se questo post vi è tornato utile allora abbonatevi al mio feed.

14 mar 2010

Icone social-network per il blog

Ecco per voi 20 Set di icone social da aggiungere al blog

Le icone per i social-network sono diventate fondamentali per la navigabilità ma anche per l'aumento delle visite e della visibilità del proprio blog. Qui di seguito potete scegliere quella che più si addice al vostro blog.

DOWNLOAD

5 feb 2010

Inserire la barra dei bottoni social-network in blogger

Di bottoni per condividere sui social network ce ne sono ormai una miriade sul web. Ma bisogna trovare i bottoni giusti per i social network giusti con le giuste e chiare istruzioni per inserire nel blog. Ci sono esperienze di blogger che prima dell'avvento dei social network facevano un numero di visite molto basse. Ora è sicuro che, per avere un giusto ritorno in numero di visite dai social network tramite questi bottoncini, bisognerà studiarsi bene le strategie da utilizzare. Ma intanto questo è un ottimo inizio.

Questo metodo semplice, veloce e sexy, l'ho appreso da Parsifal in questo POST . Non ho problemi a consigliarvi di leggere il suo post se volete oppure potete continuare a leggere la spiegazione qui sotto.

Intanto mettetevi pronti per modificare l'html del vostro blog. Per prima cosa cercate questa riga

</head>

e subito sopra incollate ques'altra porzione di codice

<style type='text/css'> div.sexy-bookmarks { height:54px; background:url('http://goo.gl/QNwB') no-repeat left bottom; position:relative; width:540px; }

div.sexy-bookmarks span.sexy-rightside { width:17px; height:54px; background:url('http://goo.gl/QNwB') 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://goo.gl/kcsc') 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>

Intanto, fatto questo vi consiglierei di salvare e tirare un sospiro di sollievo. Ora belli calmi calmi vi cercate quest'altra riga

<div class='post-footer'>

e proprio sotto questa riga incollate quest'altra porzione di codice

<b:if cond='data:blog.pageType == "item"'>

<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'/></li><li class='sexy-digg'><a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

<li class='sexy-technorati'><a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

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

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

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

<li class='sexy-facebook'><a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

<li class='sexy-twitter'><a expr:href='" http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

<li class='sexy-furl'><a expr:href='" http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

<li class='sexy-syndicate'><a href='URL dei feed del blog' title='Iscriviti ai Feed'/></li>

<li class='sexy-email'><a expr:href='" mailto:?subject=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li> </ul>

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

</b:if>

Benissimo. Se fin qui avete fatto bene (di copiare ed incollare in fondo si tratta) allora vi basterà soltanto sostituire URL dei feed del blog con il vostro indirizzo feed. Ora salvate e visualizzate un vostro post, vedrete che in basso alla fine dell'articolo si visualizzerà la barra per condividere frai i più famosi social network come facebook e altri.

Se avete dubbi lasciatemi un commento. Se tutto sommato questo post vi è tornato utile allora abbonatevi al mio feed.

Pagine

L'Impolitica su un piatto d'argento.

19 giu 2010

Inserire barra dei social alla fine di ogni singolo post

14 mar 2010

Icone social-network per il blog

5 feb 2010

Inserire la barra dei bottoni social-network in blogger

VISITATORI

Special Link

Segui Impolitico.org