» » » Cara Membuat Tombol Share Melayang di Blogger Responsive

Cara Membuat Tombol Share Melayang di Blogger Responsive

0 Viewers ,
Tombol Share ini sudah tidak asing lagi dikalangan blogger atau situs lainnya. Hal ini sangat bermanfaat diantaranya adalah agar pengunjung dapat membagikan artikel anda di Sosial Media. Membagikan artikel ke sosial media mungkin merupakan salah satu cara untuk meningkatkan popularitas sebuah blog. Jadi, jika blog anda ingin menjadi popularitas harus rajin dan konsisten mendistribusikan artikel anda ke berbagai sosial media yang anda miliki. Dengan begitu, teman di sosial media anda atau kerabat anda mengetahui atau sudah hapal dengan blog anda, sehingga kata "Popularitas" itu telah terwujud.


Langsung saja ke intinya, kali ini saya akan membagikan sesuai judul "Tombol Share Melayang" atau "Floating Button Share". Ya, dimana tombol ini melayang di bagian kanan blog anda. Tombol share ini juga sudah responsive karena menggunakan Bootstrap, dimana dia akan menyesuaikan dengan perangkat yang anda miliki. Dengan tombol "Floating Button Share", Pengunjung dapat dengan mudah berbagi artikel ke sosial milik dia dengan hanya satu klik.


Screenshoot :

 Cara Membuat Tombol Share Melayang di Blogger Responsive


Cara Pertama :


1. Buka Blogger - Kemudian Login.
2. Dashboard - Tema.
3. Edit HTML.


Proses Pembuatan :

1. Temukan kode ]]></b:skin> atau </style>
2. Copy & Paste kode berikut ini, dan letakkan 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)}}
.floating-button-share{-webkit-animation:badbounce 1s linear;-moz-animation:badbounce 1s linear;animation:badbounce 1s linear}
#menu-floating-share{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)}
#menu-floating-share > .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}
#menu-floating-share > .menu .share{width:100%;height:100%;position:absolute;left:0;top:0;-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}
#menu-floating-share > .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}
#menu-floating-share > .menu .share .circle:after,#menu-floating-share > .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}
#menu-floating-share > .menu .share .circle:after{left:20.78461px;top:12.0px}
#menu-floating-share > .menu .share .circle:before{left:20.78461px;top:-12.0px}
#menu-floating-share > .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)}
#menu-floating-share > .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:0;-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)}
#menu-floating-share > .menu .share.close .circle{opacity:0}
#menu-floating-share > .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)}
#menu-floating-share > .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)}
#menu-floating-share > .menu.ss_active{background:#374760;-webkit-transform:scale(0.7);-moz-transform:scale(0.7);-ms-transform:scale(0.7);-o-transform:scale(0.7);transform:scale(0.7)}
#menu-floating-share > 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:#374760;border-radius:50%;display:table}
#menu-floating-share > div a{display:table-cell;vertical-align:middle;color:white}
#menu-floating-share > div:hover{background:#009688;cursor:pointer}
#menu-floating-share div:nth-child(1){top:0;left:-160px}
#menu-floating-share div:nth-child(2){top:-80.0px;left:-138.56406px}
#menu-floating-share div:nth-child(3){top:-138.56406px;left:-80.0px}
#menu-floating-share div:nth-child(4){top:-160px;left:0.0px}

3. Temukan lagi kode </head>
4. Copy & Paste kode berikut ini, dan letakkan diatas kode </head>
<script type="text/javascript">
//Floating Share Button
$(document).ready(function(ev) {
  var toggle = $('#floating-toggle');
  var menu = $('#menu-floating-share');
  var rot;
  
  $('#floating-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) {
      $('#menu-floating-share div i').addClass('floating-button-share');
    } else {
      $('#menu-floating-share div i').removeClass('floating-button-share');
    }
  });
  
});
</script>

5. Jika sudah, Temukan lagi kode </body>
6. Copy & Paste kode berikut ini, dan letakkan diatas kode </body>
<div id='menu-floating-share'>
  <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='floating-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>

Demikian, bila anda mengalami kesalahan silakan jangan sungkan untuk berkomentar dibawah ini. Semoga Bermanfaat! Thanks for Reading : Cara Membuat Tombol Share Melayang di Blogger Responsive

Related Post

1 Response to "Cara Membuat Tombol Share Melayang di Blogger Responsive"

Subscribe to: Post Comments (Atom)