To make your work easier, here's an attractive bookmarking widget, that by default partially hides the buttons and shows them only when a visitor hovers his mouse-cursor over the icons.
So have a look on this widget, designed by Eight7Teen [Live Demo]
To add this widget to your blog, follow these instructions:
Step 1:
Log in to Blogger, go to Layout -> Edit HTML and mark the "Expand Widget Templates" box.
Step 2:
Now find (CTRL+F) this in the code:
</head>
And immediately
BEFORE/ABOVE it, paste this code:
<!--HIDDEN-BOOKMARKS-STARTS--> <style type='text/css'> div.beauty-bookmarks { height:54px; background:url('http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/sharingsexy.png') no-repeat left bottom; position:relative; width:540px; } div.beauty-bookmarks span.beauty-rightside { width:17px; height:54px; background:url('http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/sharingsexy.png') no-repeat right bottom; position:absolute; right:-17px; } div.beauty-bookmarks ul.socials { margin:0 !important; padding:0 !important; position:absolute; bottom:0; left:10px; } div.beauty-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.beauty-bookmarks ul.socials a { display:block !important; width:48px !important; height:29px !important; font-size:0 !important; color:transparent !important; } .beauty-furl, .beauty-furl:hover, .beauty-digg, .beauty-digg:hover, .beauty-reddit, .beauty-reddit:hover, .beauty-stumble, .beauty-stumble:hover, .beauty-delicious, .beauty-delicious:hover, .beauty-yahoo, .beauty-yahoo:hover, .beauty-blinklist, .beauty-blinklist:hover, .beauty-technorati, .beauty-technorati:hover, .beauty-facebook, .beauty-facebook:hover, .beauty-twitter, .beauty-twitter:hover, .beauty-myspace, .beauty-myspace:hover, .beauty-mixx, .beauty-mixx:hover, .beauty-script-style, .beauty-script-style:hover, .beauty-designfloat, .beauty-designfloat:hover, .beauty-syndicate, .beauty-syndicate:hover, .beauty-email, .beauty-email:hover { background:url('http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/sexysprite.png') no-repeat !important; } .beauty-furl { background-position:-300px top !important; } .beauty-furl:hover { background-position:-300px bottom !important; } .beauty-digg { background-position:-500px top !important; } .beauty-digg:hover { background-position:-500px bottom !important; } .beauty-reddit { background-position:-100px top !important; } .beauty-reddit:hover { background-position:-100px bottom !important; } .beauty-stumble { background-position:-50px top !important; } .beauty-stumble:hover { background-position:-50px bottom !important; } .beauty-delicious { background-position:left top !important; } .beauty-delicious:hover { background-position:left bottom !important; } .beauty-yahoo { background-position:-650px top !important; } .beauty-yahoo:hover { background-position:-650px bottom !important; } .beauty-blinklist { background-position:-600px top !important; } .beauty-blinklist:hover { background-position:-600px bottom !important; } .beauty-technorati { background-position:-700px top !important; } .beauty-technorati:hover { background-position:-700px bottom !important; } .beauty-myspace { background-position:-200px top !important; } .beauty-myspace:hover { background-position:-200px bottom !important; } .beauty-twitter { background-position:-350px top !important; } .beauty-twitter:hover { background-position:-350px bottom !important; } .beauty-facebook { background-position:-450px top !important; } .beauty-facebook:hover { background-position:-450px bottom !important; } .beauty-mixx { background-position:-250px top !important; } .beauty-mixx:hover { background-position:-250px bottom !important; } .beauty-script-style { background-position:-400px top !important; } .beauty-script-style:hover { background-position:-400px bottom !important; } .beauty-designfloat { background-position:-550px top !important; } .beauty-designfloat:hover { background-position:-550px bottom !important; } .beauty-syndicate { background-position:-150px top !important; } .beauty-syndicate:hover { background-position:-150px bottom !important; } .beauty-email { background-position:-753px top !important; } .beauty-email:hover { background-position:-753px bottom !important; } </style> <!--HIDDEN-BOOKMARKS-STOPS-http://bloggerstop.net-->
NOTE: To show the phrase "Sharing Is Caring" instead of
"Sharing Is Sexy", edit the above code like this:
Replace the text highlighted in BLUE color, i.e. instead of left bottom and right
bottom useleft top and right top.
Step 3:
Now find this in the code:
<data:post.body/>
And BELOW/AFTER that, paste
this code:
<b:if cond='data:blog.pageType == "item"'>
<div class='beauty-bookmarks'>
<ul class='socials'>
<li class='beauty-delicious'><a
expr:href='"http://del.icio.us/post?url=" + data:post.url +
"&title=" + data:post.title'
target='_blank'/></li>
<li class='beauty-digg'><a expr:href='"
http://digg.com/submit?url=" + data:post.url +
"&title=" + data:post.title'
target='_blank'/></li>
<li class='beauty-technorati'><a expr:href='"
http://technorati.com/faves?add=" + data:post.url +
"&title=" + data:post.title'
target='_blank'/></li>
<li class='beauty-reddit'><a expr:href='"
http://www.reddit.com/submit?url=" + data:post.url + "&title="
+ data:post.title' target='_blank'/></li>
<li class='beauty-stumble'><a expr:href='"
http://www.stumbleupon.com/submit?url=" + data:post.url +
"&title=" + data:post.title'
target='_blank'/></li>
<li class='beauty-designfloat'><a
expr:href='"http://www.designfloat.com/submit.php?url=" +
data:post.url + "&title=" + data:post.title'
target='_blank'/></li>
<li class='beauty-facebook'><a expr:href='"
http://www.facebook.com/sharer.php?u=" + data:post.url +
"&title=" + data:post.title'
target='_blank'/></li>
<li class='beauty-twitter'><a
expr:href='"http://twitter.com/home/?status=Chk Out-" +
data:post.title + " " + data:post.url'
target='_blank'/></li>
<li class='beauty-furl'><a expr:href='"
http://www.furl.net/storeIt.jsp?u=" + data:post.url +
"&title=" + data:post.title'
target='_blank'/></li>
<li class='beauty-syndicate'><a href='http://feeds.feedburner.com/bloggerstopnet' title='Subscribe
to RSS'/></li>
<li class='beauty-email'><a expr:href='"
mailto:?subject=" + data:post.url +
"&title=" + data:post.title'
target='_blank'/></li>
</ul>
<span class='beauty-rightside'/></div>
</b:if>
You may of course remove any button code, if you do not want to
show it.
Now save the template.
That's it. Now just write some good posts worth bookmarking
No comments:
Post a Comment