Animated Social Sharing Tooltips Widget For Blogger

After the rapid increment in addition to evolution inwards Social networking websites, lots of peoples are showing their involvement inwards socializing their website amongst their favorite social networking website i.e. Facebook, Google Plus, Twitter in addition to etc. The prompt progress inwards Social Media has made everyone mean value nearly its significance. This is the reasons why every straightaway in addition to thence nosotros are able to come across hovered. Today nosotros volition hold out integrating Tooltip Social Sharing Widget inwards BlogSpot Blog.

Features of Tooltips Social Sharing Widget:

• Tooltip functionality adds to a greater extent than color in addition to spice to this widget, because users tin play spell they are bookmarking your website on their personal best social website.
• The icons used inwards this widget are non ordinary i they are highly professional person construct amongst 3D frame work, thence it volition guaranty eye-catching look.
• It has total of v Social website along amongst RSS Feed that volition permit y'all to maximize your Subscribers.
• This widget is solely built amongst Pure CSS in addition to HTML, thence no compromise on the site speed in addition to performance.

How To Install Tooltips Social Plugin inwards Blogger:

The steps are extremely straightforward, in addition to would precisely own got v minutes to consummate the integration. Just follow the steps equally advert below.

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

• Step#2: Now inside the template search for ]]></b:skin> and precisely inwards a higher house it glue the next Style sail CSS Code.

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

.mbl-wrapper{

 padding: 0;

 width: 535px;

 height: 70px;

 margin: 80px machine 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 travel past times 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 enterprise #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 enterprise transparent;

 border-right: 10px enterprise transparent;

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

}

.mbl-wrapper ul a span:after{

 bottom: -14px;

 margin-left: -10px;

 border-top: 10px enterprise #2f6986;

}

.mbl-wrapper ul a:hover span{

 opacity: 0.9;

 bottom: 70px;

}

• Step#3: Once y'all own got successfully pasted the Style sail code larn ahead in addition to salve the template past times pressing salve button.

• Step#4: Now according to y'all need glue the next code where y'all 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=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 amongst your Google Plus URL.
• Replace fosterzone amongst your Pinterest User name.
• Replace Linkedin-URL amongst your Likdendin trouble concern human relationship URL.
• Replace http://feeds.feedburner.com/mybloggerlab amongst your blog's Feed URL.

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

From The Editor’s Desk:

Hope y'all own got enjoyed the roller-coaster ride. If y'all experience whatsoever difficulty spell implementing this widget inwards your blog, thence don’t hesitate to larn out your comments. In coming days, nosotros volition hold out sharing to a greater extent than stunning widgets till thence Peace, Blessings in addition to Happy Socializing.