Cara Membuat Tombol Share Animasi Dengan CSS di Blog

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

Namun, Anda juga bisa menganti tombol sosial media tersebut sesuai dengan keingin. Sebagai contoh, Anda bisa 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, lalu ketikan atau copy kode ]]></b:skin> dan tekan Enter untuk menemukan kode tersebut.
5. Setelah ditemukan, kopy kode 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 kode HTML dalam template. Cari kode <data:post.body/> , setelah di temukan copy kode di bawah dan pastekan kode 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/AVvXsEgwsHWaR9sIvNEV9XXQc1bcoJrYgf7gchIrHgdnXeeNW8sbs1l-PFhcmh-HNmt3o5lnD6KNZVDTgOfMbZ2kvYGn9aAP6EHTU8ct4hlP62mMLayG4XMfDVgakE-fymmtea0NmN9PGsh5GZWG/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/AVvXsEjtsLYN515nLJuLFgEBdDbt9g9eIngyYgUkSOkppIw2MSIgelTtXcJy45TLm_x2hT8m8dUvpJcGIB40LxANdkhBFrxSF8DLWQ6a7G2fl9mtW-Pe71amWAuBhKxs66QHHFXmG-rOgu4FyPVD/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/AVvXsEimwAFkhGhBqkHGLEw4MUM0sbKI6vSaan1IAg2703TjpyJ7YlDnCOG6ERX3lPtOAQE_WfG37fw777XrF2_i4pCZr5k9nfbYOi35dKQ2zMfj8jx0oDKVjQuJpff_aMS6tNBF9E56Ty2bwjpj/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/AVvXsEinfCOwWG6J1QC-qYxyd7M2QhwOK8m_SH9Q2TzccdNXt-NIoDEmi7jomJW87Ko1HZOgzWG3OijkdkIAUkwjtu30Eo7tOeg7XjLLdpAevv5E9S8b-Kt5siBbCQoR6A_tF1BAhXXX-7_EgUVp/s1600/Pinterest.png"/></a>

</h2>

</li>

</ul>

</div>

Catatan : Biasanya kode <data:post.body/> pada Template lebih dari satu kode, terapkan saja kode diatas pada kode yang ketiga atau Anda bisa 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 semoga bermanfaat.

Bagikan Artikel ini