Membuat Costum Tombol Share Rotasi Melayang CSS dan jQuery

Posted by Desain Kode Monday, January 4, 2016 0 comments
Berdasarkan apa yang telah saya baca di beberapa web master SEO (Search Engine Optimization), banyak pakar SEO yang berpendapat kalau widget Share Social Network sangat penting untuk sebuah halaman. Kenapa? Jelas agar artikel yang kita buat mungkin bisa saja berada di social network mana saja berkat bantuan klik dari pembaca. Sangat baik jika ada banyak social network di tombol share yang dipasang blog tentunya karena kita tidak mengetahui Jejaring Sosial apa yang dimiliki oleh setiap pengunjung dan pembaca blog kita, namun beberapa dari Jejaring Sosial yang terkenal seperti Facebook, Twitter, LinkedIn dan GooglePlus saja sudah cukup untuk ditampilkan di blog.

membuat widget share jejaring sosial di blogspot

Pada tutorial kali ini, kita akan membuat tombol share yang melayang di kanan bawah halaman blog. Menu ini agak sedikit berbeda dari beberapa tutorial yang ada. Ada sedikit penambahan animasi dan transition didalamnya menggunakan CSS dan JQUERY. Kalau ditanya kekurangannya, hanya saja tidak ada kotak hitungan (count) jumlah share yang di tampilkan. Buka JSFidlle atau EditKode-Live atau web lain yang serupa (bisa dilihat di artikel Cara Membuat Web Tempat Menguji CSS, JS dan HTML )untuk mengetes kodenya terlebih dahulu.
Silahkan ikuti tutorialnya dibawah :

1. Buka Menu Template Edit HTML

2. Letakkan kode CSS berikut diatas kode ]]></b:skin> atau </style>
@-webkit-keyframes 
badbounce {  
  0%, 100% {-webkit-transform: translateY(0px);}
 10% {-webkit-transform: translateY(6px);}
 30% {-webkit-transform: translateY(-4px);}
 70% {-webkit-transform: translateY(3px);}
 90% {-webkit-transform: translateY(-2px);}
}

@-moz-keyframes
badbounce {  
  0%, 100% {-moz-transform: translateY(0px);}
 10% {-moz-transform: translateY(6px);}
 30% {-moz-transform: translateY(-4px);}
 70% {-moz-transform: translateY(3px);}
 90% {-moz-transform: translateY(-2px);}
}
 
@keyframes 
badbounce {  
  0%, 100% {
 -webkit-transform: translateY(0px);
 -moz-transform: translateY(0px);
 -ms-transform: translateY(0px);
 -o-transform: translateY(0px);
 transform: translateY(0px);}
 10% {
 -webkit-transform: translateY(6px);
 -moz-transform: translateY(6px);
 -ms-transform: translateY(6px);
 -o-transform: translateY(6px);
 transform: translateY(6px);}
 30% {
 -webkit-transform: translateY(-4px);
 -moz-transform: translateY(-4px);
 -ms-transform: translateY(-4px);
 -o-transform: translateY(-4px);
 transform: translateY(-4px);}
 70% {
 -webkit-transform: translateY(3px);
 -moz-transform: translateY(3px);
 -ms-transform: translateY(3px);
 -o-transform: translateY(3px);
 transform: translateY(3px);}
 90% {
 -webkit-transform: translateY(-2px);
 -moz-transform: translateY(-2px);
 -ms-transform: translateY(-2px);
 -o-transform: translateY(-2px);
 transform: translateY(-2px);}
}

.ss_animate {
  -webkit-animation: badbounce 1s linear;
  -moz-animation: badbounce 1s linear;
  animation: badbounce 1s linear;
}

#ss_menu {
  bottom: 30px;
  width: 60px;
  height: 60px;
  color: #fff;
  position: fixed;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  transition: all 1s ease;
  right: 30px;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

#ss_menu > .menu {
  display: block;
  position: absolute;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  text-align: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
  color: #fff;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  transition: all 1s ease;
}

#ss_menu > .menu .share {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  transition: all 1s ease;
}

#ss_menu > .menu .share .circle {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  transition: all 1s ease;
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  top: 50%;
  margin-top: -6px;
  left: 12px;
  opacity: 1;
}

#ss_menu > .menu .share .circle:after, #ss_menu > .menu .share .circle:before {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  transition: all 1s ease;
  content: '';
  opacity: 1;
  display: block;
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
}

#ss_menu > .menu .share .circle:after {
  left: 20.78461px;
  top: 12.0px;
}

#ss_menu > .menu .share .circle:before {
  left: 20.78461px;
  top: -12.0px;
}

#ss_menu > .menu .share .bar {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  transition: all 1s ease;
  width: 24px;
  height: 3px;
  background: #fff;
  position: absolute;
  top: 50%;
  margin-top: -1.5px;
  left: 18px;
  -webkit-transform-origin: 0% 50%;
  -moz-transform-origin: 0% 50%;
  -ms-transform-origin: 0% 50%;
  -o-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  transform: rotate(30deg);
}

#ss_menu > .menu .share .bar:before {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  transition: all 1s ease;
  content: '';
  width: 24px;
  height: 3px;
  background: #fff;
  position: absolute;
  left: 0px;
  -webkit-transform-origin: 0% 50%;
  -moz-transform-origin: 0% 50%;
  -ms-transform-origin: 0% 50%;
  -o-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  -webkit-transform: rotate(-60deg);
  -moz-transform: rotate(-60deg);
  -ms-transform: rotate(-60deg);
  -o-transform: rotate(-60deg);
  transform: rotate(-60deg);
}

#ss_menu > .menu .share.close .circle { opacity: 0; }

