Link to Share With Bouncy Animation Effect

Salah satu teknik dalam membuat terkenal weblog kita adalah dengan disediakannya navigasi berupa link tautan berbagi ke web jejaring! Dari sekian banyak web yang menawarkan jasa berbagi itu adalah AddThis share buttons. Seperti di blog AA koben yg keren ini penampakannya seperti:Pada platform blogspot syntax link berbeda pada umumnya! Sobat harus tauk apakah entuh yg disebut Layouts Data Tags. Kenapa saya memberitahukan hal tersebut, karena dalam memuat kode bentrok dengan code emoticon, jadi takut salah :P
Original idea and demo you can look here: Share Your Profiles
Untuk blog yang sudah memakai technique font-awesome pada templatenya, maka kode sbb:

@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
.social {
display: flex;
text-align: center;
position: relative;
width: 300px;
height: 70px;
font-size: 18px;
font-weight: 700;
border-top: 2px solid #dbe3ea;
border-bottom: 2px solid #dbe3ea;
color: #9aa9b5;
background: #fff;
overflow: hidden;
margin: auto;
transition: box-shadow .2s ease-out;
}
.social span, .social div {
margin: auto;
box-sizing: border-box;
}
.social .social-links {
display: flex;
text-align: center;
position: absolute;
top: 0;
left: 0;
background: rgba(62, 130, 251, 0);
width: 100%;
height: 100%;
padding: 0 30px;
transition: all .25s ease;
}
.social .social-links a {
margin: auto;
padding-top: 13px;
background: #fff;
color: #3e82fb;
width: 40px;
height: 28px;
line-height: 40px;
font-size: 15px;
transform: translate3d(0, 60px, 0);
transition: all .2s;
}
.social .social-links a:hover {
background: #89b3fd;
color: #fff;
}
.social:hover {
border: none;
box-shadow: inset 0 0 0 2px #dbe3ea, 0 1rem 20px rgba(62, 130, 251, 0.2);
}
.social:hover .social-links {
background: #3e82fb;
}
.social:hover .social-links > a {
animation: elastic .5s ease-out forwards 0s;
}
.social:hover .social-links > a:nth-child(2) {
animation-delay: 0.05s;
}
.social:hover .social-links > a:nth-child(3) {
animation-delay: 0.1s;
}
.social:hover .social-links > a:nth-child(4) {
animation-delay: 0.15s;
}
.social:hover .social-links > a:nth-child(5) {
animation-delay: 0.2s;
}
@keyframes elastic {
0% {
transform: translate3d(0, 60px, 0);
}
40% {
transform: translate3d(0, -5px, 0);
}
70% {
transform: translate3d(0, 5px, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}

<div class="social">
<span>Share your link</span>
<div class="social-links">
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-plus" aria-hidden="true"></i></a>
</div>
</div>

Bagi sobat yg ingin memakai gambar, sediakan gambar dengan resolusi 15px x 15px, kode sbb:

.social {
display: flex;
text-align: center;
position: relative;
width: 300px;
height: 55px;
font-size: 18px;
font-weight: 700;
border-top: 2px solid #dbe3ea;
border-bottom: 2px solid #dbe3ea;
color: #9aa9b5;
background: #fff;
overflow: hidden;
margin: auto;
transition: box-shadow .2s ease-out;
}
.social span, .social div {
margin: auto;
box-sizing: border-box;
}
.social .social-links {
display: flex;
text-align: center;
position: absolute;
top: 0;
left: 0;
background: rgba(62, 130, 251, 0);
width: 100%;
height: 100%;
padding: 0 30px;
transition: all .25s ease;
}
.social .social-links a {
margin: auto;
padding-top: 13px;
background: #3e82fb;
color: #3e82fb;
width: 40px;
height: 28px;
line-height: 40px;
font-size: 15px;
transform: translate3d(0, 60px, 0);
transition: all .2s;
}
.social .social-links a:hover {
background: #4285F4;
color: #fff;
}
.social:hover {
border: none;
box-shadow: inset 0 0 0 2px #dbe3ea, 0 1rem 20px rgba(0, 0, 0, 0.2);
}
.social:hover .social-links {
background: #fff;
}
.social:hover .social-links > a {
animation: elastic .5s ease-out forwards 0s;
}
.social:hover .social-links > a:nth-child(2) {
animation-delay: 0.05s;
}
.social:hover .social-links > a:nth-child(3) {
animation-delay: 0.1s;
}
.social:hover .social-links > a:nth-child(4) {
animation-delay: 0.15s;
}
.social:hover .social-links > a:nth-child(5) {
animation-delay: 0.2s;
}
@keyframes elastic {
0% {
transform: translate3d(0, 60px, 0);
}
40% {
transform: translate3d(0, -5px, 0);
}
70% {
transform: translate3d(0, 5px, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}

<div class="social">
<span>Share your link</span>
<div class="social-links">
<a href="#"><img src="IMAGE-FACEBOOK 15px x 15px"></a>
<a href="#"><img src="IMAGE-TWITTER 15px x 15px"></a>
<a href="#"><img src="IMAGE-LINKEDIN 15px x 15px"></a>
<a href="#"><img src="IMAGE-G-PLUS 15px x 15px"></a>
<a href="#"><img src="IMAGE-MORE 15px x 15px"></a>
</div>
</div>

Sebelumnya saya sudah kasih tau ttg layouts data tag? Ini berlaku pada penulisan syntax-HTML! Pada tutor di atas gue buat<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>atau<a href="#"><img src="IMAGE-FACEBOOK 15px x 15px"></a>Buat blogspot berbeda, dan tergantung link tujuan web?
Contoh:

<a expr:href='&quot;//www.facebook.com/share.php?u=&quot; + data: post.url + &quot;&amp;title=&quot; + data: post.title' target='_blank'><i class="fa fa-facebook" aria-hidden="true"></i></a>

or

<a expr:href='&quot;//www.facebook.com/share.php?u=&quot; + data: post.url + &quot;&amp;title=&quot; + data: post.title' target='_blank'><img src="IMAGE-FACEBOOK 15px x 15px"></a>

Demo. Good luck :D