Membuat Responsive Share Button Dengan Efek Flip 3D

Membuat Responsive Share Button Dengan Efek Flip 3D - Postingan kali ini masih bekerjasama dengan beberapa postingan yang kemudian wacana responsive share button. Dengan merubah beberapa aba-aba CSS, maka share button social media ini mempunyai animasi lain yang menarik untuk dicoba untuk menarik perhatian pengunjung blog.

Baca juga:

Responsive Social Sharing Button Widget Blogger

Slide Overlay On Responsive Social Share Button

Dengan memperlihatkan pengaruh animasi flip 3D saat di-hover ini maka share button ini menjadi lebih menarik. Animasi flip 3D ini memainkan dua sisi (depan dan belakang) dengan posisi awal menampilkan sisi depan dan saat di-hover akan memutar dan membalikan sisi belakang menjadi di depan. Untuk lebih jelasnya silahkan lihat pada gambar animasi gif di bawah ini atau silahkan coba eksklusif pada demonya dengan klik link demo di bawah ini.

DEMO ON JSFIDDLE

Best view with Chrome

Kode CSS

 .flipShare{ width:90px; height:35px; margin:5px 60px 5px 0;text-align:center;line-height:35px;float:left }
 .flipShare > .front{
     position:absolute;
     transform: perspective( 600px ) rotateY( 0deg );
     background:#333;color:#fff; width:140px; height:35px;
     border-radius: 3px;
     backface-visibility: hidden;
     transition: transform .5s linear 0s;
 }
 .flipShare > .back-fb,.flipShare > .back-tw,.flipShare > .back-g,.flipShare > .back-in,.flipShare > .back-pin,.flipShare > .back-print,.flipShare > .back-title{
     position:absolute;
     transform: perspective( 600px ) rotateY( 180deg );
     width:140px; height:35px; border-radius: 3px;
     backface-visibility: hidden;
     transition: transform .5s linear 0s;
 }
 .flipShare:hover > .front{
     transform: perspective( 600px ) rotateY( -180deg );
 }
 .flipShare:hover > .back-fb,.flipShare:hover > .back-tw,.flipShare:hover > .back-g,.flipShare:hover > .back-in,.flipShare:hover > .back-pin,.flipShare:hover > .back-print,.flipShare:hover > .back-title{
     transform: perspective( 600px ) rotateY( 0deg );
 }
 .flipShare > .back-fb{
     background-color: #324b81;
 }
 .flipShare > .back-tw{
     background-color: #01A7dE;
 }
 .flipShare > .back-g{
     background-color: #BA3227;
 }
 .flipShare > .back-in{
     background-color: #136F9B;
 }
 .flipShare > .back-pin{
     background-color: #B01C23;
 }
 .flipShare > .back-title,.flipShare > .back-print{
     background-color: #333;vertical-align:middle;color: #fff;
 }
 .flipShare > .back-print a{
     color: #fff;
     text-decoration:none;
 }

Kode HTML

 <div class="flipShare">
     <div class="front">Do You Like This?</div>
     <div class="back-title">Share This Article</div>
     </div>
 <div class="flipShare">
     <div class="front">Share on FB</div>
   <div class="back-fb">
       <span style='position:absolute;top:-7px;left:10px'>
       <span class='fb-like' data-href='https://komporajaibku.blogspot.com//search?q=responsive-social-sharing-button-widget' data-layout='button_count' data-send='true' data-show-faces='false' data-width='90'></span></span>
   </div>
 </div>
 <div class="flipShare">
     <div class="front">Share on Twitter</div>
   <div class="back-tw">
       <span style='position:absolute;top:5px;left:10px'>
 <a class='twitter-share-button' data-count='horizontal' data-related='' data-text='Membuat Menu Vertical Dengan Details And Summary Tag' data-url='https://komporajaibku.blogspot.com//search?q=responsive-social-sharing-button-widget' data-via='' href='http://twitter.com/share' title='Share via Twitter'>Tweet</a>
 </span>
   </div>
 </div>
 <div class="flipShare">
     <div class="front">Share on G+</div>
   <div class="back-g">
 <span style='position:absolute;top:5px;left:10px'>
 <span class='g-plusone' data-count='true' data-href='https://komporajaibku.blogspot.com//search?q=responsive-social-sharing-button-widget' data-size='medium'>
 </span>
 </span>
   </div>
 </div>
 <div class="flipShare">
     <div class="front">Share on Likedin</div>
   <div class="back-in">
       <span style='position:absolute;top:5px;left:10px'>
 <script type='IN/Share'></script>
 </span>
   </div>
 </div>
 <div class="flipShare">
     <div class="front">Share on Pinterest</div>
   <div class="back-pin">
       <span style='position:absolute;top:5px;left:7px;border:none;'>
 <a data-pin-config='beside' data-pin-do='buttonPin' href='https://komporajaibku.blogspot.com//search?q=responsive-social-sharing-button-widget' title='Pin It'><img alt='pinit' height='20' src='//assets.pinterest.com/images/pidgets/pin_it_button.png' title='Pin It' width='40'/></a>
 </span>
   </div>
 </div>
 <div class="flipShare">
     <div class="front">Print This Page</div>
   <div class="back-print">
 <a href='javascript:print(document)' title='Print This Page'><img alt='print' height='16' style='margin-right:5px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQTj8XKgGXBPYdRlxoxGd53lQMfiiPrW2ffyVQ0HHI2StTbmL4cE_brw2jaIUJjf3UKJUQmSmY5E88YSFKpVSL93soFzfqZYt4_VwbuFdcGwZJ72KKiMkJ3qe6UW4gLLf9C-xKo3gZ3IAb/s1600/iconprinter.png' title='Print This Page' width='16'/>Print This Page</a>
   </div>
 </div>
 <div style='clear:both'></div>

Kemudian silahkan simpan kode-kode js dari social media-nya di bawah ini, jikalau sidah ada di template Anda silahkan lewati langkah ini.

Simpan aba-aba js FB di bawah ini sempurna di bawah aba-aba <body>

 <div id='fb-root'/>
 <script>(function(d, s, id) {
   var js, fjs = d.getElementsByTagName(s)[0];
   if (d.getElementById(id)) return;
   js = d.createElement(s); js.id = id;js.async=true;
   js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
   fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));</script>

Kemudian simpan kode-kode di bawah ini di atas aba-aba </body>

 <script async='async' src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'></script>
 <script async='async' src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
 <script async='async' src='//platform.linkedin.com/in.js' type='text/javascript'></script>
 <script type='text/javascript'>
   (function() {
     var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
     po.src = 'https://apis.google.com/js/plusone.js';
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
   })();
 </script>

Dan untuk menciptakan print area untuk tombol Print This Page silahkan simak lagi postingannya di bawah ini.

• Mengatur Area Print Page Blog Dengan Media Query Printable

Sumber https://www.kompiajaib.com/

Share this post