Animated Social Sharing Tooltips Widget For Blogger

* buka blog mu dulu
* pilih template >>> edit HTML
* cari kode ]]></b:skin>
* copy kode dibawah dan letakkan diatas kode ]]></b:skin>

.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/AVvXsEi8p6rJmSOLcp0n_bZA6E_391dOoVYPC-Eg4Nod4EMaRSd2TetjktrblxdSXOuDIB28DZ7kYd-jrAXOqveDg7kc1CYCrCZZ7O3SDVhHr2D8XxmV2MZeDhfH9OO87XuaW_I1L59zyRDDp4g0/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;
}

* kemudian cari kode <data:post.body/>
* dan letakkan kode dibawah tepat dibawah kode <data:post.body/> atau bisa jg masukkan aja ke HTML/Javascript

<div class="mbl-wrapper">
   <ul><a class="mbl-gplus " href="https://plus.google.com/"><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/"><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/"><span>Feeds</span></a></ul>
   </div>

>>> CATATAN <<<
"Ganti warna merah dengan url sosmed mu"
Silahkan di save / simpan...

### GOOD LUCK ###

QUEEN TRICK BLOG

Cara Membuat Animated Social Sharing Tooltips Widget di blogspot

Animated Social Sharing Tooltips Widget For Blogger

Entri Populer

Label