Link to Share With Bouncy Animation Effect - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title Link to Share With Bouncy Animation Effect, we have prepared well for this article you read and download the information therein. hopefully fill posts Article CSS, Article HTML, Article Trik dan Tips, Article Tutorial, we write this you can understand. Well, happy reading.

Title : Link to Share With Bouncy Animation Effect
link : Link to Share With Bouncy Animation Effect

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

Thus articles Link to Share With Bouncy Animation Effect

that is all articles Link to Share With Bouncy Animation Effect This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article Link to Share With Bouncy Animation Effect with the link address https://autopostingblogspot.blogspot.com/2017/02/link-to-share-with-bouncy-animation.html