Membuat Tombol Share Sosmed Mengambang dan Berputar pada Blogspot

Walaupun ini tutorial yang jadul dan mungkin sudah banyak yang membagikannya, namun tidak ada salahnya pada kesempatan kali ini saya mencoba untuk berbagi pengetahuan bagaimana cara membuat untuk membuat tombol atau button share sosmed pada blogspot.

Tombol ini memang sudah saya coba terapkan pada blog ini. Anda bisa melihat bentuk dan bagaimana cara kerja tombol share tersebut pada halaman ini pada bagian kanan bawah. Bentuknya seperti gambar berikut ini:

 

Dengan melihat sendiri, apakah Anda tertarik untuk mengaplikasikan pada blog Anda? Tenang, jika tertarik sebelumnya Anda juga harus tahu apa fungsi dari tombol share tersebut. Jangan sampai kita memasang sesuatu pada blog tetapi malah tidak berguna, bahkan menjadikan loading blog kita jadi lemot. 

Tujuan sebenarnya dari pemasangan tombol share tersebut sebenarnya untuk mengundang sebanyak mungkin pengunjung blog terutama lewat sosial media (sosmed). Dengan membagikan (sharing) postingan/halaman blog lewat sosmed semisal Facebook, Whatsapp, Twitter. dll diharapkan pengguna sosmed tersebut tertarik dan bersedia untuk mengunjungi blog kita.

Saya kita penjelasannya sudah cukup. Pastikan listrik aman, baterai laptop juga jangan sampai kosong. Dan yang terpenting sediakan kopi yang banyak untuk anti-kantuk.

Kita langsung untuk mencoba bagaimana memasangkannya pada blog. Ikuti langkah-langkahnya sebagai berikut dengan cermat dan teliti karena salah langkah atau salah kopi, tutorial ini bisa gagal dan hasilnya kurang memuaskan.

1. Masuk pada dashboard blogger kemudian ke tema. Dilanjutkan dengan "Edit HTML". Dengan menggunakan "Ctrl + F" cari kode ]]></b:skin> setelah ketemu kemudian letakkan kode CSS berikut di atas kode ]]></b:skin>.

