Animated Social Sharing Tooltips Widget For Blogger

Advertisements
After the rapid growth and development in Social networking websites, lots of peoples are showing their interest in socializing their website with their favorite social networking website i.e. Facebook, Google Plus, Twitter and etc. The prompt progress in Social Media has made everyone think about its significance. This is the reasons why every now and then we are able to see stunning Widgets that relates Social Media. Tooltips is the latest addition in the Social networking Widgets. Whenever, your visitors would place their pointer on a social icon a small box will appear with information about the specific item that is being hovered. Today we will be integrating Tooltip Social Sharing Widget in BlogSpot Blog.

Features of Tooltips Social Sharing Widget:

  • Tooltip functionality adds more color and spice to this widget, because users can play while they are bookmarking your website on their personal best social website.
  • The icons used in this widget are not ordinary one they are highly professional build with 3D frame work, so it will guaranty eye-catching look.
  • It has total of 5 Social website along with RSS Feed that will allow you to maximize your Subscribers.
  • This widget is entirely built with Pure CSS and HTML, so no compromise on the site speed and performance.

How To Install Tooltips Social Plugin in Blogger:

The steps are extremely straightforward, and would merely take 5 minutes to complete the integration. Just follow the steps as mention below.
  • Step#1: Go to Blogger.com >> Template >> Edit HTML >> Proceed
  • Step#2: Now within the template search for ]]></b:skin> and just above it paste the following Style sheet CSS Code.
/*---MyBloggerLab.com Animated Social Sharing Tooltips Widget ---*/
.mbl-wrapper{
 padding: 0;
 width: 535px;
 height: 70px;
 margin: 80px auto 30px auto;
}
.mbl-wrapper ul{
 float: left;
}
.mbl-wrapper ul a{
 display: block;
 width: 68px;
 height: 70px;
 margin:  -10 -24 px;
 outline: none;
 background: transparent url(http://3.bp.blogspot.com/-CNgvgrGtBIM/UEYqib91KFI/AAAAAAAAFGY/ECCh9_1LAvo/s1600/1.png) no-repeat top left;
 text-indent: -9000px;
 position: relative;
}
.mbl-wrapper ul .mbl-gplus{
    background-position: 0px 0px;
}
.mbl-wrapper ul .mbl-twitter{
    background-position: -68px 0px;
}
.mbl-wrapper ul .mbl-pinterest{
    background-position: -136px 0px;
}
.mbl-wrapper ul .mbl-facebook{
    background-position: -204px 0px;
}
.mbl-wrapper ul .mbl-linkedin{
    background-position: -272px 0px;
}
.mbl-wrapper ul .mbl-rss{
    background-position: -340px 0px;
}
.mbl-wrapper ul a span{
 width: 100px;
 height: auto;
 line-height: 20px;
 padding: 10px;
 left: 50%;
 margin-left: -64px;
 font-family: Shanti, Arial, Helvetica, sans-serif;
 font-weight: 400; 
 font-size: 14px;
 color: #2f6986;
 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
 text-align: center;
 border: 4px solid #2f6986;
 background: rgba(255,255,255,0.3);
 text-indent: 0px;
 border-radius: 5px;
 position: absolute;
 pointer-events: none;
 bottom: 100px;
 opacity: 0;
 box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
 -webkit-transition: all 0.3s ease-in-out;
 -moz-transition: all 0.3s ease-in-out;
 -o-transition: all 0.3s ease-in-out;
 -ms-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
}
.mbl-wrapper ul a span:before,
.mbl-wrapper ul a span:after{
 content: '';
 position: absolute;
 bottom: -15px;
 left: 50%;
 margin-left: -9px;
 width: 0;
 height: 0;
 border-left: 10px solid transparent;
 border-right: 10px solid transparent;
 border-top: 10px solid rgba(0,0,0,0.1);
}
.mbl-wrapper ul a span:after{
 bottom: -14px;
 margin-left: -10px;
 border-top: 10px solid #2f6986;
}
.mbl-wrapper ul a:hover span{
 opacity: 0.9;
 bottom: 70px;
}

  • Step#3: Once you have successfully pasted the Style sheet code go ahead and save the template by pressing save button.
  • Step#4: Now according to you need paste the following code where you want to place this widget. For Example Layout >> Add a Gadget >> Edit HTML/JavaScript.
<div class="mbl-wrapper">
   <ul><a class="mbl-gplus " href="https://plus.google.com/u/0/106374439082237286396"><span>Google Plus</span></a></ul>
    
   <ul><a class="mbl-twitter" href="http://twitthis.com/twit?url=http://www.mybloggerlab.com"><span>Twitter</span></a></ul>
    
   <ul><a class="mbl-pinterest" href="http://pinterest.com/fosterzone/"><span>Pinterest</span></a></ul>
    
   <ul><a class="mbl-facebook" href="http://www.facebook.com/sharer.php?u=http://www.mybloggerlab.com"><span>Facebook</span></a></ul>
    
   <ul><a class="mbl-linkedin" href="Linkedin-URL"><span>LinkedIn</span></a></ul>
    
   <ul><a class="mbl-rss" href="http://feeds.feedburner.com/mybloggerlab"><span>Feeds</span></a></ul>
   </div>

Customization:
  • Replace https://plus.google.com/u/0/106374439082237286396 with your Google Plus URL.
  • Replace fosterzone with your Pinterest User name.
  • Replace Linkedin-URL with your Likdendin account URL.
  • Replace http://feeds.feedburner.com/mybloggerlab with your blog's Feed URL.
All Done: So that’s it save your widget and your Tooltip Social Widget is implemented on your blog.

From The Editor’s Desk:
Hope you have enjoyed the roller-coaster ride. If you feel any difficulty while implementing this widget in your blog, then don’t hesitate to leave your comments. In coming days, we will be sharing more stunning widgets till then Peace, Blessings and Happy Socializing.
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

20 comments

September 5, 2012 at 1:04 PM

You are awesome bro.I love your writing style specially your finishing style.Keep it up. MyTechPromo.com

September 5, 2012 at 7:49 PM

Salaam bro Instead of linkedin how can I put youtube?

September 5, 2012 at 10:16 PM

Error parsing XML, line 1121, column 131: Element type "a" must be followed by either attribute specifications, ">" or "/>".

I am getting this error

Editorial Team MOD
September 6, 2012 at 12:55 AM

Thanks The Coding has been updated. Peace

September 6, 2012 at 3:01 AM

Nice Post Dude, Keep it up.
Have you any idea? when to share on facebook and the link become auto shorten?

Editorial Team MOD
September 6, 2012 at 4:02 AM

It is possible but that needs a bit of more work. We will be share it in next Version of this Widget. Peace

September 6, 2012 at 4:57 AM

The social sharing buttons are very helpful in promoting your site by having people share your post in other mediums.

September 6, 2012 at 9:08 AM

Nice post buddy...... Very helpful tip
Yogesh's Last post: http://www.ftechblog.com/10-wordpress-plugins-a-blogger-cannot-survive-without/

September 6, 2012 at 9:13 AM

Thanks alot bro for this cool and stylish widget ,,
:)

