Cara Menciptakan Tombol Share Melayang Di Blogger Responsive

Baca Juga

Tombol Share ini sudah tidak abnormal lagi dikalangan blogger atau situs lainnya. Hal ini sangat bermanfaat diantaranya ialah semoga pengunjung sanggup membagikan artikel anda di Sosial Media. Membagikan artikel ke sosial media mungkin merupakan salah satu cara untuk meningkatkan popularitas sebuah blog. Jadi, jikalau blog anda ingin menjadi popularitas harus rajin dan konsisten mendistribusikan artikel anda ke banyak sekali 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 aku akan membagikan sesuai judul "Tombol Share Melayang" atau "Floating Button Share". Ya, dimana tombol ini melayang di bab kanan blog anda. Tombol share ini juga sudah responsive alasannya ialah memakai Bootstrap, dimana ia akan menyesuaikan dengan perangkat yang anda miliki. Dengan tombol "Floating Button Share", Pengunjung sanggup dengan gampang membuatkan artikel ke sosial milik ia 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 arahan ]]></b:skin> atau </style>
2. Copy & Paste arahan 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 arahan </head>
4. Copy & Paste arahan berikut ini, dan letakkan diatas arahan </head>

<script type="text/javascript"> //Floating Share Button $(document).ready(function(ev) {   var toggle = $('#floating-toggle');   var sajian = $('#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 arahan </body>
6. Copy & Paste arahan berikut ini, dan letakkan diatas arahan </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