Wednesday, September 2, 2009

Add AutoHiding Social Bookmarking Widget

on   in , ,   with No comments
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.

Screen-Shot:

So have a look on this widget, designed by Eight7Teen

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://i43.tinypic.com/2ueii3t.png') no-repeat left bottom;
position:relative;
width:540px;
}

div.beauty-bookmarks span.beauty-rightside {
width:17px;
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.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://i44.tinypic.com/1znbj83.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://bloggeralerts.blogspot.com-->


Step 3:
Now find this in the code:

<data:post.body/>


And BELOW/AFTER that, paste this code:


<!-- Social Bookmarking Icons Start-->
<style type='text/css'>
.bookmark img { border: 0;
padding:0px;
}
.bookmark a:hover {
position: relative;
top: 1px;
left: 1px; }
</style>
<span class='bookmark'>
<table align='left' border='0' cellpadding='0' width='100%'>
<tr>
<td style='vertical-align:middle' valign='middle' width='30%'>
<div expr:id='"sbtxt" data:post.id'>Bookmark this post<a style="text-decoration:none;" href="http://www.bloggerplugis.org">:</a></div><script type='text/javascript'>showsbtext(&quot;sbtxt&quot; &quot;<data:post.id/>&quot;,0)</script>
</td>
<td>
<a rel="nofollow" expr:href='"http://ma.gnolia.com/bookmarklet/add?url=" data:post.url "&amp;title=" data:post.title' expr:onmouseout='"javascript:showsbtext("sbtxt" data:post.id "",0);"' expr:onmouseover='"javascript:showsbtext("sbtxt" data:post.id "",6);"' target='_blank'><img alt='Ma.gnolia' border='0' src='http://files.bloggerplugins.org/icon_sb_mag.gif'/></a>
<a rel="nofollow" expr:href='"http://digg.com/submit?phase=3&amp;url=" data:post.url' expr:onmouseout='"javascript:showsbtext("sbtxt" data:post.id "",0);"' expr:onmouseover='"javascript:showsbtext("sbtxt" data:post.id "",1);"' target='_blank'><img alt='DiggIt!' src='http://files.bloggerplugins.org/icon_sb_dig.gif'/></a> <a rel="nofollow" expr:href='"http://del.icio.us/post?url=" data:post.url "&amp;title=" data:post.title' expr:onmouseout='"javascript:showsbtext("sbtxt" data:post.id "",0);"' expr:onmouseover='"javascript:showsbtext("sbtxt" data:post.id "",2);"' target='_blank'><img alt='Del.icio.us' src='http://files.bloggerplugins.org/icon_sb_del.gif'/></a> <a rel="nofollow" expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Description=&amp;Url=" data:post.url "&amp;Title=" data:post.title' expr:onmouseout='"javascript:showsbtext("sbtxt" data:post.id "",0);"' expr:onmouseover='"javascript:showsbtext("sbtxt" data:post.id "",3);"' target='_blank'><img alt='Blinklist' src='http://files.bloggerplugins.org/icon_sb_bli.gif'/></a> <a rel="nofollow" expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?u=" data:post.url "&amp;=" data:post.title' expr:onmouseout='"javascript:showsbtext("sbtxt" data:post.id "",0);"' expr:onmouseover='"javascript:showsbtext("sbtxt" data:post.id "",4);"' target='_blank'><img alt='Yahoo' src='http://files.bloggerplugins.org/icon_sb_yah.gif'/></a> <a rel="nofollow" expr:href='"http://www.furl.net/storeIt.jsp?u=" data:post.url "&amp;t=" data:post.title' expr:onmouseout='"javascript:showsbtext("sbtxt" data:post.id "",0);"' expr:onmouseover='"javascript:showsbtext("sbtxt" data:post.id "",8);"' target='_blank'><img alt='Furl' src='http://files.bloggerplugins.org/icon_sb_fur.gif'/></a> <a rel="nofollow" expr:href='"http://www.technorati.com/cosmos/search.html?url=" data:post.url' expr:onmouseout='"javascript:showsbtext("sbtxt" data:post.id "",0);"' expr:onmouseover='"javascript:showsbtext("sbtxt" data:post.id "",9);"' target='_blank'><img alt='Technorati' src='http://files.bloggerplugins.org/icon_sb_tec.gif'/></a> <a rel="nofollow" expr:href='"http://www.simpy.com/simpy/LinkAdd.do?href=" data:post.url "&amp;title=" data:post.title' expr:onmouseout='"javascript:showsbtext("sbtxt" data:post.id "",0);"' expr:onmouseover='"javascript:showsbtext("sbtxt" data:post.id "",10);"' target='_blank'><img alt='Simpy' src='http://files.bloggerplugins.org/icon_sb_sim.gif'/></a> <a rel="nofollow" expr:href='"http://www.spurl.net/spurl.php?url=" data:post.url "&amp;title=" data:post.title' expr:onmouseout='"javascript:showsbtext("sbtxt" data:post.id "",0);"' expr:onmouseover='"javascript:showsbtext("sbtxt" data:post.id "",11);"' target='_blank'><img alt='Spurl' src='http://files.bloggerplugins.org/icon_sb_spu.gif'/></a> <a rel="nofollow" expr:href='"http://reddit.com/submit?url=" data:post.url "&amp;title=" data:post.title' expr:onmouseout='"javascript:showsbtext("sbtxt" data:post.id "",0);"' expr:onmouseover='"javascript:showsbtext("sbtxt" data:post.id "",17);"' target='_blank'><img alt='Reddit' src='http://files.bloggerplugins.org/icon_sb_red.gif'/></a> <a rel="nofollow" expr:href='"http://www.google.com/bookmarks/mark?op=add&amp;bkmk=" data:post.url "&amp;title=" data:post.title' expr:onmouseout='"javascript:showsbtext("sbtxt" data:post.id "",0);"' expr:onmouseover='"javascript:showsbtext("sbtxt" data:post.id "",19);"' target='_blank'><img alt='Google' src='http://files.bloggerplugins.org/icon_sb_goo.gif'/></a>
</td>
</tr>
</table><br/><br/>
<p align="right">
<a href="http://bloggeralerts.blogspot.com/2009/09/add-autohiding-social-bookmarking.html" target="_blank">Get This Widget</a>
</p>
</span>
<!-- Social Bookmarking Icons End-->


You may of course remove any button code, if you do not want to show it.

Now save the template.

That's it

Credits: BloggerAlerts via BloggerStop
Share:

0 comments:

Post a Comment