@-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{z-index:9999;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{z-index:9999;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{z-index:9999;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;z-index:9999;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;z-index:9999;-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{z-index:9999;left:20.78461px;top:12.0px} #menu-floating-share > .menu .share .circle:before{z-index:9999;left:20.78461px;top:-12.0px} #menu-floating-share > .menu .share .bar{z-index:9999;-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{z-index:9999;-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{z-index:9999;opacity:0} #menu-floating-share > .menu .share.close .bar{z-index:9999;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{z-index:9999;-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{z-index:9999;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{z-index:9999;-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{z-index:9999;display:table-cell;vertical-align:middle;color:white} #menu-floating-share > div:hover{z-index:9999;background:#009688;cursor:pointer} #menu-floating-share div:nth-child(1){z-index:9999;top:0;left:-160px} #menu-floating-share div:nth-child(2){z-index:9999;top:-61.22935px;left:-147.82073px} #menu-floating-share div:nth-child(3){z-index:9999;top:-113.13708px;left:-113.13708px} #menu-floating-share div:nth-child(4){z-index:9999;top:-147.82073px;left:-61.22935px} #menu-floating-share div:nth-child(5){z-index:9999;top:-160px;left:0.0px}

2. Langkah berikutnya masih pada "Edit HTML" cari kode </head> kemudian tempelkan kode HTML berikut di atasnya.

<script type='text/javascript'>//Floating Share Button$(document).ready(function(ev) {  var toggle = $(&#39;#floating-toggle&#39;);  var menu = $(&#39;#menu-floating-share&#39;);  var rot;    $(&#39;#floating-toggle&#39;).on(&#39;click&#39;, function(ev) {    rot = parseInt($(this).data(&#39;rot&#39;)) - 180;    menu.css(&#39;transform&#39;, &#39;rotate(&#39; + rot + &#39;deg)&#39;);    menu.css(&#39;webkitTransform&#39;, &#39;rotate(&#39; + rot + &#39;deg)&#39;);    if ((rot / 180) % 2 == 0) {      //Moving in      toggle.parent().addClass(&#39;ss_active&#39;);      toggle.addClass(&#39;close&#39;);    } else {      //Moving Out      toggle.parent().removeClass(&#39;ss_active&#39;);      toggle.removeClass(&#39;close&#39;);    }    $(this).data(&#39;rot&#39;, rot);  });  menu.on(&#39;transitionend webkitTransitionEnd oTransitionEnd&#39;, function() {    if ((rot / 180) % 2 == 0) {      $(&#39;#menu-floating-share div i&#39;).addClass(&#39;floating-button-share&#39;);    } else {      $(&#39;#menu-floating-share div i&#39;).removeClass(&#39;floating-button-share&#39;);    }  });  });</script>  

3. Langkah yang terakhir cari kode </body> kemudian letakkan kode berikut di atasnya.

<div id='menu-floating-share'>   <div> <a href='#' onclick='window.open(&apos;https://www.facebook.com/sharer/sharer.php?u=&apos; + encodeURIComponent(document.URL)); return false;' target='_blank' title='Share on Facebook'><i class='fa fa-facebook-official'/></a> </div> <b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>   <div> <a href='#' onclick='window.open(&apos;whatsapp://send?text=&apos; + encodeURIComponent(document.URL)); return false;' target='_blank' title='Share on Whatsapp'><i class='fa fa-whatsapp'/></a> </div></b:if>    <div> <a href='#' onclick='window.open(&apos;https://twitter.com/intent/tweet?text=&apos; + encodeURIComponent(document.title) + &apos;:%20&apos;  + encodeURIComponent(document.URL)); return false;' target='_blank' title='Tweet'><i class='fa fa-twitter'/></a></div>   <div> <a href='#' onclick='window.open(&apos;http://pinterest.com/pin/create/button/?url=&apos; + encodeURIComponent(document.URL)); return false;' target='_blank' title='Pint on Pinterest'><i class='fa fa-pinterest'/></a> </div> <div> <a href='#' onclick='window.open(&apos;http://www.linkedin.com/shareArticle?mini=true=&apos; + encodeURIComponent(document.URL) + &apos;=&apos; +  encodeURIComponent(document.title)); return false;' target='_blank' title='Share on LinkedIn'><i class='fa fa-linkedin'/></a> </div> <b:if cond='data:blog.isMobileRequest == &quot;false&quot;'> <div> <a href='#' onclick='window.open(&apos;http://www.stumbleupon.com/submit?url=&apos; + encodeURIComponent(document.URL) + &apos;=&apos; +  encodeURIComponent(document.title)); return false;' target='_blank' title='Share on StrumbleUpon'><i class='fa fa-stumbleupon'/></a> </div></b:if>   <div class='menu'>     <div class='share' data-rot='180' id='floating-toggle'>       <div class='circle'/>       <div class='bar'/>     </div>   </div> </div> <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

4. Setelah menempelkan ketiga kode tersebut pada template, jangan lupa untuk menyimpannya. Untuk kode HTML yang ketiga bisa Anda ganti dengan alamat Sosmed lain seandainya sosmed yang ada pada kode tersebut ingin diganti. Icon yang nantinya tampil pada tutorial ini menggunakan font-awesome, seandainya sebelumnya Anda pernah menggunakannya maka kode <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/> pada kode yang ketiga bisa Anda hapus.

Setelah ketiga kode ditempel pada template dan disimpan seharusnya hasil pekerjaan Anda sudah bisa dilihat. Jika ternyata ada yang kurang beres, bisa corat-coret pada komentar.

Semoga bermanfaat.