Animated Social Sharing Tooltips Widget For Blogger

After the rapid increment too evolution inwards Social networking websites, lots of peoples are showing their involvement inwards socializing their website alongside their favorite social networking website i.e. Facebook, Google Plus, Twitter too etc. The prompt progress inwards Social Media has made everyone intend nigh its significance. This is the reasons why every forthwith too and thus nosotros are able to encounter hovered. Today nosotros volition hold upward integrating Tooltip Social Sharing Widget inwards BlogSpot Blog.

Features of Tooltips Social Sharing Widget:

• Tooltip functionality adds to a greater extent than color too spice to this widget, because users tin play land they are bookmarking your website on their personal best social website.
• The icons used inwards this widget are non ordinary 1 they are highly professional person gear upward alongside 3D frame work, thus it volition guaranty eye-catching look.
• It has total of v Social website along alongside RSS Feed that volition let you lot to maximize your Subscribers.
• This widget is alone built alongside Pure CSS too HTML, thus no compromise on the site speed too performance.

How To Install Tooltips Social Plugin inwards Blogger:

The steps are extremely straightforward, too would only accept v minutes to consummate the integration. Just follow the steps equally scream below.

• Step#1: Go to Blogger.com >> Template >> Edit HTML >> Proceed

• Step#2: Now inside the template search for ]]></b:skin> and exactly higher upward it glue the next Style canvas CSS Code.

/*---MyBloggerLab.com Animated Social Sharing Tooltips Widget ---*/

.mbl-wrapper{

 padding: 0;

 width: 535px;

 height: 70px;

 margin: 80px automobile 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/AVvXsEijYt7UpGDtfXvPyFC2wHLJYN-d0y4H3zi2gV9KR-jLVjuwoOtz4e51eVJDN7vXDhMf2kQ5K_yadSAcok4i3hMb4FseUY35EyMfLqW9k7-QWTwaQKexP_45teIRpx9J8xzZCmLQJY2iBmPV/s1600/1.png) no-repeat overstep 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 corporation #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 corporation transparent;

 border-right: 10px corporation transparent;

 border-top: 10px corporation rgba(0,0,0,0.1);

}

.mbl-wrapper ul a span:after{

 bottom: -14px;

 margin-left: -10px;

 border-top: 10px corporation #2f6986;

}

.mbl-wrapper ul a:hover span{

 opacity: 0.9;

 bottom: 70px;

}

• Step#3: Once you lot possess got successfully pasted the Style canvas code become ahead too salve the template yesteryear pressing salve button.

• Step#4: Now according to you lot ask glue the next code where you lot desire to house 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= "><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= "><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 alongside your Google Plus URL.
• Replace fosterzone alongside your Pinterest User name.
• Replace Linkedin-URL alongside your Likdendin concern human relationship URL.
• Replace http://feeds.feedburner.com/mybloggerlab alongside your blog's Feed URL.

All Done: So that’s it salve your widget too your Tooltip Social Widget is implemented on your blog.

From The Editor’s Desk:

Hope you lot possess got enjoyed the roller-coaster ride. If you lot experience whatever difficulty land implementing this widget inwards your blog, too thus don’t hesitate to larn out your comments. In coming days, nosotros volition hold upward sharing to a greater extent than stunning widgets till too thus Peace, Blessings too Happy Socializing.