Share Jejaring Sosial jQuery saat Klik Kanan

Kembali lagi dengan tutorial Share Jejaring Sosial, kali ini saya akan membagikan cara membuat widget share media sosial saat blog di klik kanan (right click). Memang ada kekurangan dari widget ini tak lain yaitu mematikan semua fungsi dari klik kanan. Tapi hal itu tidak akan jadi masalah besar bagi pengunjung blog anda yang sudah lama berselancar di dunia maya, karena semua fungsi/menu yang ada pada klik kanan tersebut mempunyai tombol shorcut keyboard masing-masing

Fungsi-fungsi klik kanan yang sering dipakai seperti :

• Copy, Paste dan Cut bisa diganti dengan menekan Ctrl+C, Ctrl+V dan Ctrl+X pada keyboard
• Open Link New Tab bisa diganti dengan menekan Roda Mouse atau menekan Ctrl + Click kiri pada link
• Refresh atau Muat Ulang bisa diganti dengan Menekan Ctrl+R atau F5 pada keyboard
• Inspeksi Halaman bisa diganti Ctrl+Shift+I
• dll.

Coba Juga : Costum Tombol Share Rotasi Melayang CSS dan jQuery

Sebelum membuatnya, Gunakan JSFIDDLE, Editkode-Live atau yang sejenisnya untuk mengetesnya terlebih dahulu. Silahkan tekan tombol di bawah untuk melihat demonya.

Membuat Menu Share Jejaring Sosial jQuery saat Klik Kanan

Berikut ini Langkah-langkah pembuatannya :

1. Buka Menu Template Edit HTML

2. Taruh kode CSS ini diatas ]]></b:skin>

.context {
display:none;
font-size: 1.1em;
position: absolute;
width: 200px;
height: auto;
padding: 5px 0px;
border-radius: 5px;
top: 10;
left: 10;
background-color: #27ae60;
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24);
color: #fff;
}
.context .context_item {
height: 32px;
line-height: 32px;
cursor: pointer;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.context .context_item:hover { background-color: #2ecc71; }
.context .context_item .inner_item { margin: 0px 10px; }
.context .context_item .inner_item i {
width:20px;
margin: 0 5px;
font-weight: bold;
}

Note : Ganti bagian yang berwarna kuning dengan kode warna yang diinginkan.

3. Simpan kode HTML berikut di atas </body>

<div class="context">
<div class="context_item"><div class="inner_item" onclick='window.open(&apos;https://plus.google.com/share?url=&apos; + encodeURIComponent(document.URL)); return false;' rel='nofollow' target='_blank' title='Share on Google+'><i class='fa fa-google-plus'></i> Google Plus</div></div>
<div class="context_item"><div class="inner_item" 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'></i> Facebook</div></div>
<div class="context_item"><div class="inner_item" onclick='window.open(&apos;https://twitter.com/intent/tweet?text=&apos; + encodeURIComponent(document.title) + &apos;:%20&apos;  + encodeURIComponent(document.URL)); return false;' rel='nofollow' target='_blank' title='Tweet'><i class='fa fa-twitter'></i> Twitter</div></div>
<div class="context_item"><div class="inner_item" onclick='window.open(&apos;http://www.tumblr.com/share?v=3=&apos; + encodeURIComponent(document.URL) + &apos;=&apos; +  encodeURIComponent(document.title)); return false;' rel='nofollow' target='_blank' title='Post to Tumblr'><i class='fa fa-tumblr'></i> Tumblr</div></div>
<div class="context_item"><div class="inner_item" onclick='window.open(&apos;http://www.reddit.com/submit?url=&apos; + encodeURIComponent(document.URL) + &apos;=&apos; +  encodeURIComponent(document.title)); return false;' rel='nofollow' target='_blank' title='Submit to Reddit'><i class='fa fa-reddit'></i> Reddit</div></div>
<div class="context_item"><div class="inner_item" onclick='window.open(&apos;http://pinterest.com/pin/create/button/?url=&apos; + encodeURIComponent(document.URL) + &apos;=&apos; +  encodeURIComponent(document.title)); return false;' rel='nofollow' target='_blank' title='Pin it'><i class='fa fa-pinterest'></i> Pinterest</div></div>
<div class="context_item"><div class="inner_item" onclick='window.open(&apos;http://www.linkedin.com/shareArticle?mini=true=&apos; + encodeURIComponent(document.URL) + &apos;=&apos; +  encodeURIComponent(document.title)); return false;' rel='nofollow' target='_blank' title='Share on LinkedIn'><i class='fa fa-linkedin'></i> Linkedin</div></div>
<div class="context_item"><div class="inner_item" onclick='window.open(&apos;https://getpocket.com/save?url=&apos; + encodeURIComponent(document.URL) + &apos;=&apos; +  encodeURIComponent(document.title)); return false;' rel='nofollow' target='_blank' title='Add to Pocket'><i class='fa fa-get-pocket'></i> Getpocket</div></div>
<div class="context_item"><div class="inner_item" onclick='window.open(&apos;http://wordpress.com/press-this.php?u=&apos; + encodeURIComponent(document.URL) + &apos;=&apos; +  encodeURIComponent(document.title)); return false;' rel='nofollow' target='_blank' title='Publish on WordPress'><i class='fa fa-wordpress'></i> Wordpress</div></div>
</div>

3. Simpan kode jQuery berikut di atas </head>

<script type="text/javascript">
//Share Klik Kanan jQuery
$(document).bind("contextmenu", function(event) {
    event.preventDefault();
    $(".context")
        .show()
        .css({top: event.pageY + 15, left: event.pageX + 10});
});
$(document).click(function() {
  isHovered = $(".context").is(":hover");
  if (isHovered == true) {
    //nothing
  } else {
    $(".context").fadeOut("fast");
  }
});
</script>

4. Simpan External Resource Font Awesme dan jQuery di atas </head> (abaikan jika sudah ada CSS Font Awesome dan jQuery terbaru di template anda)

<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.1.min.js"></script> 

5. Save dan lihat hasilnya.

Sekian tutorial cara membuat Share Media/Jejaring Sosial Klik Kanan ini. Sebenarnya masih banyak yang bisa aplikasikan pada konteks menu ini, seperti halnya jika hanya ingin memodifikasi tampilannya saja atau mengganti menu-menunya. Tunggu saja di artikel selanjutnya. Untuk berlangganan secara gratis, silahkan masukkan alamat email anda di bagian footer blog DesainKode ini.