Never thought this EID would turn the best designing period of my life. After a lot of trial and error I managed to create a social bookmarking Icons widget using advanced CSS technique. I had consulted a lot of my friends on how to give an hover effect to social bookmarking icons below blogger posts using simple CSS but all methods that were suggested unfortunately did not help. I worked hard using the MBT HTML Editor to find out a way and luckily returned with a successful and unique CSS code that made my EID day an ever forgettable one!
Kindly have a demo of this widget before reading the tutorial. Remember to Hover your mouse cursor over the icons.
Social Bookmarking Widget For Blogger
This widget uses a total of 20 Icons but believe it or not it is super-fast and loads with in seconds. I merged all 20 Icons into one big image and used CSS Image stripes technique to make the icons appear at right positions. Fortunately this saves a lot of load time, because the browser will load all images at once and doesn’t need to contact the image server several times for uploading the images.
Now lets add them below each post in blogger ,
- Go To Blogger > Layout > Edit HTML
- Search For ]]></b:skin>
- And paste the code below just above ]]></b:skin>
/*--------MBT Bookmarking Widget (CSS#1)------*/
.mbt-bookmarking a {
display:block;
height:42px;
width:48px;
padding:0 9px;
float:left;
background:transparent url(http://4.bp.blogspot.com/_7wsQzULWIwo/SxYPky2M4VI/AAAAAAAACcs/SGTHHyAiZ4A/s1600/flapper.jpg) no-repeat;
}
.mbt-bookmarking a.delicious {
background-position:0px 0px;
}
.mbt-bookmarking a.delicious:hover {
background-position:0px -43px;
}
.mbt-bookmarking a.digg {
background-position:0px -86px;
}
.mbt-bookmarking a.digg:hover {
background-position:0px -129px;
}
.mbt-bookmarking a.stumbleupon {
background-position:0px -344px;
}
.mbt-bookmarking a.stumbleupon:hover {
background-position:0px -387px;
}
.mbt-bookmarking a.technorati {
background-position:0px -430px;
}
.mbt-bookmarking a.technorati:hover {
background-position:0px -473px;
}
.mbt-bookmarking a.twitter {
background-position:0px -516px;
}
.mbt-bookmarking a.twitter:hover {
background-position:0px -559px;
}
.mbt-bookmarking a.facebook {
background-position:0px -172px;
}
.mbt-bookmarking a.facebook:hover {
background-position:0px -215px;
}
.mbt-bookmarking a.reddit {
background-position:0px -258px;
}
.mbt-bookmarking a.reddit:hover {
background-position:0px -301px;
}
.mbt-bookmarking a.yahoo {
background-position:0px -602px;
}
.mbt-bookmarking a.yahoo:hover {
background-position:0px -645px;
}
.mbt-bookmarking a.rss {
background-position:0px -774px;
}
.mbt-bookmarking a.rss:hover {
background-position:0px -817px;
}
4. Now Check the box “Expand Widget Templates” at the top-right-corner
5. Search for this code <data:post.body/> . If you can not find it then search for this one <p><data:post.body/></p> (Tip:- Press Ctrl + F)
6. Just below <data:post.body/> OR <p><data:post.body/></p>, paste this code,
<!--MBT Bookmarking Widget (HTML)-->
<div class='mbt-bookmarking'>
<b:if cond='data:blog.pageType == "item"'>
<br/><font color='#289728' face='ms sans serif' size='3'><b>Kindly Bookmark and Share it:</b></font>
<br/><br/>
<!-- Delicious -->
<a class='delicious' expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious :>'/><!--DIGG-->
<a class='digg' expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url' rel='external nofollow' target='_blank' title='Digg this :>'/><!--Stumble-->
<a class='stumbleupon' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Stumble this :>'/><!-- Technorati -->
<a class='technorati' expr:href='"http://technorati.com/faves?add=" + data:post.url' rel='external nofollow' target='_blank' title='Fave this :>'/><!-- Twitter -->
<a class='twitter' expr:href='"http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Tweet this :>'/><!--Facebook-->
<a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' target='_blank' title='Share this on Facebook :>'/><!-- Reddit -->
<a class='reddit' expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Bookmark and tag this :>'/><!-- Yahoo -->
<a class='yahoo' expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?t=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Bookmark this :>'/><a class='rss' expr:href='data:blog.homepageUrl + "feeds/posts/default"'/>
</b:if></div>
You can replace the bolded text in green with any statement you like. You can also change the text colour i.e #289728 with any colour you like. Use our Color Chart for this purpose.
7. Now Finally save your template and view your blog to see a colorful bookmarking widget just below all your posts :>
That’s All!
If you want larger icons approximately about 64px by 64px in size, then paste the following code just above ]]></b:skin> for step#3 instead.
/*--------MBT Bookmarking Widget (CSS#2)------*/
.mbt-bookmarking a {
display:block;
height:55px;
width:64px;
padding:0 5px;
float:left;
position:relative;
background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/SxYfHuF_iwI/AAAAAAAACc0/SV0a0a3nAqk/s1600-h/flapper2.jpg) no-repeat;
}
.mbt-bookmarking a.delicious {
background-position:0px 0px;
}
.mbt-bookmarking a.delicious:hover {
background-position:0px -57px;
}
.mbt-bookmarking a.digg {
background-position:0px -114px;
}
.mbt-bookmarking a.digg:hover {
background-position:0px -171px;
}
.mbt-bookmarking a.stumbleupon {
background-position:0px -228px;
}
.mbt-bookmarking a.stumbleupon:hover {
background-position:0px -285px;
}
.mbt-bookmarking a.technorati {
background-position:0px -570px;
}
.mbt-bookmarking a.technorati:hover {
background-position:0px -627px;
}
.mbt-bookmarking a.twitter {
background-position:0px -684px;
}
.mbt-bookmarking a.twitter:hover {
background-position:0px -741px;
}
.mbt-bookmarking a.facebook {
background-position:0px -456px;
}
.mbt-bookmarking a.facebook:hover {
background-position:0px -513px;
}
.post-bookmark a.reddit {
background-position:0px -342px;
}
.mbt-bookmarking a.reddit:hover {
background-position:0px -399px;
}
.mbt-bookmarking a.yahoo {
background-position:0px -798px;
}
.mbt-bookmarking a.yahoo:hover {
background-position:0px -855px;
}
.mbt-bookmarking a.rss {
background-position:0px -912px;
}
.mbt-bookmarking a.rss:hover {
background-position:0px -969px;
}
For this tutorial I used “The Flapper” Icon Set
Do let me know how useful was this tutorial for you. Take care!
|
Respected Readers:
|
















