Sharing is Sexy - Snazzy Social Buttons for Blogger

September 29, 2010

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='"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='http://feeds2.feedburner.com/YOUR-FEEDBURNER-ID' title='Subscribe to RSS'/></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>

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

Search This Blog

Typecast

Sharing is Sexy - Snazzy Social Buttons for Blogger