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.

• Tweet
• Share
• Share
• Share
• Share

About Admin BeautyNinja

Namanya Rishad Harisdias. Seorang anak SMA yang mempunyai hobi Blogging. Dia tinggal di Cimahi, Jawabarat.

Related Post