Make HTML5 Context Menus for Blogger

Salah satu fitur dari bahasa baru HTML5 telah hadir di hadapan kita! Feature HTML5 Context Menus memungkin para pengembang untuk membuat custom context menus untuk blok dilanjutkan dalam menu sederhana dan elemen menuitem. Informasi yang terbuat terdapat tepat di dalam sehingga tidak perlu lagi membuat custom plugin. Sederhana banget membuatnya, namun fitur ini baru bisa dirasakan untuk browser yang sudah mendukung API. Contextmenu sudah didukung oleh browsingan mozilla :D Jadi jika selain itu, Koben tidak tahu apakah berjalan atau tidak ya ;))
Chrome tidak berfungsi, Opera sama belum bisa, Internet Explorer podo wae, Pale Moon berjalan, SeaMonkey good too... Karena Beben Koben si bloglang anu ganteng kalem tea memakai mozilla, jadi sharing is caring right? Mari kita mulai bos... Perhatikan dahulu screenshot before & after berikut guna melihat apa yg dimaksudkan dengan HTML5 context menu.

The HTML

<section contextmenu="mymenu">
<!--
Disini ini letaknya konten yang akan di tag!
Jadi harus di sini...
-->
</section>

Kode Menu Item

<menu type="context" id="mymenu">
<menuitem label="Refresh Post" onclick="window.location.reload();" icon="http://link-image-refresh-icon-16x16px.png"></menuitem>
<menuitem label="Skip to Comments" onclick="window.location='#comments';" icon="http://link-image-comment-16x16px.png"></menuitem>
<menu label="Share on...">
<menuitem label="Twitter" icon="http://twitter-share-image-16x16px.png" onclick="goTo('//twitter.com/intent/tweet?text=' + document.title + ':  ' + window.location.href);"></menuitem>
<menuitem label="Facebook" icon="http://facebook-share-image-16x16px.png" onclick="goTo('//facebook.com/sharer/sharer.php?u=' + window.location.href);"></menuitem>
</menu>
</menu>

Bagaimana caranya memasukan ke template blog kita!!!

Jangan lupa ganti link image dalam kode menuitem yang bertuliskan image 16x16px. Ingat transparan bagckground buat gambar 16x16px-nya ;)

Lakukan Expand Widget Templates, kemudian temukan kode yg mirip² begini<b:includable id='post' var='post'>
<div class='post hentry'>Patokan kode baris pertama sob yg ditemukan! Dirubah menjadi sedemikian rupa<b:includable id='post' var='post'>
<div class='post hentry' contextmenu='mymenu'>Terus sobat lakukan scroll ke bawah temukan penutup kode di atas. Macam ini </div>
</b:includable>Tepat di atas tagging penutup </div> masukin Kode Menu Item.
SAVE.
Here demo for this article, try right click your mouse on area!!!

Lorem ipsum vix id kasd adhuc dignissim, eum ad dico audire mediocritatem, te iisque tritani efficiendi has. Ne quo justo docendi. Cum ea quando placerat, eirmod latine erroribus mei ei, quo mazim appetere et. Munere aliquid vis ea. Te congue ullamcorper per. Dicat dolores eu duo. Quas labitur volumus te duo, at per sonet detraxit evertitur. No nonumy percipit voluptatum vel, alii erant mediocritatem sed at.Brute aeque deseruisse mei ex, invidunt constituto usu te, sea te delectus urbanitas interpretaris. Eu ullum ubique eum, id aliquid mediocrem quo. Nam ne eius debitis. Vis porro labitur laboramus an.

Silahkan kalian praktek tambahkan link berbagi dengan syntax seperti yg ada pada contoh ;)
Source by: http://davidwalsh.name/html5-context-menu
http://hacks.mozilla.org/2011/11/html5-context-menus-in-firefox-screencast-and-code/