13 comments:
Great Mohd ,
This is really awesome))...really nice.
Thanks for bringing something different and unique.
Mohammad I dont know how should I thank you! A big huggy to you!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
I am in love with your blog
@Manisha and @joe
My pleasure. Thanks for the encouragement!
nice post i was attracted by the images
and one more thing why dont you add vertical columns in cutebox template
when i am commenting with my name/url profile image is not showing in my blog jayarajyadav.blogspot.com profile images is also not showing
help me plz
Hi, Mohd, cool trick its nice. Could you please post about slideshows from related posts. like text slide or with thumbnails with a color line border.
@Chinna
I will publish a more updated version of cutebox if readers demand will increase for an extra column.
Profile images not showing is indeed an issue faced by all bloggers. I hope blogger will solve it soon.
@Sreejesh
Replated posts or featured posts with slideshows and thumbnails are always a blog owners first impression but when it comes to increase your blog load time most bloggers often step-back. Same has happened with me. They look good but they discourage readership with slow load.
For related posts with thumbnails use linkwithin.com . They have a pretty fair widget.
Nice Widget Mohd.
It perfectly blends with your cute box template.
Keep up the work :)
@Dsai
It is a pleasure to have you here. Thanks for the remarks!
sorry that i am troubling but i recently changed my template and tried same comment bubble but it is not showing as i like that should come after the post title help me plz
hope u understand
@chinna
Unfortunately I am badly busy these days. Will try to help you soon as I previously did.
hi,,
appreciate your mind to help others.. unfortunately nothing showing up in my blog.. tried both the css codes given by you.. Don't know what is wrong with it friend..
@pixelshots
Did you added the HTML part just below data:post.body?
That's wonderful ! Thanks for share !
Your feedback is always appreciated. I will try to reply to your queries as soon as time allows.
Note:-
1. Please do not spam Spam comments will be deleted immediately upon my review.
2. For asking Off-Topic questions please comment on this page -> Blogger Help
Regards,
Mohammad