212 Readers
“First of all, why would I want to add this to my Blogger / Blogspot template? Don’t I already have social bookmarking options already?”
Although, Google Blogger Blogspot has recently made more changes available to your readers at the footer of your articles:
1) The list of choices available may will limit your reader from the ability to broadcast your article effectively to the ideal social medium.
2) The bookmarking interface is unsightly or not dynamic enough to invoke a response from your readers.
Primary Goals of Social Media Marketing
1) Harness huge amounts of traffic to a blog or website in a very little amount of time.
2) Blog exposure to new visitors, readers and advertisers.
3) Increased revenues, subscribers, and comments.
4) Creating effective backlinks in social media venues is an effective SEO strategy.
SexyBookmarks
SexyBookmarks is a WordPress plugin that inserts a (X)HTML compliant list-based menu of social bookmarking site icons in each post to allow users to easily submit your posts to some of the most popular social bookmarking networks automatically.
The good news for Blogspot users is now you can now add this to your posts!
Sexy Bookmarks is probably the coolest and sexiest social bookmarking now!
Do you want to have this too?
- If you’re using WordPress, you can download the plug-in here.
- Sexy Bookmarks for Blogger
If you are not technically inclined in making changes to your template’s HTML, do not worry! I have made this easy for you!
If you can copy and paste, you can do this!
0. Sign in to Blogger
1. Go to LAYOUT — Edit HTML — (checked expand widget templates)
Part 1: Apply CSS Coding
1. Find (CTRL+F) this code:
]]></b:skin>
2. Afterwards, Add this CSS composition below ]]></b:skin>
<style type=’text/css’>
div.sexy-bookmarks {
height:54px;
background:url(‘http://YOUR-IMAGE-HOSTING/sharingsexy.png‘) no-repeat left bottom;
position:relative;
width:540px;
}
div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url(‘http://YOUR-IMAGE-HOSTING/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://YOUR-IMAGE-HOSTING/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>
Are you still with me? Ok, take a deep breath. You are down with Part 1.
Part 2: Apply HTML coding
1. Now, find this code:
<data:post.body/>
Notice: If you have more than one of <data:post.body/> , you have to find the last <data:post.body/>. Usually, this is for the blogger who has incorporated the “read more” option. The last also means that, the sexy bookmark will appear when we enter the single page.
2. Copy paste this HTML composition below <data:post.body/>:
<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>
In part 1 , you will notice dark, bolded areas that require you to make edits.
Here’s why.
Over the past few years, there have been many sites regurgitating the same article on SexyBookMarks – with the same hosting address – for the same image required for the SexyBookMarks display. When that primary image’s hosting expired, thousands of Sexy Bookmarks applications were rendered useless because they were all linked to the same image.
The best thing for you to do is to use your own (free) image hosting like Image Shack or Photo Bucket and host the SexyBookMarks image yourself
What you are going to do is go here and extract the .png image from the .zip file. It’s easy.
Once you have extracted the .png image, you will upload it to your image hosting service. The image hosting service will give you the direct URL of where your new .png file is being held.
This URL is what you will use to replace the dark, bolded areas in Part 1.
In Part 2, you will need to replace the dark, bolded area only with your feedburner ID.
After you have gone into the CSS coding to plug in your image service’s .png image and changed your feedburner ID, save your template. You’re done.
When you are done, like in any template adjustment, make sure your settings work to your liking.
Always, always remember to research the blog author / site owner of who is supplying you coding and make sure it is from a trusted source!
6 Comments
Wow this is a great resource.. I’m enjoying it.. good article
Thanks it really help me a lot of putting this sexy bookmark….
Daisy recently posted..GodsWar SpeedHack
Hi, thanks for your post it was helpful. If you’re using Joomla do you know how to have sexy bookmarks be in the footer above other plugins that you would use for allowing people to post comments?
This is brilliant! I’ve been hunting around for a bit, trying to find a good “hack” to implement this on Blogger. I kept running into the ones with the defunct image, and I didn’t have the know-how it fix it myself. Thank you!
I take that back as I can’t get it to work. Keep getting an XML error. Ah well, it sounded lovely in theory.
Deanna T. recently posted..Canadian Friendly Giveaway Link-Up
Hi, I cannot find the first code of the part 2 “data:post.body/”. Do you have any idea how to solve it?