Barra social condividi per blogger


Con l'imporsi sempre più netto dei vari social network riuscire a far condividere i nostri post dai lettori risulta fondamentale per incrementare la popolarità del nostro blog.

Quindi oltre che scrivere contenuti interessanti ed originali è bene riuscire a rendere semplice ed immediato la divulgazione degli articoli ai lettori. Un bottoncino carino e al punto giusto può invogliare chiunque a cliccarlo favorendo la diffusione dei nostri articoli.

Di recente abbiamo pensato di sostituire, la vecchia è cara barra con le iconcini coi tappi da bottiglia con una più completa e graficamente più carina.
Vecchia barra condividi


La nuova barra la potete osservare in basso alla fine dell'articolo è, come già detto prima, più completa poichè integrà il tastino per i feed e l'inoltro per email e l'hover al passaggio del mouse.

Per inserire la barra all'interno di blogger basta accedere al modello html tramite "Design->Modifica HTML".

Salviamo per sicurezza una copia del modello e spuntiamo la casellina "Espandi i modelli widget"

Cerchiamo (premere Ctrl+F per ricerca rapida) all'interno del codice la seguente riga "]]></b:skin>"

Subito dopo incolliamo il seguente CSS

<style type='text/css'>

div.sexy-bookmarks {
height:54px;
background:url('http://www.webalice.it/milo.baldi/formicheinca/grafica_O2/sharing_text.png') no-repeat left bottom;
position:relative;
width:540px;
}

div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url('http://www.webalice.it/milo.baldi/formicheinca/grafica_O2/sharing_text') 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://i52.tinypic.com/10p2bzm.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>


A questo punto per inserire la barra a fine articolo, sempre all'interno del codice ricerchiamo la riga
"<data:post.body/>" o "<div class='post-footer'>"

Subito dopo incolliamo questo codice

<!-- Barra social Cloedemk http://imaniaci.blogspot.com -->
&lt;br&gt;&lt;br&gt;
<p>Ti è piaciuto questo articolo?<strong> Condividilo con gli amici!</strong></p>
<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='TUO_URL_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>
&lt;br&gt;&lt;br&gt; &lt;br&gt;
<!-- fine barra social -->


Ovviamente ricordiamo di aggiornare l'url dei feed col proprio
Se preferite che la barra non appaia nell'home page, ma nei singoli blog basta inserire prima del codice precedentemente indicato questa riga

<b:if cond='data:blog.pageType == &quot;item&quot;'>
e subito dopo</b:if>
SHARE

Clo&demk

Siamo due semplici ragazzi Clo e Demk abitiamo in diverse città, ma il PC e gli interessi comuni ci legano. Ci piace la musica e i video musicali, navigare nel vasto mare d'informazioni d'internet alla ricerca di nuove mete diverse e lontane e non ci spaventano gli ostacoli...(Continua).

  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment

10 commenti:

  1. ciaooooooooo!!! sempre interessanti i vostri post!!!

    RispondiElimina
  2. Ciao Demetrio mi verrebbe bene quasi tutto senonchè in alto, sopra la barra blogger, mi compare la scritta:
    Non che io disdegni di farvi pubblicità, ma sta davvero male!! :-))
    Cosa sbaglio???
    Grazie
    Francesca

    RispondiElimina
  3. scusa nel mi commento precedente non si vede qule scritta compare.
    E' questa:
    Barra social Cloedemk http://imaniaci.blogspot.com
    con tanto di simboli (virgolette e trattini) prima e dopo ...

    RispondiElimina
  4. Ciao Francesca,

    Hai ragione, mio erroruccio a inserire il commento CSS nel'XML.

    Rimuovi il testo

    /* Barra social... */

    E dovrebbe risolversi il problema ;)

    RispondiElimina
  5. @Francesca Moggi,

    Confermo!
    Non hai lo sfondo del post bianco, ma credo non sia un problema no?

    Rimane in evidenza, se vuoi rimuovere il bianco, basta sostituire un'immagine, se ti serve ti indico come fare ;)


    Ti sei dimenticata di inserire il link dei tuoi feed. (http://acquacluster.blogspot.com/feeds/posts/default), nella parte evidenziata in rosso del codice...

    RispondiElimina
  6. Vorrei mettere al mio blog la barra che hai tu adesso per la condivisione con gli amici, con le icone nascoste che al passaggio del mouse i alzano. E' possibile avere le istruzioni?
    Grazie

    RispondiElimina
  7. @Sew by Marissa

    Ciao grazie per la visita, la guida che vedi è proprio per inserire la barra social con le icone nascoste..

    RispondiElimina
  8. grande, adesso lo provo sul mio blog

    RispondiElimina

Senza di te questo blog si riduce a ben poco...
Per info guida commenti blogger