Circular Contextual App Menu Experiment

Jika berbicara tentang klik kanan (right click) pada mouse mungkin yang terbesit pada pikiran kita adalah tidak bisa di klik kanan ;)) Secara default pada masing-masing web browser telah disisipkan beberapa konteks menu. Misalkan pada mozilla jika sobat melakukan klik-kanan mouse di area kosong maka akan muncul: go back & go forward one page, Reload current page, Bookmark This Page, Save Page As, Select all, View Page Source, View Page Info dan Inspect Element. Konteks menu akan lain lagi jika sobat melakukan right-click pada textarea, input, link, image, iframe or etc!

Singkat cerita, bagaimana kalau perintah klik kanan pada mouse diisikan dengan context menu kreasi kita :-? Jadi kalo ada orang klik-kanan maka akan terpampang 6 menu bulet-bulet (Circular Contextual App Menu) Here original idea codepen.io/simgooder/details/BNLGXm.Seperti itu versi modifan gue bro! Pada source sumber memakai trik font-awesome. Sehingga akan sedikit berbeda pada pemanggilan script. Trick ini terintegrasi dengan jQuery script! Jadi pada template kalian harus sudah terpasang jQuery ;)

.circle-container {
position: relative;
width: 10em;
height: 10em;
padding: 0;
border-radius: 50%;
list-style: none;
-webkit-animation: 0.2s spin linear;
animation: 0.2s spin linear;
margin: 5em auto 0;
position: absolute;
display: none;
}
.circle-container > * {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 4em;
height: 4em;
margin: -2em;
}
.circle-container > *:nth-of-type(1) {
-webkit-transform: rotate(0deg) translate(5em) rotate(0deg);
-ms-transform: rotate(0deg) translate(5em) rotate(0deg);
transform: rotate(0deg) translate(5em) rotate(0deg);
}
.circle-container > *:nth-of-type(2) {
-webkit-transform: rotate(60deg) translate(5em) rotate(-60deg);
-ms-transform: rotate(60deg) translate(5em) rotate(-60deg);
transform: rotate(60deg) translate(5em) rotate(-60deg);
}
.circle-container > *:nth-of-type(3) {
-webkit-transform: rotate(120deg) translate(5em) rotate(-120deg);
-ms-transform: rotate(120deg) translate(5em) rotate(-120deg);
transform: rotate(120deg) translate(5em) rotate(-120deg);
}
.circle-container > *:nth-of-type(4) {
-webkit-transform: rotate(180deg) translate(5em) rotate(-180deg);
-ms-transform: rotate(180deg) translate(5em) rotate(-180deg);
transform: rotate(180deg) translate(5em) rotate(-180deg);
}
.circle-container > *:nth-of-type(5) {
-webkit-transform: rotate(240deg) translate(5em) rotate(-240deg);
-ms-transform: rotate(240deg) translate(5em) rotate(-240deg);
transform: rotate(240deg) translate(5em) rotate(-240deg);
}
.circle-container > *:nth-of-type(6) {
-webkit-transform: rotate(300deg) translate(5em) rotate(-300deg);
-ms-transform: rotate(300deg) translate(5em) rotate(-300deg);
transform: rotate(300deg) translate(5em) rotate(-300deg);
}
.circle-container li > * {
display: block;
max-width: 100%;
border-radius: 50%;
-webkit-transition: .15s;
transition: .15s;
padding: 2em 0;
line-height: 1;
}
.circle-container li {
border: solid 5px #333;
border-radius: 50%;
box-shadow: 0px 3px 6px #333;
}
.home {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr9XdDifXtZDr19wWBZpb2_4nHw4EgVfqvVh7AJUWrCl6UMVy9nMPAv9Br1bw7ulZO3OzWt8Jad_Awk3rd1mLs6SDOrXjJxMq9JJNurqQV8LpLahD6MDsBSEUBtGN0TQcGbh2FgLCLJR8/s32/) no-repeat center center;
}
.close {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEirqAKsADePoPaoAUu8NC19J9dy2apKerOGA2Spx8OmB76D8YLdKNfR7R9BSENaw9WZAVBn7tk0jwg-EwpLUbY1ffGJVqxXic20SukdvdDhVtC1NpBG4mCtNCjcyY4J2O0mTPRYk4zvj9/s32/) no-repeat center center;
}
.menu-1 {
background: #f90 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbDTWnhKOUREj0fFwc9yltjwQg-kQ7x7mf2M7qdK5P0cx6_G03bFFOhQo2qK9CXp0hJ5-br3yD1ykrEx7N8G_oCU6LkQ8L5Ii_W8k4G34oKXzfq0Idq4ptK4BaOwlGIkSwe7NBjfGbXpI/s32/) no-repeat center center;
}
.menu-2 {
background: #06f url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCG90_TWzowPea30Vv_jRZ34eKQV7Cs7-pSRdQueJTF6P190iGHT4LlHb-bWMne_2ZIkX9Jj-4T6yCUUf5kxYxQOx_L5FS-GtUz7A4nD1bRJn4S_3GRCqKNwN59_rPuvE8RQMqWyaXJRWq/s32/) no-repeat center center;
}
.menu-3 {
background: #09f url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR8tCJ7E1-etym4LQItr18GSjWPE97NCxp9Olaq1pTcgPvWJlmbqZ0DDHK5-9KxYJS5ZBQ17qZO1xryrGSvcIZ-PQBnmdWgsI3ngqfEpZkKi-OE3xuhsut0YT2HOT8n0hpIOuLYZuoNvn-/s32/) no-repeat center center;
}
.menu-4 {
background: #f00 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTM596bqeTJo_48a4P6ddxpSPg1DuP-X1TSZZrcljPMidozmiHMO-jygixNxAZoz69wJx1bVPCIl2HQSuzH32p6hDzY_MX3WoDoGC9pIom6y-TQcGPotzuL_lQqQkpDZYvZR4VKfjD7f8/s32/) no-repeat center center;
}
.menu-5 {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj834DpcjAGNzVgh4mC-zjbFnz25GfNybgU7wVVo_EIVJnkyslFGzB0cKritXHAqpCEgH1L4WqOyCYRRlhSELon25KzsdnzGTDH8aPyc4oSxln4yNdhyFjxLen3t59Od2gOGcYNTVpENYDY/s32/) no-repeat center center;
}
.hide {
-webkit-animation: 0.2s spinout linear !important;
animation: 0.2s spinout linear !important;
}
@-webkit-keyframes spin {
0% {
opacity: 0;
-webkit-transform: rotate(90deg) scale(0);
transform: rotate(90deg) scale(0);
}
30% {
opacity: 0;
}
}
@keyframes spin {
0% {
opacity: 0;
-webkit-transform: rotate(90deg) scale(0);
transform: rotate(90deg) scale(0);
}
30% {
opacity: 0;
}
}
@-webkit-keyframes spinout {
0% {
opacity: 1;
}
70% {
opacity: 0;
-webkit-transform: rotate(90deg) scale(0);
transform: rotate(90deg) scale(0);
}
}
@keyframes spinout {
0% {
opacity: 1;
}
70% {
opacity: 0;
-webkit-transform: rotate(90deg) scale(0);
transform: rotate(90deg) scale(0);
}
}