#ss_menu > .menu .share.close .bar {
  top: 50%;
  margin-top: -1.5px;
  left: 50%;
  margin-left: -12px;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform: rotate(405deg);
  -moz-transform: rotate(405deg);
  -ms-transform: rotate(405deg);
  -o-transform: rotate(405deg);
  transform: rotate(405deg);
}

#ss_menu > .menu .share.close .bar:before {
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform: rotate(-450deg);
  -moz-transform: rotate(-450deg);
  -ms-transform: rotate(-450deg);
  -o-transform: rotate(-450deg);
  transform: rotate(-450deg);
}

#ss_menu > .menu.ss_active {
  background: #00796B;
  -webkit-transform: scale(0.7);
  -moz-transform: scale(0.7);
  -ms-transform: scale(0.7);
  -o-transform: scale(0.7);
  transform: scale(0.7);
}

#ss_menu > div {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  width: 60px;
  height: 60px;
  font-size: 30px;
  text-align: center;
  background: #00796B;
  border-radius: 50%;
  display: table;
}

#ss_menu > div a {
  display: table-cell;
  vertical-align: middle;
  color:white;
}

#ss_menu > div:hover {
  background: #009688;
  cursor: pointer;
}

#ss_menu div:nth-child(1) {
  top: 0px;
  left: -160px;
}

#ss_menu div:nth-child(2) {
  top: -80.0px;
  left: -138.56406px;
}

#ss_menu div:nth-child(3) {
  top: -138.56406px;
  left: -80.0px;
}

#ss_menu div:nth-child(4) {
  top: -160px;
  left: 0.0px;
}

3. Letakkan kode HTML berikut diatas kode </body>. Jadi catatan saja, Karena ini sifatnya melayang (fixed), kode HTML ini bisa diletakkan dimana saja yang penting ada di dalam tag body
<div id='ss_menu'>
  <div> <a href='#' onclick='window.open(&#39;https://www.facebook.com/sharer/sharer.php?u=&#39; + encodeURIComponent(document.URL)); return false;' target='_blank' title='Share on Facebook'><i class="fa fa-facebook-official"></i></a> </div>
  <div> <a href='#' onclick='window.open(&#39;https://twitter.com/intent/tweet?text=&#39; + encodeURIComponent(document.title) + &#39;:%20&#39;  + encodeURIComponent(document.URL)); return false;' target='_blank' title='Tweet'><i class='fa fa-twitter'></i></a></div>
  <div> <a href='#' onclick='window.open(&#39;http://www.linkedin.com/shareArticle?mini=true=&#39; + encodeURIComponent(document.URL) + &#39;=&#39; +  encodeURIComponent(document.title)); return false;' target='_blank' title='Share on LinkedIn'><i class='fa fa-linkedin'></i></a> </div>
  <div> <a href='#' onclick='window.open(&#39;https://plus.google.com/share?url=&#39; + encodeURIComponent(document.URL)); return false;' target='_blank' title='Share on Google+'><i class='fa fa-google-plus'></i></a> </div>
  <div class='menu'>
    <div class='share' id='ss_toggle' data-rot='180'>
      <div class='circle'></div>
      <div class='bar'></div>
    </div>
  </div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 

4. Letakkan kode jQuery berikut diatas kode </head>.
<script type="text/javascript">
//Rotating Menu Share Button DesainKode
$(document).ready(function(ev) {
  var toggle = $('#ss_toggle');
  var menu = $('#ss_menu');
  var rot;
  
  $('#ss_toggle').on('click', function(ev) {
    rot = parseInt($(this).data('rot')) - 180;
    menu.css('transform', 'rotate(' + rot + 'deg)');
    menu.css('webkitTransform', 'rotate(' + rot + 'deg)');
    if ((rot / 180) % 2 == 0) {
      //Moving in
      toggle.parent().addClass('ss_active');
      toggle.addClass('close');
    } else {
      //Moving Out
      toggle.parent().removeClass('ss_active');
      toggle.removeClass('close');
    }
    $(this).data('rot', rot);
  });

  menu.on('transitionend webkitTransitionEnd oTransitionEnd', function() {
    if ((rot / 180) % 2 == 0) {
      $('#ss_menu div i').addClass('ss_animate');
    } else {
      $('#ss_menu div i').removeClass('ss_animate');
    }
  });
  
});
</script>

5. Selesai. Klik tombol di bawah untuk melihat demonya


Untuk logo atau simbol dari 4 jejaring sosial tersebut, tidak menggunakan gambar. Semuanya diambil dari simbol Font Awesome 4.4.0 dari http://fontawesome.io. Jika dalam template blog anda sudah memiliki font-awesome.min.css atau yang sejenisnya, bagian yang berwarna kuning dalam kolom HTML bisa di hapus.

Ke-4 Tombol jejaring sosial yang ada (Facebook, Twitter, LinkedIn dan GooglePlus), bisa di ganti dengan jejaring sosial yang lainnya hanya dengan mengedit di bagian link share tujuan saja. Sebagai tambahan, selain sebagai share jejaring sosial, widget ini juga dapat dipakai sebagai MENU utama di blog anda. Semuanya tergantung dari keinginan dan kebutuhan anda sendiri. OK, Sekian tutorial singkat kali ini. Ada pertanyaan? silahkan tinggalkan komentar untuk berdiskusi bersama. Jangan lupa untuk selalu mengunjungi Blog DesainKode. Kalau mau berlangganan artikel, silahkan subscribe di bagian footer blog DesainKode.

Tautan (link) hidup dalam komentar bersifat nofollow.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://nama_situs.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI...</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI...</em>

Konversi Kode di Sini

:) :( :p :D :o ;) 8-) 8:) :/ :'( 3:) O:) :* <3 ^_^ -_- o.O O.o >:o :v :3
Batal