December 3, 2009

Add CSS Based Social Bookmarking Widget To Blogger Blogs & Websites


Social-Bookmarking-Widget-For Blogger 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.

This is the big image I used,mbt-bookmarking-widget

Now lets add them below each post in blogger ,

  1. Go To Blogger > Layout > Edit HTML
  2. Search For ]]></b:skin>
  3. 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 expand-widgets

     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 == &quot;item&quot;'>
<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='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious :&gt;'/>

<!--DIGG-->
<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank' title='Digg this :&gt;'/>

<!--Stumble-->
<a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Stumble this :&gt;'/>

<!-- Technorati -->
<a class='technorati' expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank' title='Fave this :&gt;'/>

<!-- Twitter -->
<a class='twitter' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Tweet this :&gt;'/>

<!--Facebook-->
<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Share this on Facebook :&gt;'/>

<!-- Reddit -->
<a class='reddit' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Bookmark and tag this :&gt;'/>

<!-- Yahoo -->
<a class='yahoo' expr:href='&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?t=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Bookmark this :&gt;'/>

<a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'/>
</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!





If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

64 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. Great Mohd ,
    This is really awesome))...really nice.
    Thanks for bringing something different and unique.

    ReplyDelete
  2. Mohammad I dont know how should I thank you! A big huggy to you!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!


    I am in love with your blog

    ReplyDelete
  3. @Manisha and @joe

    My pleasure. Thanks for the encouragement!

    ReplyDelete
  4. 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

    ReplyDelete
  5. 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.

    ReplyDelete
  6. @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.

    ReplyDelete
  7. Nice Widget Mohd.
    It perfectly blends with your cute box template.
    Keep up the work :)

    ReplyDelete
  8. @Dsai

    It is a pleasure to have you here. Thanks for the remarks!

    ReplyDelete
  9. 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

    ReplyDelete
  10. @chinna

    Unfortunately I am badly busy these days. Will try to help you soon as I previously did.

    ReplyDelete
  11. 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..

    ReplyDelete
  12. @pixelshots

    Did you added the HTML part just below data:post.body?

    ReplyDelete
  13. That's wonderful ! Thanks for share !

    ReplyDelete
  14. Alhamdulillah.. This is so good.. Thanks bro.

    ReplyDelete
  15. I had 2 hours of damned errors in blogger :@@@@@
    1: "div" end-matching
    30 minute to locate the (censored) "div" tag but no matching
    2: the google company and writing this comment

    So could you please really solve my issue cause its not fair --> 2 HOURS
    Choukran

    ReplyDelete
  16. @Blogger Terrorist :@

    Dear it sounds you are really pissed!! :p
    I would love to help you but I would appreciate if you write in detail what problem are you facing. What div tag are you searching for? Is it related to the tutorial on this page? Please clarify so that I could suggest something..

    ReplyDelete
  17. Dear Mohammad
    I had a bad mood in that day.So dont misunderstand me :D
    Im using your mbt church theme.It come with normal social bookmarking,but when i try to delete it to replace it with the new bookmarking above then save it, it say " The element type "div" must be terminated by the matching end-tag " but where is that "div" i didnt find it & i had this errors only in step 6

    Thats my problem and im extremly sorry to any inconvenience!
    10x

    ReplyDelete
  18. @Black Market

    It's ok! We are humans after all! :> I just wrote a reply to you of about 400 words and when I clicked post I got an error and the comment was lost..ArGG! But I am used to it!

    Well instead of debugging the problem the best solution will be to follow the steps below to successfully replace the correct code in your template with the icons in the post above.


    1. After you have added the CSS code in step#3 then Inside your template search for this code,
    <br/><center><span style='color: #7AA1C3; font-size: 12px; font-family: Verdana;);'><b>Kindly Bookmark this Post using your favorite Bookmarking service:</b></span><br/>
    <a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' src='http://3.bp.blogspot.com/_7wsQzULWIwo/Sl-Oc3ziCTI/AAAAAAAABgY/4X3tEFqHAkE/s400/technorati.png '/></a>
    <!--DIGG-->
    <a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Digg This' src='http://4.bp.blogspot.com/_7wsQzULWIwo/Sl-ONnT0bWI/AAAAAAAABgA/L-Ex1vnxS5U/s400/digg.png '/></a>
    <!--Stumble-->
    <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' src='http://1.bp.blogspot.com/_7wsQzULWIwo/Sl-OY5rkKfI/AAAAAAAABgQ/FwgX60CowGI/s400/stumbleupon.png'/></a>
    <!--Reddit-->
    <a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' src='http://3.bp.blogspot.com/_7wsQzULWIwo/Sl-RMjrrfDI/AAAAAAAABgw/4prAhRyxtx8/s400/reddit.png'/></a>
    <!--Facebook-->
    <a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' src='http://2.bp.blogspot.com/_7wsQzULWIwo/Sl-OSD_E3TI/AAAAAAAABgI/KYB7uFgNm6U/s400/facebook.png '/></a>
    <!-- Twitter -->
    <a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Twitter' src='http://4.bp.blogspot.com/_7wsQzULWIwo/Sl-Oicftv4I/AAAAAAAABgg/G3YmMC9glXw/s400/twitter.png'/></a></center>



    2. Now replace this code with the code in step 6.

    3. That is it. View your template to see a change like this one -> http://mbt-lab.blogspot.com/2009/12/wfewefwefwefwe.html


    Hope the answer is convincing! :D

    ReplyDelete
  19. Hey Mohmmad :D
    Hehehe We've got to be patient(to a limit of course). Alhamdullah its working 100%, may be i was wrong about the "div" tag.I dont know. Im facing a thorny problem : I want to center the bookmarking icons like i centered the text 'Kindly Bookmark....' HOw to?

    See you after your comment

    Regards. :>

    ReplyDelete
  20. @Black Market

    Glad it worked for you. First show me how it looks in your blog so that I could suggest further.

    ReplyDelete
  21. Thanks, I resolved that I can modified the length by padding. It helps load page faster.

    ReplyDelete
  22. hi...
    i have applied this tutorial on my blog..
    but i want to change the images with your WINDOW STYLE MBT ICONS...
    how to i do that....
    u can check

    here is my blog:
    http://planet-hd.blogspot.com/

    ReplyDelete
  23. As-salamualikum Brother,
    Thank you very much for the code. I was looking for it and because of you I have got it. Again thanks.

    ReplyDelete
  24. @Samsexy

    For that you will need to stripe a new image containing all your new icons. It will cost me a whole new post to explain it because then you will have to change all padding values!

    @Hasan

    W/Salam brother!
    I am really happy it helped you out. :>

    ReplyDelete
  25. no worries..
    will use this only...

    ReplyDelete
  26. Hey Muhamed;

    Thanks a lot for this lovely widget, I have managed to successfully modify it to work with Zen-Cart, it looks great.

    Ahmed

    ReplyDelete
  27. great post.llove it works great on my blog
    thanks friend..

    ReplyDelete
  28. Assalamu'alaykum...

    sexy. Thanks, u're a good-man

    ReplyDelete
  29. thanks for the sharing article. i will tray to my blog.

    ReplyDelete
  30. I Think of your talents as the things you’re really good at. They’re like personality traits. For instance, you may be a very creative person, or a person who’s really good at attending to details or a person with a gift for communicating. Your talents are the base for any successful business venture, including a home-based business.

    ReplyDelete
  31. Good ideas you have shared on css since long time i have been searching like that post. thank you for sharing.

    ReplyDelete
  32. Hi Mohammed. Can you please give me the code of the social bookmarking widget you use! It really looks awesome!

    ReplyDelete
  33. It worked man! Really awesome! What else should i say? Looks great on my blog! Check it out!!

    ReplyDelete
  34. I liked to try the big ones, but they dont work. Can you help? I am using the small ones now (CSS 1).

    ReplyDelete
  35. @Ayush

    I am glad you liked it buddy. Dude I am afraid I will have to keep few things to MBT else I will loose my blog's uniqueness :P

    And what problem are you actually facing with the big ones. You need to follow the same steps for it too.

    ReplyDelete
  36. @mohammad. I can see the icons when i use the css 2

    ReplyDelete
  37. hey mustafa,
    Your posts are very useful.I want to use some nice social media icons instead of you icons for this social bookmarking widget.how can i do that.

    ReplyDelete
  38. This comment has been removed by the author.

    ReplyDelete
  39. Bro it's not happening on my blog, i don't know what's the problem, not just ur's, im unable to add any social bookmark buttons below my posts, and more thing bro, if you look at the homepage of my blog you will find a white gap between my two posts, it's kinda look wierd, can you tell me what to do to remove that white gaps, any help would be appreciated

    www.thebloggingtutorial.blogspot.com

    ReplyDelete
  40. Hi I'm having trouble with this CSS. I followed the steps and to my knowledge everything came out alright. The thing is that the icons do not appear, they are invisible. The letters are there, but the icons are not there. I used the second CSS code. Please help.
    Thanks for all the insightful tricks, I really like your blog. ^^

    ReplyDelete
  41. This comment has been removed by the author.

    ReplyDelete
  42. Hi! I need ur help. why i didn't see icon? i do it all step but It's show only word Kindly Bookmark and Share it:.....plz go to my blog and see it how can i fix it http://thrill4us.blogspot.com/2011/10/honey-2-2011-dvdrip.html thx anyway i like ur blog :D

    ReplyDelete
  43. Great Blog with very good posts. Can you please tell me that how much time you take to create this wonderful blog, although I am new on internet but your work is very good and I appreciate your work.
    Buy Twitter Followers

    ReplyDelete
  44. nice post..n i like these bookmarks are more cool than the previous one's you wrote about..Forex Capital Markets

    ReplyDelete
  45. Thank you, I have recently been searching for information about this topic and yours is the best I have discovered so far. buy facebook fans

    ReplyDelete
  46. This comment has been removed by the author.

    ReplyDelete
  47. This comment has been removed by the author.

    ReplyDelete
  48. There wasn't anything for a black background that I could find, so I edited it. One is a .png for transparency and the second is a .jpg with a black background. I found the transparent one to fit my needs perfectly for any type of blog I worked on. Thanks!

    http://1.bp.blogspot.com/-m2hsHcTpuaM/T1PrB5yvxrI/AAAAAAAAEq0/Svj5hiV0GEU/s1600/Share+It.png

    http://1.bp.blogspot.com/-rU9KD2lvfIY/T1PrBdi6r3I/AAAAAAAAEqs/y4yFXpH6l0E/s1600/Share+It.jpg

    ReplyDelete
  49. It was very interesting for me to read that blog. Thanks the author for it.I like such topics and everything that is connected to them.
    I would like to read more soon.

    ReplyDelete
  50. i have try it to my blog and it doesn't show up, if you not busy, hop you can help me to put the code above in to my blog, thanks

    ReplyDelete
  51. This comment has been removed by the author.

    ReplyDelete
  52. Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.
    youtube html5 player

    ReplyDelete
  53. Great post, you have pointed out some superb details, I will tell my friends that this is a very informative blog thanks.
    Buy Facebook Fans

    ReplyDelete
  54. Very Nice widget i like it and i have implemented in my blog geeksware.blogspot.in

    ReplyDelete
  55. These articles and blogs are truly enough for me for a day.
    Share It

    ReplyDelete
  56. Hi I'm having trouble with this CSS. I followed the steps and to my knowledge everything came out alright.
    buy facebook likes

    ReplyDelete
  57. Thanks for the code. I will try to use this to add social widget at http://www.plusonefoundry.com

    ReplyDelete
  58. buy cheap twitter followers
    To turn really interesting ideas and fledgling technologies into a company that can continue to innovate for years, it requires a lot of disciplines.
    buy cheap twitter followers

    ReplyDelete
  59. I have Four times ....:( what to do know?

    ReplyDelete
  60. Share Market Investment made profitable by SHRISTOCKTIPS- Get NSE/BSE Tips via SMS and Yahoo Messenger. We give daily stock market tips for future and cash segments. Market is going through a very complex phase. Not Clearing the trend .So trade with a stoploss is must. But One thing is clear that you can made a sell position in NIFTY & some selected blue-chip stocks near the level of 6000-6020 with stoploss of 6070. This profitSTOCK MARKET FREE TIPS, NSE TIPSwill be the best position you can make in the Nifty in this present market. Because NIFTY is not able to cross the level of 6030-6050 .so these are the major resistance of NIFTY.As we all know that Rupee is giving a very bad signal for the Indian economy So best position is to sell at higher level whether you are a intraday trader or a positional trader. Even banking is not giving any kind of support to the market. You can also make a sell position in banking stocks but with the stoploss must at higher levels. This is at present best strategy you can take in the present market.
    Regards
    SHRISTOCKTIPS TEAM

    ReplyDelete