Jika mau mengganti gambar, gantilah dengan yang memiliki resolusi 32 x 32 pixel.

<script type='text/javascript'>
//<![CDATA[
 $(document).bind("contextmenu", function(event) {
       event.preventDefault();
       var circle = "<ul class='circle-container' style='display:block;'><li class='home'><a href='' target='top'></a></li><li class='menu-1'><a href=''></a></li><li class='menu-2'><a href=''></a></li><li class='menu-3'><a href=''></a></li><li class='menu-4'><a href=''></a></li><li class='menu-5'><a href=''></a></li><li class='close'><a href=''></a></li></ul>";
$(circle)
 .appendTo("body")
 .css({top: event.pageY-160 + "px", left: event.pageX-80 + "px"});
});
$('.circle-container').get(0).click();
//Better solution - Button Specific
$(document).mousedown(function(e){
 if( e.which==1 ) {
  $(".circle-container").toggleClass("hide");
  setTimeout(function(){
       $(".circle-container").hide();
    },100);
 }
});
//]]>
</script>

Isikan alamat link pada syntax <a href=''></a> Sobat bisa tambah variasi target='top' Ingat koma atas satu pakainya jangan yg koma atas dua "" Script di atas sudah ditambahkan sedikit, gak tau bener atau salahnya, tetapi berjalan :D Soalnya kalau pakai dari sumber, pas menanamkan syntax link tidak jalan!!!
Ternyata Circular Contextual App Menu masih sebuah konsep yg perlu pengembangan bro. Karena saya tidak bisa jQuery, silahkan bagi sobat yg mau berbagi ilmunya tolong di fix itu script jQuery di atas :)

Hmmm....:-<

kodeWeave HTML Playground for Free

Sebenarnya tempat koleksi link tempat playground HTML editor gue sudah buatkan pada posingan dengan judul From Me To You...HeHeHe. Ternyata sekarang ada satu web anyar yang berjasa memberikan info link website seputaran list tools dan resources pilihan serta ide buat kalian yg ingin lebih mengetahui dunia web-site wwwhere.io
Karena tema HTML-editor merupakan salah satu tema post andalan pada blog ini, maka AA Koben akan berbagi kembali mengenai hal itu :D Still beta pliss introduce Feditor.IO and more full stylish you must check this one bootstrap snippets, code patterns and playground www.codeply.com/go

