How to Add Social Bookmarking Widget On Blog
By Unknown - Friday, September 7, 2012
One of the social bookmarking widgets are provided to make it easy for blog owners and visitors On submit or bookmark the article that he liked to social bookmarking sites simply by clicking on the social bookmarking icons available.
Examples sharing is sexy widget below:
The uniqueness of sharing is sexy widget is a social bookmarking icons contained therein can be highlighted when the mouse moves so it looks more alive and interesting. For setting up a social bookmarking widget actually I've discussed in this blog only fitting way sharing is sexy widget is a little different. Therefore, in this post I will explain how to install the widget sharing is sexy in post blogger / blogspot.
For those of you who are interested, please follow the steps below:
1. Login to blogger with your account, then go to the Design >> Edit HTML.
2. You can check the 'Expand Widget Templates'
3. Place the following code above the]]> </ b: skin>
div.beauty-bookmarks {
height:54px;background:url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgiDi_7yrEQuv9TPDcM7_dbhj1cYtzUFKu1hi5Nf-OmdINBuOcdR-9Q4EMb-aQRwr-LalGr6ZrWcx9SU4KIiznXInK3wnjA2406YUvj491CsRgRcpv5eiAxhblmCm6aiINE7CiKFLWKyjh/’) no-repeat left bottom;position:relative;width:455px;}div.beauty-bookmarks span.beauty-rightside {width:17px;height:54px;background:url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgiDi_7yrEQuv9TPDcM7_dbhj1cYtzUFKu1hi5Nf-OmdINBuOcdR-9Q4EMb-aQRwr-LalGr6ZrWcx9SU4KIiznXInK3wnjA2406YUvj491CsRgRcpv5eiAxhblmCm6aiINE7CiKFLWKyjh/’) 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-technorati, .beauty-technorati:hover, .beauty-facebook, .beauty-facebook:hover, .beauty-twitter, .beauty-twitter:hover, .beauty-script-style, .beauty-script-style:hover, .beauty-designfloat, .beauty-designfloat:hover {background:url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghXL7EiK6MD-rsiw2VdQYj8OMxH0RH30Rzv8hjNG4OaPm4e-fObPmvoaux2OfrJC8tlz5NZhkGrTvPcmL-X4sjrxVqJZrVF0UvUOcnJxogLSUZQlCSWY32ILbIuJ_ysBTkCR143ngBuIdf/’) 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-technorati {background-position:-700px top !important;}.beauty-technorati:hover {background-position:-700px 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-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;}
Note:
If you want to replace 'Sharing is sexy' to 'Sharing is caring' then replace the bottom left and bottom right to top left and top right.
4. After the search <data:post.body/>
5. Place the following code below
5. Place the following code below
<b:if cond=’data:blog.pageType == “item”‘>
<div class=’beauty-bookmarks’>
<ul class=’socials’>
<!– delicious start–>
<li class=’beauty-delicious’><a expr:href=’"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title’ target=’_blank’/></li>
<!– delicious end–>
<!– digg start–>
<li class=’beauty-digg’><a expr:href=’" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title’ target=’_blank’/></li>
<!– digg end–>
<!– technorati start–>
<li class=’beauty-technorati’><a expr:href=’" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title’ target=’_blank’/></li>
<!– technorati end–>
<!– reddit start–>
<li class=’beauty-reddit’><a expr:href=’" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title’ target=’_blank’/></li>
<!– reddit end–>
<!– Stumbleupon start–>
<li class=’beauty-stumble’><a expr:href=’" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title’ target=’_blank’/></li>
<!– Stumbleupon end–>
<!– designfloat start–>
<li class=’beauty-designfloat’><a expr:href=’"http://www.designfloat.com/submit.php?url=" + data:post.url + "&title=" + data:post.title’ target=’_blank’/></li>
<!– designfloat end–>
<!– facebook start–>
<li class=’beauty-facebook’><a expr:href=’" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title’ target=’_blank’/></li>
<!– facebook end–>
<!– twitter start–>
<li class=’beauty-twitter’><a expr:href=’"http://twitter.com/home/?status=Chk Out-" + data:post.title + " " + data:post.url’ target=’_blank’/></li>
<!– twitter end–>
<!– furl start–>
<li class=’beauty-furl’><a expr:href=’" http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + data:post.title’ target=’_blank’/></li>
<!– furl end–>
</ul>
<span class=’beauty-rightside’/>
</div>
</b:if>
If there is a particular social bookmarking site that does not want to use then just delete the code. Example you do not want to install Facebook then delete the code like this:
<!– facebook start–>
<li class=’beauty-facebook’><a expr:href=’" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title’ target=’_blank’/></li><!– facebook end–>
6. If you've saved your template. Completed.
Follow our blog on Twitter, become a fan on Facebook. Stay updated via RSS
manatf gan