September 6, 2012 at 9:16 AM
September 7, 2012 at 9:28 AM

thanks for this wondorfull post,. But you have this social sharing script wich also can be used in wordpress???
http://thefunbooster.com

Editorial Team MOD
September 8, 2012 at 1:43 AM

You can Also Try it in WordPress it will Work Since it is HTML and CSS. Peace

September 24, 2012 at 10:43 PM

I used this social widget on one of my fiverr buyer. Thanks a lot Syed! Love much from the Philippines.

Editorial Team MOD
September 25, 2012 at 1:13 AM

Sure, You are Most Welcome, But do Give Credits To US. LOL Jokes a Part. Peace and Blessings

September 26, 2012 at 4:44 PM

Qeustion: can I reduce the size that the icons are? they are quite big for my blog and I'd like them to be a bit smaller. If possible!!

September 26, 2012 at 4:49 PM

Question 2: how do I change the twitter and facebook to mine?

Editorial Team MOD
September 26, 2012 at 11:28 PM

If you are Looking to Shrink the Size of ICONs then you can simply re-size this image accordingly (It has all the icons)
http://3.bp.blogspot.com/-CNgvgrGtBIM/UEYqib91KFI/AAAAAAAAFGY/ECCh9_1LAvo/s1600/1.png

Editorial Team MOD
September 26, 2012 at 11:28 PM

Just Replace http://www.mybloggerlab.com with your website URL. Peace

May 8, 2014 at 1:19 AM

i am trying to connect the linkedin button to linkedin group but i get this error:
Error parsing XML, line 1688, column 90: The reference to entity "gid" must end with the ';' delimiter
this is the line i have there :
a alt='Linkedin' clas='linkedin-but' href='http://www.linkedin.com/groups?home=&gid=0000000' targe='_blank'/
when 0000000 is replaced with my real group number
thank you for help

Editorial Team MOD
May 8, 2014 at 7:28 AM

Right after gid add this semi colon ;

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.