From master Michael, github nick is mikethedj4 he has made coding playground to export your HTML5 web apps as native desktop and mobile apps! kodeWeave adalah salah satu playground HTML paling komplit dalam menu-opsi yg pernah gue temuin untuk saat ini. Sudah opensource dan di buat dalam beberapa bentuk.

• kodeweave.sourceforge.net
• github.com/mikethedj4/kodeWeave
• developer.mozilla.org/en-US/demos/detail/kodeweave
Bonus...
• github.com/mikethedj4/mmd

Saya akan bantu menerangkan menu-menu yg ada di apps KodeWave.html ;))

>> Gambar kunci inggris kiri pojok atas: Lorem Ispum generator Upload file & embed color code generator.
>> Gambar buku: Option for add language scripts.
>> Gambar orang: Jika sobat ingin berbagi/berkolaborasi kode (This is fiture by togetherjs must Online mode on)
>> Gambar disket jadul: Opsional download mau versi apaan. 8 opsi choose for download!
Ada deretan tombol, gunakan scroll pada mouse untuk melihat semua. Tombol² tsb merupakan shortcut pilihan! Pada pojok kanan atas dengan gambar phone adalah opsi display bisa di ganti dengan 3 pilihan. Pojok paling kanan atas dengan gambar bingkisan kado tempat contoh-contoh tutorial yg mana kode/script akan otomatis ditempatkan pada editor.

Kalau sobat download dari link sumber mungkin ada beberapa address link yang masih tertuju pada web-host. Gue sudah buatkan via offline termasuk link² yg ada pada gambar buku dan gambar bingkisan kado. Kalau tidak jalan berarti memang harus online ;))
Download kodeWeave via 4shared www.4shared.com/zip/u_uQS0q3ba/kodeWeave.html
Download kodeWeave.zip in Ziddu downloads.ziddu.com/download/24516142/kodeWeave.zip.html
Password kodeWeave_mikethedj4

Happy playground \m/

Make Rain or Snow Falling Effects use CSS3

Update trik dari postingan sebelumnya tentang creativity using CSS keyframe animations. Sekarang AA Koben akan berbagi kembali trick membuat efek salju dan hujan menggunakan CSS3. Tutorial ini datang dari web keren dengan judul asli "Create Rain & Snow Falling Effects using CSS3 – weather.css"
Trick weather.css menyertakan sebuah gambar dalam menampilkan efek rain/snow yang di rangkai dengan bumbu CSS3 animation keyframes! Masukan bumbu CSS di tempat semestinya :D

.salju {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.salju:before,.salju:after {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1;
pointer-events: none;
background: transparent repeat;
opacity: 0.5;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
transform: rotate(10deg);
-webkit-animation-name: salju;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-name: salju1;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.salju:after {
opacity: 0.8;
-webkit-animation-name: salju1;
animation-name: salju1;
}
.salju.snow:before,.salju.snow:after {
background-image: url("HOST-LINK-IMAGE-SNOW/RAIN.PNG");
-webkit-animation-duration: 6s;
animation-duration: 6s;
}
.salju.snow:after {
-webkit-animation-duration: 4.5s;
animation-duration: 4.5s;
}
@-webkit-keyframes salju {
from {
background-position: 0 0;
}
to {
background-position: 0 1024px;
}
}
@keyframes salju {
from {
background-position: 0 0;
}
to {
background-position: 0 1024px;
}
}
@-webkit-keyframes salju1 {
from {
background-position: 64px 64px;
}
to {
background-position: 64px 1088px;
}
}
@keyframes salju1 {
from {
background-position: 64px 64px;
}
to {
background-position: 64px 1088px;
}
}

Planing HTML<body>
<div class="salju snow">

</div>
</body>

NB:
Pada bumbu CSS, gantikan tulisan HOST-LINK-IMAGE-SNOW/RAIN.PNG dengan link host gambar hujan/salju. Gue sudah siapkan, silahkan tinggal hostingkan. Snow Picture atau Rain Picture Pilih salah satu saja! Pada property .salju:before,.salju:after sobat bisa merubah arah jatuhnya snow/rain dengan merubah angka pada kode properties-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
transform: rotate(10deg);Untuk kecepatan jatuhnya snow/rain perhatikan pada property .salju.snow:before,.salju.snow:after dan .salju.snow:after rubahlan nominal timing pada properties-webkit-animation-duration: 6s;
animation-duration: 6s;Dalam memasukan markup HTML <div class="salju snow"> harus di dalam tagging <body> Bisa juga di dalam tagging <main-wrapper> tergantung unik-ID pada template masing-masing. Demikian dan terima kasih :)

Happy falling effect \m/

Show Messages use Address Link Post

Aapakah anda pernah memperhatikan tulisan hasil ketikan dari sebuah search engine? Misalkan sobat mengetik "Tutorial Blog for Stylish Blogger" di dalam kotak pencarian google. Maka pada address bar browser akan terlihat menjadi: https://www.google.com/?q=Tutorial+Blog+for+Stylish+Blogger Pada tampilan halaman pencarian, tulisan yang diketikan akan memiliki warna yg berbeda!
Ex: Tutorial Blog for Stylish Blogger
Dengan bantuan jQuery script, AA Koben akan berbagi trik tutorial bagaimana cara membuat pesan di mana prinsip kerja seperti sebuah search engine (kalimat pembuka tadi) Jadi, link sebuah postingan blog anda akan menjadi korban :D agar trick ini berjalan mulus :))

