Questo widget proviene da un plugin sviluppato per Wordpress ed è stato adattato per blog su Blogger. Avrete certamente visto alla fine del post una serie più o meno lunga di bottoni di voto per condividere l'articolo nei vari servizi quali Facebook, Twitter, Del.icio.us, Tchnorati, ecc. La particolarità di questi bottoni sta nella presenza di una immagine di sfondo con il testo "Sharing is sexy!" e nell'animazione delle varie icone quando si puntano con il mouse
Per rendervi conto del suo aspetto e del suo funzionamento andate nel post del mio blog di prova
I bottoni per la condivisione sexy degli articoli -
</head>e, immediatamente sopra, si incolla il seguente codice
<!-- Sexy Bottoni di Condivisione Inizio -->L'URL http://goo.gl/QNwB è quello di una immagine che può essere anche sostituita con un altra magari con una scritta in italiano. Adesso cercate la riga
<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>
<!-- Sexy Bottoni di Condivisione Fine -->
<div class='post-footer'>e, immediatamente sotto, incollate il seguente 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>
Salvate il modello. I bottoni di condivisione saranno visibili sono nei post in quanto sono state inserite due righe per porre questa condizione. I servizi presenti sono Delicious, Digg, Technorsti, Reddit, StumbleUpon, DesignFloat, Facebook, Twitter (attraverso Twittis) e Furl. Dovrà essere inserito il feed del blog al posto della scritta evidenziata di rosso. Sarà del tipo http://nomeblog.blogspot.com/feeds/posts/default. Enjoy.
I want to quote your post in my blog. It can?
RispondiEliminaAnd you et an account on Twitter?
@Anonymous
RispondiEliminaYes, you can quote it. My account on Twitter is
http://twitter.com/parsifal32
scusa parsifal, ma non trovo la stringa div class='post-footer'
RispondiEliminapuoi aiutarmi?
trovata...scusa
RispondiEliminaesiste un widget per impostarlo in automatico?
RispondiEliminaho un templete customised e ho provato di tutto per inserire questo codice sul'html ma non funziona. altri suggerimenti?
il mio blog e' www.viaggiatorifaidate.blogspot.com
grazie mille
@marta
RispondiEliminail tuo modello è molto personalizzato. La cosa che impedisce probabilmente al sexy widget di funzionare è che sono presenti già nel modello i link "read more" per gli articoli sintetici.
Non mi sento di darti suggerimenti...
Ciao
utilissimo :)
RispondiEliminaL'ho aggiunto correttamnete però non so perchè spunta una linea tratteggiata, ecco il sito: www.bbackground.com
RispondiElimina@Bbackground
RispondiEliminaNon me lo so spiegare, forse è un "retaggio" del tuo modello.
Fa niente, proverò qualche soluzione. Grazie della risposta.
RispondiEliminaIo ho fatto tutto secondo la procedura ma non mi è apparso niente sul blog.
RispondiEliminahttp://vitoo22.blogspot.com
idee?
@vitoo22 Ma mi stai prendendo in giro? ^_^
RispondiEliminaFunziona perfettamente, guarda tu stesso
http://vitoo22.blogspot.com/2011/04/discussione.html
è ovvio che si debba vedere solo nei post...
@Ernesto T.
RispondiEliminaah scusami ernesto, non lo vedevo nella home page... colpa mia non avevo capito quel discorso li.. adesso mi vado a leggere come metterlo da altre parti e come escludere i vari post...
scusami ancora ma sono agli inizi.. dimmi una cosa, lo posso mettere anche nel mio sito con la stessa procedura o si deve lavorare sul codice in quel caso?
grazie mille..
@vitoo22 Si può installare su tutti i blog di Blogger
RispondiElimina@Ernesto T.
RispondiEliminaOk sono anche riuscito a fare la modifica ed ora lo visualizzo anche nella home.
grazie mille dell'aiuto!! davvero guida facile da usare anche per chi non ha conoscenze di codice!!
;)
Ciao, bellissima guida, ma c'è un problema.. io l'ho messo in home page
RispondiEliminatogliendo i ''b:if...'' ma quando vado a condividere un post, mi condivide tutta la pagina, cioè la home page.. come faccio a far condividere il post e non l'home page?
@Curiosità Da Condividere Se lo metti in home è chiaro che condivide la home! Viene condivisa la pagina il cui indirizzo è nella barra del browser. Francamente non vedo la necessità di mostrarlo anche in home, appesantisce parecchio e poi la home è la pagina meno vista del blog.
RispondiElimina@Ernesto T.
RispondiEliminaSi forse hai ragione.. meglio impostare il blog diversamente...
Comunque grazie di tutte le tue guide, sei fantastico! :D
Ottima guida.
RispondiEliminaSalvo che a me non funziona (viene visualizzato un elenco puntato vuoto, ci sono osservazioni che dovrei sapere?
www.siroindustry.blogspot.com
Grazieee
@Siro
RispondiEliminaE' sparito il widget anche nel mio post di prova
http://demo-parsifal32.blogspot.com/2010/01/i-bottoni-per-la-condivisione-sexy.html
E' un problema di hosting su Skydrive che oggi non funziona. Se non si risolve da solo provo a vedere se riesco a caricare le immagini su un altro servizio.
@Siro
RispondiEliminaIl widget è stato ripristinato. Adesso non ci dovrebbero essere problemi.
@Ernesto
RispondiEliminaHo riprovato, ma niente.
Forse c'è qualche widget che crea conflitto.
ciao ernesto!buon pomeriggio.volevo sapere se è possibile inserire il bottone di ok notizie,in aggiunta o in sostizione di qualche bottone,come ho visto in alcuni blog?
RispondiElimina@Tutti ...
RispondiEliminaTutto sta nella modifica di questa immagine
http://goo.gl/kcsc
con l'inserimento di alcuni bottoni al posto degli altri che eventualmente si possono togliere. Bisogna essere bravi con la grafica (io non lo sono). Per il codice ci si può aiutare utilizzando quello di questo post
http://www.ideepercomputeredinternet.com/2008/07/inserire-i-bottoni-in-un-blog-con-con.html
IL concetto è che ci sono due classi distinte per l'aspetto dei bottoni in condizioni normali e puntati con il mouse (esempio .sexy-twitter e .sexy-twitter:hover)con l'immagine che si solleva.
ti ringrazio!ho visto qualcuno che l'avevo fatto,pensavo fosse più semplice eheh meglio lasciar perdere non sono proprio pratico,in ostituizone metto un pulsante share dove c'è ok notizie.grazie tanto!buona giornata!
RispondiElimina