June 1, 2011

Add Social Media Share Widget To Blogger - Mouse Hover Effect


social share widgetPresenting yet another beautiful social media connect widget that lets your visitors to search your blog, subscribe to your RSS Feeds, follow you on twitter, follow you on Facebook and share your blog with over 351+ Social Media Networks! This widget is an extracted code from a wordpress template provided by Pbloggertemplates. I have further edited the widget to make it a perfect social share tool. Please see the demo below,

 

Live Demo

 

Adding The Social Connect Widget To BlogSpot

  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Search for ]]></b:skin>  and paste the following code just above it,

/*  -------------MBT SOCIAL SHARE WIDGET-------------------- */
#search{width:350px; border:1px solid #E0DFD9;background:url(http://2.bp.blogspot.com/-L-6BIGrXfyA/TeDn95a4GxI/AAAAAAAAHLg/z1th8GgWvko/s1600/search-bg.png) left top repeat-x;height:32px;padding:0;text-align:left;overflow:hidden}
#search #s{width:80%; background:none;color:#3F3F3F;border:0;padding:4px;margin:3px 0 0 12px;float:left}
#search .search-image{border:0;vertical-align:top;float:right;margin:8px 4px 0 2px}
#search-wrap{padding:15px 0}
.topsearch #search{margin-top:0;margin-bottom:10px}


