Social Bookmarking Widget
Many Bloggers today want their end of the post shine bookmarking widget.
and let me tell you your wait is over.Not like I have never seen a bookmarking Widget below
a post.
But, I have never found it with something sexy. Yes, It has a short title "add is sexy", very
stylist and also sexy.... :). Please see the screenshot below.
And It's not that dull as it looks. It's more responsive try hovering your mouse over the same
widget below this post.
Now, I will try to explain about how to add that in Blogger.
Step 1 Go to LAYOUT -- Edit HTML -- (checked expand widget templates)( I recommend you
to Backup the existing Template first)
Step 2 Afterwards, Add this CSS composition below it.
div.sexy-bookmarks {
height:54px;
background:url('https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sjWx0p3cM4bsX6KO_QV6Xq7kFOkGZOA8dBa83ubnEs3ByK4Y0qIIsSuXuxRYnJshOswAqSrbIfqyM9KD-SJzVbP3NetVU=s0-d') no-repeat left bottom;
position:relative;
width:540px;
}
div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url('https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sjWx0p3cM4bsX6KO_QV6Xq7kFOkGZOA8dBa83ubnEs3ByK4Y0qIIsSuXuxRYnJshOswAqSrbIfqyM9KD-SJzVbP3NetVU=s0-d') 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('https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_upJwUFmDFc_cVxlsepftuYKk4BPupcd3fCw5HDg5qycSJnsW-gg_ciRMZBJVZyV_PetqGPmg15nYm2-3qaq4fhNjgyfkAYSymafH79rVuIbA2bKhwE11ZydQ=s0-d') 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;
}
Now Save the template and again expand the template
Step 3 Please find this code:
then, copy paste this HTML composition after the code
. Change YOUR FEEDBURNER ID in the code to your Feedburner Url .
Save Your Template. And it is done.