Mengubah Klik Kanan Di Blog Menjadi Berbeda (Kreasi Sendiri)

Mengubah Klik Kanan Di Blog Menjadi Berbeda (Kreasi Sendiri) - Apa itu maksudnya? Coba sobat klik kanan di blog Beauty Ninja ini, nah seperti itu.
Jujur saya terinspirasi dari blog DickeyMaru (http://www.dickeymaru.com) yang jika di klik kanan maka muncul tampilan windows 8. Saya kagum awalnya, lalu saya coba-coba cari codenya, banyak sumber, lalu saya gabungin plus tambahin kode-kode buatan.

Oh iya, walaupun terinspirasi dari DickeyMaru, tapi saya tidak mengambil kode dari sana, kodenya pun saya tidak tahu sama ataupun tidak, yang penting berhasil :D.

Lantas bagaimana cara membuatnya?

Langkah awal adalah membuat menunya terlebih dahulu
Kreasikan apapun yang sobat inginkan yang penting di CSS parentnya harus ada:
- position:fixed
- bottom:0 (lokasi menu berada dibawah)
- left:0 (lokasi menu berada di kiri)
- display:none (taruh ini saat menu sudah jadi)

Tapi jika sobat pusing mau bagaimana, sobat bisa menggunakan kode buatan saya.
CSS (Taruh di atas ]]></b:skin>)
#beautyninjarc {
height: 90px;
width: 100%;
z-index: 999;
background: #EEE;
position: fixed;
border-top:5px solid #333;
left: 0;
-webkit-transition: all 0.15s ease-out;
-moz-transition: all 0.15s ease-out;
-o-transition: all 0.15s ease-out;
transition: all 0.15s ease-out;
bottom:0;
display:none;
}
#beautyninjarc li a {
margin-right: 30px;
font-size: 20px;
padding: 10px;
background: #333;
line-height: 55px;
color: white;
border: 2px solid #333;
box-shadow: inset 0px 0px 10px #fff;
transition:all .5s ease;
}
#beautyninjarc li a:hover {
text-decoration: none;
cursor:pointer;
box-shadow: inset 0 0 10px #31ace8;
transition: all .5s ease;
}
#beautyninjarc li {display:inline-block}
HTML (Taruh diatas </body>)
<div id='beautyninjarc'>
  <ul style='float:left'><li><a onclick='copy()'>Copy</a></li><li><a onclick='paste()'>Paste</a></li><li><a onclick='bookmark()'>Bookmark</a></li></ul>
  <span style='float:right;position:absolute;bottom:0;right:10px;'><a href='http://beauty-ninja.blogspot.com' title='Beauty Ninja'>Beauty Ninja</a> | Author : <a href='http://www.facebook.com/rishadharissllaneh' title='Author FB'>Rishad Harisdias</a></span>
</div> 
Simpan, dan lihat hasilnya. Maka tidak akan terlihat apa-apa :D Ya iyalah, saya beri Display:none;
Sudah dipasang menunya? Sekarang kita pasang Javascriptnya
Taruh kode dibawah ini keatas </body>
<script type='text/javascript'>
    if (document.addEventListener) {
        document.addEventListener(&#39;contextmenu&#39;, function(e) {
            document.getElementById(&#39;beautyninjarc&#39;).style.cssText =
                                  &#39;display:inline;transition:all .5s ease&#39;;
            e.preventDefault();
        }, false);
    } else {
        document.attachEvent(&#39;oncontextmenu&#39;, function() {
            document.getElementById(&#39;beautyninjarc&#39;).style.cssText =
              &#39;display:none&#39;;
            window.event.returnValue = false;
        });
    }
