Profile Sosial Animasi untuk Blogger

Tweet

D-Copy Blog's | Setelah pertumbuhan yang cepat dan pembangunan di situs jaringan sosial, banyak masyarakat menunjukkan minat mereka dalam mensosialisasikan situs web mereka dengan favorit mereka jejaring sosial yaitu website Facebook, Google Plus, Twitter dan lain-lain Kemajuan cepat di Media Sosial telah membuat semua orang berpikir tentang nya signifikansi. Ini adalah alasan mengapa setiap sekarang dan kemudian kita dapat melihat Widgets menakjubkan yang berhubungan Media Sosial. Tooltips adalah tambahan terbaru dalam Widgets jejaring sosial. Setiap kali, pengunjung Anda akan menempatkan pointer mereka pada ikon sosial sebuah kotak kecil akan muncul dengan informasi tentang item tertentu yang sedang melayang . Hari ini kita akan mengintegrasikan Tooltip Widget Sharing Sosial di Blogger.

Langkah :

1. Masuk ke Akun Blogger Anda
2. Masuk ke Menu Template > Edhit HTML > Proceed > centang Expand Template Widget
3. Cari kode dibawah ini :

]]></b:skin>

     4.  Pastekan kode dibawah ini, diatas pada kode diatas :

/*---d-copy.blogspot.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/AVvXsEhdJU5TiXYLnjKjT0tmbG8L5aqlUAewbv23Rd0V-MHmpFFlwl8WAiaAr9qsAFq-YtjC4vUacjOXiZ9d_ZnoKZ-b_TMd6Y8Dvrg81FOO4KZN8daHX-dvBBj4F6bIXpdwADXtOgbmOXhgYPtr/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;
}

     5. Save Template Anda.
     6. Masuk ke Menu Layout > Add gadget > pilih HTML/JavaScript
     7. Pastekan kode dibawah ini dan save :

<div class="mbl-wrapper">
   <ul><a class="mbl-gplus " href="URL Google Plus Anda"><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/ID Pinterest Anda/"><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 Anda"><span>LinkedIn</span></a></ul>
 
   <ul><a class="mbl-rss" href="http://feeds.feedburner.com/ID URL FeedBurner Anda"><span>Feeds</span></a></ul>
   </div>