1

» » Membuat Menu Share Jejaring Sosial jQuery saat Klik Kanan

Membuat Menu Share Jejaring Sosial jQuery saat Klik Kanan

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. tapi kali ini klik kanan kita fungsikan untuk membuat menu share ke jejaring sosial,dan langsung saja di praktekkan.


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.

Sign up here with your email address to receive updates from this blog in your inbox.

close
@@@@@@@