function ngaleungitkeun()
{
  document.getElementById(&#39;beautyninjarc&#39;).style.display=&#39;none&#39;; }
    function copy() {alert(&quot;Copy menggunakan CTRL+C&quot;)} //Memberi alert
    function paste() {alert(&quot;Paste menggunakan CTRL+V&quot;)} //Memberi alert
  function bookmark() {alert(&quot;Bookmark menggunakan CTRL+D&quot;)}
</script> 
Ganti teks merah menjadi parent cssmu. Sekarang coba simpan dan klik kanan di blog sobat, muncul tidak?

Bagaimana Cara Menghilangkannya? 

Tak perlu menambah javascript sobat, semuanya sudah ada diatas kok.
Jika sobat ingin menghilangkannya saat klik di mana saja seperti di blog ini. maka sobat harus cari kode wrapper sobat. Contoh outer-wrapper, maka cari <div id='outer-wrapper'> di edit HTML. lalu sobat tambahkan kode dibawah ini diatasnya
<div id='hilang' onclick='ngaleungitkeun()'>
Sehingga menjadi
<div id='hilang' onclick='ngaleungitkeun()'>
   <div id='outer-wrapper'> 
Lalu tambah kode </div> di bawah akhiran </div> outerwrapper. Pusing ya? Maksudnya kan semua kode pasti mempunyai penutup kan? nah taruh kode </div> dibawah penutup outer-wrapper.
Bagaimana jika pusing mencarinya, cara yang saya tahu adalah dengan copy semua kode HTML sobat ke Notepad++ (Bisa didownload disini), lalu sobat search <div id='outer-wrapper'> dan klik. Lalu scroll kebawah, jika ada </div> berwarna berarti itu penutupnya.
Maka strukturnya seharusnya
<div id='hilang' onclick='ngaleungitkeun'>
   <div id='outer-wrapper'>
.....
.....
.....
   </div> <!--Penutup OuterWrapper -->
</div>  <!--Penutup Hilang -->
 Simpan dan lihat hasilnya.

Bagaimana cara membuat tombol close?

Walaupun di contoh CSS dan HTML saya tidak ada tombol close, namun sobat bisa menambahkannya.
Buat sendiri tombol close dan beri OnClick="ngaleungitkeun()"

Penjelasan untuk close

Coba sobat lihat javascript yang sudah sobat pasang, javascriptnya berupa
function ngaleungitkeun() {
  document.getElementById(&#39;beautyninjarc&#39;).style.display=&#39;none&#39;; }
Pada Function ngaleungitkeun() itu memberi fungsi pada ngaleungitkeun yang nantinya bisa di output.
Lalu pada { merupakan pembuka. Dalam pascal bisa disebut Begin
document.getElementByID itu merupadakan perintah untuk mengubah ID.
Dan pada (&#39;beautyninjarc&#39;) beautyninjarc merupakan id selectornya. dan &#39; adalah versi XML  dari kutip (").
selanjutnya pada .style.display=&#39;none&#39;;} memberikan perintah pada ID yang sudah diberikan sebelumnya dan memberi perintah mengubah style(CSS) berupa display:none , karena semua pembuka memiliki penutup maka pembuka { diberi penutup }, atau dalam pascal bisa disebut End.

Saat sudah diberi perintah pada fungsi ngaleungitkeun() maka sobat bisa mengeluarkannya pada selector. Misalnya pada <div class='beautyninjaclose'> maka tinggal menambahkan OnClick='ngaleungitkeun()'
onclick berarti saat di klik

Dan berakhirlah sudah artikel di blog Beauty Ninja ini. Mungkin artikel ini bikin pusing ya karena ga langsung ke inti. Itu sengaja agar sobat mengerti juga :D.

*Ngaleungitkeun = Menghilangkan (Bahasa Sunda)

Yang tidak mengerti dan yang mengerti, saya sangat berterima kasih jika sobat share artikel ini atau menempatkan sumber jika copas.
Saya juga sangat berterima kasih jika sobat memberikan jejak komentar ataupun share.
Previous
Next Post »

10 comments

Click here for comments
Adi Selamet
admin
5 January 2015 at 14:55 ×

Wah tutorialmu jelas + lengkap gini. Gan, kalau saya pake cara ini, kira2 blog saya gak bisa dicopas kan ?

Reply
avatar
5 January 2015 at 15:25 ×

wah lumayan nih kresi dan imajinas baru gan! kalau buat munculin pop up gimana ya??

Reply
avatar
5 January 2015 at 15:39 ×

wuihhh keren gan kira2 klo blog ane di kreasi gini gimanaya :v

Reply
avatar
5 January 2015 at 16:10 ×

Kalo desain kamu bagus ya jadi menarik gan.. Apalagi pake transisi :D Kalo klik kanan di blog ini masih jelek gan, ane setengah hati ngedesainnya.

Reply
avatar
5 January 2015 at 16:12 ×

Thanks gan :D. Sebenernya udah ada artikelnya, tapi itu masih versi yang ganggu visitor. Nanti saya share yang ada di blog ini kok :)

Reply
avatar
5 January 2015 at 16:13 ×

Makasih gan :) Sebenernya sih ga bisa menahan dari copy paste karena masih bisa Ctrl+C
Tapi ini juga bisa mengurangi orang yang inspect elemen :v. Dan lagi ini mungkin cuman buat style aja.

Reply
avatar
6 January 2015 at 13:57 ×

mantap mantaap...

tapi,,
di blog sudah ada anti right click ringan gan,,
kunjungi dah,
kebetulan baru update juga :D

http://caesparta.blogspot.com/2014/07/inilah-pekerjaan-para-ranger-setelah.html

Reply
avatar
6 January 2015 at 21:31 ×

Hehe beda gan kalo yang ini, kreasi sendiri :v. Dan juga ini ga terlalu berat kok. Scriptnya pendek

Reply
avatar
8 January 2015 at 20:09 ×

wah patut untuk dicoba ini gan,,, dan bisa di kreasiin lagi.. mantaf deh

Reply
avatar

No Active Link, Relevan ConversionConversion EmoticonEmoticon

Beauty Ninja | Author : Rishad Harisdias