Buatlah satu artikel post, terserah mau di isi dengan kalimat basa-basi apaan. Kemudian hilangkan style (CSS) template/area konten/widget/etc seperlunya. Masukan bumbu ajaib berikut ke dalam area postingan...

<div class="box">
<p>Message here...</p>
</div>

<style>
.box {
font: normal 12px/1.5 "Verdana", arial, sans-serif;
width: auto;
height: auto;
min-height: 53px;
margin: 0 auto;
padding: 12px 5px 4px 41px;
position: relative;
color: #cc0000;
line-height: 20px;
border: 1px solid #d2d2d2;
background: #fff;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px;
background: -webkit-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
background: -moz-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
background: linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
-webkit-background-size: 100% 20px;
background-size: 100% 20px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.07);
box-shadow: 0 1px 2px rgba(0,0,0,0.07);
}
.box::before {
content: '';
position: absolute;
width: 4px;
top: 0;
left: 30px;
bottom: 0;
border: 1px solid;
border-color: transparent #efe4e4;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
}
function escapeHtml(text) {
var map = {
'&': '&amp;',
'<': '&lt;',
'>': '&gt;',
'"': '&quot;',
"'": '&#039;'
};

return text.replace(/[&<>"']/g, function(m) { return map[m]; });
}
var replacestring = "`1234567890-= qwertyuiop[] asdfghjkl;' zxcvbnm,./ ~!@#$%^&*()_+ QWERTYUIOP{}| ASDFGHJKL:\ ZXCVBNM<>?";
var paperstring = escapeHtml(decodeURI(getQueryVariable("txt")).substr(0, 120).replace(/\+/g," "));
$('.box p').html(paperstring);
var plength = paperstring.length;
var rlength = replacestring.length;
});
//]]
</script>

Selesai misi membuat dashboard untuk menampilkan pesan.
Demo: My Messages For You (Press Enter if you see skull head)

Permasalahan timbul, apakah kita harus secara manual membuat lambang + pada setiap antar kata! Solusinya, buatlah ___.html secara terpisah? Buka notepad/teks editor sobat

<!DOCTYPE html>
<html>
<head>
<title> </title>
<script type="text/javascript">
function work(what) {
 var escapedString = escape(what);
 var stringToReplace = escapedString.split('%20');
 escapedString = stringToReplace.join("+");
 stringToReplace = escapedString.split('%0A');
 escapedString = stringToReplace.join("+"); 
 return escapedString;
}
</script>
<style>
#toParse {
 font-family:inherit;
 font-size:11pt;
 width:100%;
 height:100px;
}
#button {
 background:#f3f3f3;
 border:solid 1px #d9d9d9;
 border-radius:2px;
 -webkit-border-radius:2px;
 color:#666;
 font-weight:bold;
 margin:0 0 0 16px;
 padding:6px 12px;
}
</style>
</head>
<body>
<textarea id="toParse" spellcheck="false" onkeyup="document.getElementById('linkText').value = document.getElementById('theirURL').value + '?txt=' + work(document.getElementById('toParse').value)"></textarea>
<p>
 Basic link: <input type="text" name="txt" size="50" id="theirURL" value=" LINK-POSTINGAN "/>
</p>
<button id="button" onclick="document.getElementById('linkText').value = document.getElementById('theirURL').value + '?txt=' + work(document.getElementById('toParse').value)">Make Link</button>
<p>
 Your link (CTRL+C or right-click to copy):
<input id="linkText" type="text" size="60" onclick="this.select();" readonly="readonly"/>
</p>
</body>
</html>

Gantikan tulisan LINK-POSTINGAN dengan link address postingan yg tadi sobat buat (penjelasan di atas!!!)
Source by: Shre Per
Itu hanya versi standar yg saya buat. Jika sobat mengerti akan JavaScript, you bisa menambahkan banyak lagi vaiasi urlEncoding ke dalamnya :)

Happy ngoding \m/