.social-connect-widget{background:#FFF;border:1px solid #E7E6DE;padding:10px}
.social-connect-widget:hover{border:1px solid #CBCBC2;background:#F5F4EF}
.social-connect-widget a{text-decoration:none;font-weight:bold;font-family:Arial,Helvetica,Sans-serif;color:#4B4D4E}
.social-connect-widget a:hover{text-decoration:underline;color:#F77C04}
.social-connect-widget img{vertical-align:middle;margin-right:5px}

  • To Change width of search box edit width:350px
  • To change width of search input area edit width:80%

 

     4.    Then Search for,

<div id='sidebar-wrapper'>

PS: In this part most of you will face problems as the coding for each template differ. If you could not find this code then do not panic and simply post your Blog URL in the comments.

     5.   Now Paste the following code just below it,

<div class='topsearch'>
<div class='clerfix' id='search'>
    <form action='/search' id='searchform' method='get'>
        <input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search here...&quot;;}' onfocus='if (this.value == &quot;Search here...&quot;) {this.value = &quot;&quot;}' type='text' value='Search here...'/>
        <input class='search-image' src='http://4.bp.blogspot.com/-4xLRhLRVVkI/TeDn9fTgT3I/AAAAAAAAHLY/5DuGTiOVtj8/s1600/search.png' title='Search' type='image'/>
    </form>
</div>
</div>
<div style='clear:both;'/>

<div class='social-connect-widget' style='margin-top:0px;margin-bottom:10px;'>
<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'><img alt='RSS Feed' src='http://3.bp.blogspot.com/-0kKKFqj_U2U/TZ52Sq7wwfI/AAAAAAAAEIQ/mrmCuT1KzjI/s1600/social-connect-rss.png' title='RSS Feed'/></a><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Subscribe to our RSS Feeds!</a>
</div>
                       
<div class='social-connect-widget' style='margin-bottom:10px;'>
<a href='http://twitter.com/USERNAME'><img alt='Follow Us on Twitter!' src='http://4.bp.blogspot.com/-vhFL0XMMYLg/TZ52S1xMdpI/AAAAAAAAEIY/uzxm685MciA/s1600/social-connect-twitter.png' title='Follow Us on Twitter!'/></a><a href='http://twitter.com/USERNAME'>Follow Us on Twitter!</a>
</div>

<div class='social-connect-widget' style='margin-bottom:10px;'>
<a href='http://facebook.com/USERNAME'><img alt='Be Our Fan!' src='http://1.bp.blogspot.com/-3tPdbv6JNYA/TZ52SSUbiVI/AAAAAAAAEII/tzPhCV1UIYU/s1600/social-connect-facebook.png' title='Be Our Fan'/></a><a href='http://facebook.com/USERNAME'>Follow us on Facebook!</a>
</div>

<div style='clear:both;'/>

<div class='addthis_toolbox'>  
<div class='custom_images'>
<a class='addthis_button_twitter'><img alt='Twitter' height='32' src='http://4.bp.blogspot.com/--haasmhP25E/TX0BIdW3PYI/AAAAAAAABec/ll0OKqU0z4M/s1600/twitter.png' width='32'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='http://4.bp.blogspot.com/-yL-sR48gGug/TX0A8-6p88I/AAAAAAAABds/_CXWKvVi8LU/s1600/delicious.png' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='http://4.bp.blogspot.com/-R8SGNJPGg68/TX0A9QHboaI/AAAAAAAABd8/OkHcJttzFr0/s1600/facebook.png' width='32'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='32' src='http://4.bp.blogspot.com/-X9vrqy4kNI4/TX0A9PtQIcI/AAAAAAAABd0/WahU3JI8r3o/s1600/digg.png' width='32'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='http://2.bp.blogspot.com/-iLJQkdXwnpo/TX0BIZ59J_I/AAAAAAAABeU/t367mp0EWJM/s1600/stumbleupon.png' width='32'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='http://1.bp.blogspot.com/-oam0L5GcIQo/TX0A9lXvQwI/AAAAAAAABeE/EPfnCictAv0/s1600/favorites.png' width='32'/></a>
<a class='addthis_button_more'><img alt='More' height='32' src='http://1.bp.blogspot.com/-duuV-meHLMg/TX0BILhZk3I/AAAAAAAABeM/ymXO0WYc80g/s1600/more.png' width='32'/></a>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
</div>
<div style='clear:both;'/>

Make these changes:

  • Replace http://twitter.com/USERNAME with your twitter profile link
  • Replace http://facebook.com/USERNAME with your Facebook Profile link

      6.   Save your template and Bingo you are done! :>

Visit your blogs to see a beautiful new change. Hope you liked it. Questions are always welcomed.

You will also like to view the previous version,





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 »

144 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. http://ibakchodi.blogspot.com/

    ReplyDelete
  2. http://itmytrip.blogspot.com/...please help me because i can workout with this

    ReplyDelete
  3. http://optimizing-pc-tips-and-tricks.blogspot.com/

    ReplyDelete
  4. http://convexcoders.blogspot.com/

    ReplyDelete
  5. http://better-body-building.blogspot.com/2011/07/are-you-motivated-bodybuilding-requires.html

    ReplyDelete
  6. http://searchchrome.com/top-10-rakhi-scraps-on-facebook/

    ReplyDelete
  7. Nice one but I need without twitter button
    Reply
    http://2earncash-online.blogspot.com

    ReplyDelete
  8. good tutorial! i was succesfull. your blog is wonderful, easy to understand and great! salute.

    ReplyDelete
  9. http://lovembabe-musiclover.blogspot.com

    ReplyDelete
  10. I am looking for this one with hover effects.. thanks..


    social media for churches

    ReplyDelete
  11. I love this! Do you have one updated with Google Plus as part of the social media profiles you can follow?

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

    ReplyDelete
  13. where to paste the second part of the code. i am not able to find

    div id = ' sidebar-wrapper'

    my site address is www.interestingfacts.in

    for your info: i using default template designer from blogger.
    please reply as soon as possible.
    Thanks

    ReplyDelete
  14. i can't add this one. can u help me. for your help i mention my blog

    http://shoukot-4the-people.blogspot.com/

    ReplyDelete
  15. thanx friend


    http://internetricks4u.blogspot.com/

    ReplyDelete
  16. http://gypsyterrain.blogspot.com/

    ReplyDelete
  17. www.real-innocent-angel.blogspot.com

    ReplyDelete
  18. Thanks, I am pretty much html illiterate but managed to follow these instructions! Much appreciated

    ~ Nicole

    www.envycollection.blogspot.com

    ReplyDelete
  19. I am using the Ethereal template on Blogger
    http://annick-it.blogspot.com/

    ReplyDelete
  20. http://vinnydphotography.blogspot.com/

    ReplyDelete
  21. http://artistbychance.blogspot.com

    ReplyDelete
  22. http://imprezzabatik.blogspot.com/

    ReplyDelete
  23. Hi :) My Blog Link is http://jstxplore.blogspot.com/ , can't find the code which you mentioned (and also please recommend and guide me to improve my blog ) thanks :)

    ReplyDelete
  24. I want to put these buttons in my blog which is based on the "Simple" template in blogger. Where do I put the second part of your instructions?
    Thanks heaps

    ReplyDelete
  25. www.drivesinindia.blogspot.com

    ReplyDelete
  26. I would like to remove the ones from the bottom, but i don't know how to do it, is their a way to do this or not?, Thank you and your blog is amzing it makes me aprecciate blogger alot more!

    ReplyDelete
  27. http://makeup-glitz.blogspot.com/

    ReplyDelete
  28. http://fresh-you.blogspot.com/ THANKS!

    ReplyDelete
  29. My blog ID is: http://iloveislamarticles.blogspot.com/
    Help will be appreciated. Thanks

    ReplyDelete
  30. my blog,.. need help.. for the second coding..
    http://buletinlepak.blogspot.com/

    ReplyDelete
  31. As you said, I failed to find div id='sidebar-wrapper' in my blog source.... so?
    here's my blog's address:
    http://tellhowto.blogspot.com/

    ReplyDelete
  32. http://drajatdwihartono.blogspot.cm=om

    ReplyDelete
  33. http://netmobileshare.blogspot.com/

    ReplyDelete
  34. http://androidbrasilmarket.blogspot.com/

    ReplyDelete
  35. where to paste the second part of the code. i am not able to find
    div id = ' sidebar-wrapper'

    ReplyDelete
  36. www.sosyalmedyacci.com, i cant find the code? could you plz help me?

    ReplyDelete
  37. http://www.blogenterpretner.blogspot.com

    ReplyDelete
  38. hey good post ..check my blog too http://newsboxblog.blogspot.com

    ReplyDelete
  39. http://e-frapedia.blogspot.com/

    ReplyDelete
  40. i cant find the second part can you help??

    ReplyDelete
  41. Thank you muhammad!!! so far your tutorials that I've tried are stable & it worked. thank you very much! :)

    ReplyDelete
  42. http://www.statsprofessor.blogspot.com/

    Can't find the line plus I would only like to use the bottom "sharing" buttons. Thanks.

    ReplyDelete
  43. http://amanhackingarticles.blogspot.com

    plz help

    ReplyDelete
  44. looks like we'll never get this working :(

    ReplyDelete
  45. If you can not find id='sidebar-wrapper' then simply add the code giant code in step#5 inside a HTML/javascript widget. It will work just perfectly.

    Go to Design > Page Elements
    Select Add a Gadget
    Choose HTML/JAvascript
    Paste the code inside it and save
    Done!

    ReplyDelete
  46. I tried that but none of the icons show up. Just a big mess. It's somewhat working if you click to share on face book. But it's all text. Don't get it as there are .png files pointing towards it.

    I've noticed the .png files got a 404 so I added my own and it's still not showing up......

    I guess this is going thru the "addthis", was hoping to avoid them or use a custom method but this is probably the easiest.

    Still not sure why the icons are not showing. Had a problem with addthis and sharethis before with stuff not showing up properly. Thanks for the effort though, I'm almost there. lol

    ReplyDelete
  47. Looks like I'm getting it to work somehow with enough playing around.

    ' were replaced with " in the html widgetbox and different files. At least I got one Icon working.

    Thanks for the article. Is there anyway we can do this without "addthis"?

    ReplyDelete
  48. Awesome post.Here’s a tool that lets you build any type of web app widget in minutes, without coding http://blog.caspio.com/web_apps/widgetize-your-app-for-fame-and fortune/

    ReplyDelete
  49. I'll gear this review to 2 types of people: current Zune owners who are considering an upgrade, and people trying to decide between a Zune and an iPod.

    What is torrent
    What is a torrent

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

    ReplyDelete
  51. http://mcilreavytutorials.blogspot.com :)

    ReplyDelete
  52. http://gastromandie.blogspot.com/

    ReplyDelete
  53. wow its awesome!
    but my background is in black color nd dis box is of white color... how to change?

    ReplyDelete
  54. mikrotiktutorialblog.blogspot.com m having problem don find in my blogger

    ReplyDelete
  55. Succesful
    http://xlimideas.blogspot.com

    ReplyDelete
  56. This is my blog adress

    http://novasolis.blogspot.com/

    how should i proceed on step four

    ReplyDelete
  57. Mine is Androidfullfree.blogspot.com ..
    Please help me

    ReplyDelete
  58. http://globalsportupdates.blogspot.com/ pls

    ReplyDelete
  59. hey mhmd....
    my http://gismohub.blogspot.in/ is this
    when apply this widget then my template sidebar is small width corresponding to widget .
    So pls can u tell how can i increase template width or decrease the width of widget.
    But i want to increase my template width bcs other blogger widget going outside from sidbaar.
    Great work u done thnx....

    ReplyDelete
  60. hahahahhaa jadi gan kwkwkwkw thanks yah sip kwkwk

    ReplyDelete
  61. i didn't find it either :(
    http://koralive-tv.blogspot.com/

    ReplyDelete
  62. Bana yardımcı olun http://www.webdocrin.com/

    ReplyDelete
  63. http://geniuspakistani.blogspot.com/

    ReplyDelete
  64. news template
    beatiful http://www.webdocrin.com/

    ReplyDelete
  65. hey Mohammad Mustafa Ahmedzai
    Great post and widget for blogs and it also have search functionality with it
    so thnx for post...

    ReplyDelete
  66. i have not see the code for the 2nd part
    dafaqq.blogspot.com -- > Dafuq is thi?!

    ReplyDelete
  67. Help please, I can't find that code (no. 2), the url for my blog : http://foodiewithlove.blogspot.com
    Let me know if you can help me or else to get another widget!
    Thanks,
    Laura

    ReplyDelete
  68. http://boldtextmedia.blogspot.com.au/

    Please help me! I can't find the div id sidebar wrapper par tin my code. Thanks!

    ReplyDelete
  69. http://balajiseoexperts.blogspot.in/

    ReplyDelete
  70. http://www.almasira-encyclopedia.com/

    ReplyDelete
  71. Widget to social media is a good addition. See, at the end of the day you only take into account that is worth the shot.

    Social Media Singapore

    ReplyDelete
  72. This is very technical tips for blogspot blog.

    Social Media Update

    ReplyDelete
  73. http://easyerningtipsbd.blogspot.com

    ReplyDelete
  74. Cannot find id='sidebar-wrapper'> in my HTML code, my blog is sneakerreserve.blogspot.com. Please help. Thank you.

    ReplyDelete
  75. http://www.psdtipstricks.blogspot.com

    ReplyDelete
  76. This is a really cool article. it did explained well on how to add Share widgets.

    website layouts

    ReplyDelete
  77. This is my blog url. http://jocodester.blogspot.com

    ReplyDelete
  78. My Blog
    http://techtipsmadeeasy.blogspot.com/
    Rss feed don't work

    ReplyDelete
  79. http://tyhadareads.blogspot.com/

    ReplyDelete
  80. i con't adding in my blog
    http://engineers-rock.blogspot.com

    ReplyDelete
  81. Successfully installed on my blog - techSiddharth.com :)

    Lots of thanks

    ReplyDelete
  82. This looks like the best social sharing widget out there. Kudos. I would love to add it to my blog. http://fortressofsoniatude.blogspot.ie/

    ReplyDelete
  83. thanks soo much..love it...can the rss feed be removed?

    ReplyDelete
  84. AOA MUSTAFA BHAI,,, We are facing the problem in the second part... Thank u ...http://pakbloggings.blogspot.com/

    ReplyDelete
  85. http://completeinfos.blogspot.com

    ReplyDelete
  86. http://darkloveworld.blogspot.com

    ReplyDelete
  87. Very interesting widget!

    http://gewi-hilfe.blogspot.co.at/

    ReplyDelete
  88. http://professorcomputer.blogspot.com/

    ReplyDelete
  89. I Not didn't Find
    div id='sidebar-wrapper'
    for my blog
    http://myeducationtube.blogspot.com/

    ReplyDelete
  90. http://fullyfullversiongames.blogspot.com/

    ReplyDelete
  91. http://fullyfullversiongames.blogspot.com/

    ReplyDelete
  92. thanx i have added this on my blog, http://freecs-books.blogspot.com/

    ReplyDelete
  93. fullytop5gamez.blogspot.com, Download latest games

    ReplyDelete
  94. Nice post dude ,
    Please visit internetguru7.blogspot.com

    ReplyDelete