Cara Menciptakan Tombol Share Animasi Dengan Css Di Blog

Tombol Share Animasi menjadi desain menarik serta sanggup meningkatkan traffic pada sebuah web atau Blog. Pada tutorial kali ini saya akan mengembangkan tombol share seolah-olah dengan pengaruh hover benar-benar keren, terdapat empat tombol sosial media dengan link mengembangkan diantaranya facebook, Twitter, Google+ dan Pinterest.

Namun, Anda juga sanggup menganti tombol sosial media tersebut sesuai dengan keingin. Sebagai contoh, Anda sanggup melihat screnshotnya di bawah ini :

Anda tertarik, berikut langkah-langkah dalam penerapannya :

Tombol Share Animasi Dengan CSS di Blog

1. Log-in ke akun Blogger
2. Pilih Template
3. Lalu klik Edit HTML
4. Langkah berikutnya, Anda tekan tombol Ctrl+F untuk membuak kotak pencarian di Blogger, kemudian ketikan atau copy kode ]]></b:skin> dan tekan Enter untuk menemukan isyarat tersebut.
5. Setelah ditemukan, kopy isyarat di bawah ini :

.share_button { 

width: 300px;

height: 50px; 

margin: 10px auto; 

}

.share_button ul { 

width: 50%; 

height: inherit; 

float: left; 

list-style: none; 

margin: 0 !important; 

padding: 0 !important; 

}

.share_button ul h1 { 

margin-top: 9%; 

overflow: hidden; 

width: 100%;

color: #4889F0; 

font-size: 18px; 

text-shadow:2px 2px 2px #fff; 

}

.share_button ul li { 

position: absolute; 

height: inherit; 

width: 150px; 

margin: 0 !important; 

padding: 0 !important; 

background: #EEEEEE;

-webkit-transition: all 600ms;

-moz-transition: all 600ms;

-o-transition: all 600ms;

-ms-transition: all 600ms;

transition: all 600ms;

text-align: center;

}

.share_button ul li h2 { 

display: inline-block; 

width: 32%; 

height: 40px; 

overflow: hidden; 

margin-top: 5%; 

cursor: pointer; 

border: 0 !important; 

}

.share_button ul:first-child li:first-child{

text-align: right; 

}

.share_button ul:last-child li:first-child{

text-align: left; 

}

.share_button ul:first-child li:last-child,

.share_button:hover ul:first-child li:first-child {

-webkit-transform: rotateY(90deg);

-moz-transform: rotateY(90deg);

-o-transform: rotateY(90deg);

-ms-transform: rotateY(90deg);

transform: rotateY(90deg);

}

.share_button ul:last-child li:last-child,

.share_button:hover ul:last-child li:first-child {

-webkit-transform: rotateY(-90deg);

-moz-transform: rotateY(-90deg);

-o-transform: rotateY(-90deg);

-ms-transform: rotateY(-90deg);

transform: rotateY(-90deg);

}

.share_button:hover ul:first-child li:last-child,

.share_button:hover ul:last-child li:last-child {

-webkit-transform: rotateY(0deg);

-moz-transform: rotateY(0deg);

-o-transform: rotateY(0deg);

-ms-transform: rotateY(0deg);

transform: rotateY(0deg);

}

6. Tahap selanjutnya, Anda menuju isyarat HTML dalam template. Cari kode <data:post.body/> , sehabis di temukan copy isyarat di bawah dan pastekan isyarat tersebut di atas kode <data:post.body/>.

<div class='share_button'>

<ul>

<li><h1>

Share t

</h1></li>

<li><h2>

<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.canonicalUrl + &quot;&amp;t=&quot; + data:post.title ' title='Share on Facebook'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmi8nDiA9EcSWb_kbhVRqhpvYOJZC6226AjcgWN2Dw3Zdi3fepAMOjOXF0KmNx6B0lzJhw9FVkf7I2PIqdyTGAL4nVLGuhPmjXqkruFBDelkiDnIiVwWyd_bC7GqtXmBgyDGzPBd2EkTwI/s1600/Facebook.png"/></a></h2>

<h2><a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; &quot; + data:post.canonicalUrl ' title='Share on Twitter'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-XMPGrGn5i3MittsBu1tUQigrCTTwJE0-tTZF3sEaBcIWyx_aHU4vPzwqLnM1HtWiDLx-nsuGvE3SPJZ0yG30l7DtiBZg7LtmIaYYlGLSyEc4Ra0PONdlUXsC5e_K1gKdk4Sie5xOnoH6/s1600/Twitter.png"/></a></h2>

</li>

</ul>

<ul>

<li><h1>his page</h1></li>

<li>

<h2><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.canonicalUrl ' title='Share on Google Plus'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTAI929IYEs_wux76w7-1KPYv5HIsXgPpnYxqBfADFCk5ryYugMGKkEhwlcnfkTMPMznUuVBi2GpvmY0JWyCG488cMFXUv6E8Vm64HIUTdcnl5FciQSI6PpO7DTF3YLYH2HO6aH7sAqORZ/s1600/Google-plus.png"/></a></h2>

<h2>

<a href='javascript:void((function(){var%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)})());' title='Share on Pinterest'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWbtYnJ3PP-zOVdqpGsmKmgosp7hJRG9VU2Ytw8IH7L41n70WCioE-5sLR47YmbtJlyHUnz9SH-HJkWMUnwaiSLCE9w34uAPytJVa96c3z3oqQDVNbrLeupTYj_TPSz8h1ubY1CHih2SnF/s1600/Pinterest.png"/></a>

</h2>

</li>

</ul>

</div>

Catatan : Biasanya isyarat <data:post.body/> pada Template lebih dari satu kode, terapkan saja isyarat diatas pada isyarat yang ketiga atau Anda sanggup mencobanya satu per satu.

7. Selanjutnya Anda simpan Template.

Demikan tutorial Membuat Tombol Share Animasi Dengan CSS di Blog, sekian dari saya terima kasih sudah berkunjung dan supaya bermanfaat.

Sumber http://www.websiteedukasi.com/