Skip to main content

Sharing is Sexy - Snazzy Social Buttons for Blogger

These "sharing is sexy" social media buttons are great and allow your readers to share your blog posts with their social media network.
They are traditionally a Wordpress plugin but after googling "sharing is sexy" I found a couple of tutorials which I have managed to break down into plain English for HTML numpties like myself.  I have also experimented a little a put together this HTML tutorial for you so that you can install these buttons too.  These instructions work perfectly on a Blogger/Blogspot blog.  If installing them on another platform or website then you will  have to insert them directly into the HTML section of your template.

First of all you need to be aware that I had to download two.png images.  Please feel free to use these two images for your buttons as I will not be deleting or moving the images.  Otherwise, you can download the two images from here and upload them on your own online photo storage space.

So, onto the instructions-for-muppets.  Please take a couple of minutes to read through them first to make sure you understand them.

Open your Blogger dashboard and click the "Design" tab and choose "Edit HTML"
Tick the "Expand Widget Templates" box and then click on the "Download Full Template" link.  Your existing template should auto-download to the "Downloads" section of your computer - or opt to download the file to your desktop.
This is important as if anything goes wrong whilst changing your HTML you don't need to panic.  You just use the "upload a template from your hard drive" option and reload your original template.


Now we are ready to start with the really technical stuff.

Find (CTRL + F) this code
]]></b:skin>

hit Enter or Return and below the ]]></b:skin code enter this CSS code:

<style type='text/css'>
div.sexy-bookmarks {
height:54px;
background:url('http://img.photobucket.com/albums/v702/Tallulah1972/BLOG%20STUFF/sharingsexy.png') no-repeat left bottom;
position:relative;
width:540px;
}
div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url('http://img.photobucket.com/albums/v702/Tallulah1972/BLOG%20STUFF/sharingsexy.png') 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://img.photobucket.com/albums/v702/Tallulah1972/BLOG%20STUFF/Sexysprite.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>

If you have downloaded the image pack and uploaded it to your own online photo storage site earlier, the "sharingsexy.png" image code (direct link) will replace the red highlighted link and the "sexysprite.png" image code (direct link) will replace the blue highlighted link.


Next we have to add some more code - this time it is HTML so please find (CTRL + F) the following code:
<data:post.body/>

hit Enter or Return and below the <data:post.body/> code enter this HTML code:
<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'/></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'/></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'/></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'/></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'/></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'/></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'/></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'/></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'/></li>
<li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/YOUR-FEEDBURNER-ID' title='Subscribe to 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'/></li>
</ul>
<span class='sexy-rightside'/></div>



Where the green text is you will need to enter YOUR OWN Feedburner link.


Finally click SAVE TEMPLATE




Et Voila!  You now have "Sharing is Sexy" social buttons.  Enjoy!


* * *


Please leave any queries, praise or feedback in the section below.  Oh, and don't forget to use the social buttons to spread the word about this blog post.  I installed the "Sharing is Sexy" button rack and created this blog post by using a number of links found on the "Sharing is Sexy" google search page.




Related links:
A Quick HTML Lesson
A Quick HTML Lesson - Part 2




  
Labels:

Popular posts from this blog

26 Bands From The 80's : Where Are They Now?

The other day, whilst out with my husband , I was listening to some UB40 in the car and wondered what they were up to now.  Then I saw this post from Buzzfeed and realised I totally needed to steal that idea.   BUT the problem with doing a "Where Are They Now" of the 80s is that they are either dead, accountants (dead accountants?) or in their mid 50's and, having realised they have snorted their pension up their nose, are dragging themselves onto the Reunion Tour concert circuit. So here are my chosen few that form my A-Z of 80's 'Where Are They Now?'   Do you fancy adding any of your own? Art Of Noise.   Last seen looking for Peter Gunn and desperately hoping that Tom Jones tells a "I know A rt Of Noise" story about them on The Voice. Billy Idol.   Currently setting off airport alarms all over the world after having a steel rod inserted into his leg following a motorbike accident in 1990.  Practicing Rebel Yell on Guitar Her...
Keep Reading »

[REVIEW] Canvas print from PrinterPix

Whilst dabbling in a bit of (very) amateur photography I occasionally have a favourite photo printed onto canvas.  It's usually a scenery picture and used to brighten up the walls in the lounge or at a focal point on the stairs.  Most recently I have had two images put through the process by PrinterPix . I sent off an image of my son after his Territorial Army passing out parade in April (proud parent moment) and one of our dog on the beach from a few months ago.  They were returned within a few days and looked even better than I had imagined. Soldier Boy is on a canvas that is 16" x 20" on a standard thickness (2cm) frame.  Michi is on a 12" x 16" canvas which is stretched onto a thickeer (4cm) frame.  Both have been printed using a gloss finish.   All canvases from PrinterPix are hand-stretched, use fade-resistant ink and tension wedges are fitted into the corners of each frame to aid stability. What do you think?  I'm in l...
Keep Reading »

7 Things To Do In Roda, Corfu

This year, our summer holiday took us to Corfu. We were staying in Roda on the north coast of the island and had a wonderful time. It's a beautiful Greek fishing village and has the most chilled and welcoming atmosphere I've ever experienced.  I'd love to share my recommended seven things to do if you visit Roda. Sunset over Roda harbour Swimming With The Fishes The coastline at Roda is completely flat so you can walk out quite a distance and still only be in shallow water.  The beach in the village is very sandy but becomes rocky as you move out of town towards some of the beach front hotels (twenty paces out to sea, it becomes sandy again). The water is generally very calm, beautifully warm and clear enough to see the occasional fish swimming by.   Chill out at the Boathouse As we walked down from our hotel, The Boathouse was one of the first bars we stopped at before continuing into Roda. It is perfectly placed between the rural coastal road that l...
Keep Reading »