Animated Social Sharing Tooltips Widget For Blogger

Socialize It →

Tweet

20

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFpkFfqzAFRm7musCAqAbTMOiDtdvnrlCj7vv2SftxnbYRkrinzYyrpEK9VujxRnwnWUCkihsdbaQhRdCczZOPC2dtlt-0ftiuREGpu6azKRqEa3eLo6RLkGlSIuf8-io4aRc-gYNs6SB7/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

About the Editorial Team

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