It's Not jsFiddle, It's Cloud Editor

Salah satu tema post favorit ane adalah mengenai HTML Editor Entah sudah berapa banyak yang sudah gue share buat kalian, silahkan cari-cari di arsip. Beragam HTML-editor kreasiku memiliki tingkatan, dari kelas sederhana sampai master :D Tidak tau sampai kapan akan berhenti menulis artikel tentang editor with live preview ini, selalu saja dapat yg baru dan full stylish ;;) ;))
Sobat tentu sudah pada kenal dengan playground editor keren yg bernama JSFiddle? Salah satu faktor orang akan selalu ingat dengan js-fiddle ini mungkin dengan komposisi tampilannya! Empat buah kotak terpisah guna menempatkan source code/script serta bilik kiri untuk bagian miscellaneous. Sekarang AA Koben akan kasih buat anda Cloud Edit is a JSFiddle like code editor features with jQuery and ace editor b-)

Buka halaman jqueryscript.net dan cari tombol

DownloadDapatkan file source www.jqueryscript.net/text/Creating-A-JSFiddle-Like-Code-Editor-with-jQuery-ACE-Editor-Cloud-Edit.html

Sudah beres, kalian mendapatkan editor baru seperti jsfiddle! Di sini saya akan cerita-cerita sedikit fitur apa saja and fungsi yg ada pada cloud-edit. CloudEdit dibuat dengan penanaman fitur script jQuery, Ace & Emmet!

jQuery - Telah ditanamkan script-jQuery pada embed sehingga mendukung untuk melakukan tes terhadap snippet jQuery. Tidak usah lagi pasang script jQuery inti versi 1.x! (letak berada pada kotak ke-3 JavaScript/jQuery 1.x)
Ace - Guna mendukung high performance pada editor pemasangan syntax highlighter ACE menjadi pilihan. Ada beberapa pilihan opsi themes light/dark.
Emmet - Guna mempermudah penulisan syntax, EMMET terpilih menjadi acuan.

Selain ketiga fitur tersebut, ada beberapa fitur lain yg tidak bisa dianggap remeh L-)
CSS Option meliputi Autoprefixer, Less CSS, Sass CSS (experimental) and modernizr. Frameworks mencakup Bootstrap and Foundation. Deretan tombol berjejer dengan multi fungsi, silahkan dicoba masing-masing. Gue cuma akan jelaskan fungsi 2 tombol yg ada. Tombol save memiliki fungsi melakukan save di local storage. Tombol load berfungsi memanggil kembali pekerjaan dari tombol save!

Pada si ace sebenarnya ada fitur Autocomplete. Yang ketika menuliskan sesuatu akan diberikan opsi pilihan. Gue sudah tanamkan script tersebut! Tetapi pada kotak HTML tidak berjalan mulus, namun berjalan baik pada kotak CSS & JavaScript/jQuery. Mungkin bentrok dengan si emmet, dan saya blon paham script jadi kagak bisa benerinnya :))Screenshot CloudEdit hasil modifikasi AA sudah tentu ada autocomplete yg tidak ada pada original source :P Apakah sobat tertarik mendapatakannya >:) Oooops ampir kelupaan, ada juga kotak console tidak tauk saya cara pakainya, yaaa jadi gak apa-apa lupakan saja 8-}

Password ZIP: jQuery Cloud Edit by www.jqueryscript.net
Bonus, simple mode github.com/sw4/codeFiddle - github.com/nadiahamdaoui/CodeEditor

Happy fiddle \m/

Auto Paragraph Lorem Ipsum use Embriage Ipsum

Sudah pada tahu dong dengan si lorem ipsum bahasa yang aneh! Kebanyakan penggunaan hal itu terdapat dalam sebuah proyek yg membutuhkan kata, kalimat bahkan paragrap penulisan sebuah konten artikel. Dahulu kala AA Koben sudah pernah sharing bagaimana cara membuat lorem ipsum secara customize? Script buatan master Lukasz Bondarewicz terintegrasi dengan jQuery! Jadi jika sobat tidak memasang jQuery script tidak akan berjalan trik tersebut? Oleh karena itu sekarang update bagaimana membuat Embriage Ipsum yg notabene mempunyai fungsi sama membikin tulisan sedikit agar menjadi banyak ipsum-ipsum ;))

Embriage Ipsum by Paul ini dibuat dengan susunan kata-kata dan kalimat-kalimat tentang cerita panduan mobil tua perancis! Jadi hasil generate yg tercipta akan berupa paragrap² seperti contoh

Completely abruptly first speed stopped. Til his starting of the right at the crowbar forward at the crowbar forward. Abruptly take back while when you are in first speed of embriage til his starting 15Km/Hr, it gaves all its strength it is raised up again. The drag of the wheel take abruptly back the crowbar.Embriage Ipsum Generated Paragraph(20)

Bumcu Embriage-Ipsum script

<script type="text/javascript">
/* Lorem Ipsum Generator
 * (CC-BY) Fredrik Bridell <fredrik@bridell.com> 2009
 * Version 0.21 - multilingual
 * Released under a Creative Commons Attribution License
 */
//<![CDATA[
function chance(e){return Math.floor(100*Math.random())<e}function capitalize(e){return e.substring(0,1).toUpperCase()+e.substring(1,e.length)}function getLoremWord(){return loremLang[Math.floor(Math.random()*loremLang.length)]}function getLoremEnding(){var e=Math.floor(Math.random()*endings.length);return endings.substring(e,e+1)}function loremIpsum(e){for(var r=0;e-1>r;r++)document.write(getLoremWord()+" ");document.write(getLoremWord())}function loremIpsumSentence(e){document.write(capitalize(getLoremWord())+" "),loremIpsum(e-1),document.write(getLoremEnding()),document.write(" ")}function loremIpsumSentence2(e){document.write(capitalize(getLoremWord())+" ");var r=0;chance(50)?(r=Math.floor(Math.random()*e-2),loremIpsum(r),document.write(", ")): document.write(" "),loremIpsum(e-r-1),document.write(getLoremEnding()),document.write(" ")}function loremIpsumParagraph(e){for(var r=e;r>0; )r>10?(w=Math.floor(8*Math.random())+2,loremIpsumSentence2(w),r-=w): (loremIpsumSentence2(r),r=0)}var latin=["PRAT...","...PRET...","...PROT"],loremLang=latin,endings="";
//]]>
</script>

Isi dan gantikan tulisan "PRAT...","...PRET...","...PROT" sesuai dengan keperluan. Adapun susunan penulisan sbb:"KATA 1", "KALIMAT 1", "PARAGARP 1", "DAN SETERUSNYA..."Perhatikan quotation marks dan koma jangan sampai hilang/kelupaan/tertukar/kurang/salah! Hostingkan script dan simpan di atas tag </body> atau sebelum tagging </head> (atur-atur)

Rumus pemanggilan or pemakaian (Ex: ketika mosting) sebagai berikut<script type="text/javascript">loremIpsumParagraph(20)</script> 20 = Jumlah banyak tampilan paragraph.

Apabila sobat mau memasangkan kata-kata asmaul husna pada Embriage Ipsum script, you bisa download di artikel gue free lorem ipsum. Kalau mau yg lebih fullstylish and atraktif, you can try the trick of fixie.js.

Source by: codepen.io/plfstr/details/zxdYpb

Happy ipsum \m/

Free 6 HTML Playground Cryptographic

Dulu dari web tutorialzine AA sudah sharing bagaimana cara membuat encrypt & decrypt menggunakan JavaScript Syarat utama jika kalian ingin bermain dengan hal ini harus sama-sama sudah mempunyai tools enkrip & dekrip itu sendiri! Karena kalau hanya satu orang saja, gimana mau bisa mengetahui isi file/data yg didekripkan ;)) Salah satu contoh karakter encrypt yang sudah familiar dan di dukung oleh sebagian mesin browser adalah character Base64. Contoh penerapan text encoding Base64 bisa sobat lihat encrypt your link for safety link in blogspot.

Untuk memperdalam ilmu ini, gue akan bagi-bagi form generator cryptographic! Nah loh, kok jadi kriptografi kan lagi membahas encrypt :-? Tenang dulu bro, karena tujuan dari ini semua kurang lebih memiliki persamaan yaitu: ilmu dan seni untuk menjaga kerahasiaan berita, kerahasiaan data, keabsahan data, integritas data, serta autentikasi data dll.

Buled-buled Cryptographic

Jika dilakukan encryption terhadap judul Buled-buled Cryptographic maka akan terlihat

◎◎◎◎ ◎◎   ◎ ◎ ◎  ◎  ◎◎◎  ◎◎ ◎ ◎  ◎◎ ◎◎◎◎ ◎  ◎ ◎  ◎◎◎ ◎◎   ◎ ◎ ◎  ◎  ◎◎◎  ◎◎ ◎ ◎  ◎◎ ◎◎◎◎ ◎◎◎◎◎◎ ◎◎◎◎  ◎   ◎◎ ◎◎    ◎◎ ◎   ◎◎◎◎◎   ◎ ◎◎◎  ◎    ◎  ◎◎   ◎   ◎◎ ◎◎  ◎◎◎◎ ◎   ◎◎◎◎◎  ◎ ◎◎◎◎  ◎ ◎◎ ◎  ◎◎◎  

Keren yah :D

Braille Cryptographic Ones

⡂⡲⡡⡩⡬⡬⡥⠠⡃⡲⡹⡰⡴⡯⡧⡲⡡⡰⡨⡩⡣⠠⡏⡮⡥⡳Semakin menarik :-"

Cryptographic Ones Avoid China and Certain Guru

リ門天安リ門天件件天安安件件事安事ロ天門事ロロ事事リリロ事事安天安天件ロ門安リ事ロ件件門リ天安ロ門事件件ロ天件件件ロ件ロ門事門門リ門リ門門件ロリ事事事ロ安門事安天門事事ロリ安事天リ門門事リ事リ門リリリ件事リ事天安安門ロ事門件ロ安ロ門件件リ天門事ロ天安事事門安リ安リロ安

Membingungkan @-)

Katakana Cryptographic Ones

イェゴヮヱユィノヒグナプツヅプハギイヅニモダホルカヂグハネシメォヌピ

Image → Braille Art

Kalau yg ini akan menggenerate gambar menjadi gambar dengan format tulisan braille!⠀⢀⠀⠀⠀⠀⡀⠀
⣰⣃⣁⣀⣀⣈⣘⣆
⢧⣀⣠⠇⠸⣄⣀⡼Berhati-hatilah kalau mau melakukan generate terhadap gambar resolusi besar!!! Bisa crash pada browser anda!!!

Well I do not Know String Manufacturer

Saya tidak tahu pasti kenapa judulnya seperti ini? Tetapi generator terakhir ini paling keren. Karena kita bisa melakukan encrypt sesuai dengan kata-kata sekehendak kita :)) Tetapi kita harus mengingat kata yg dijadikan dasar encrypt!!!
Silahkan download file unduh nullkal via 4shared.
Thanks nullkal :)

Happy encrypt \m/

Free 4 HTML Editor Feature Ace Code

Ada sedikit informasi dari official google webmaster central blog mengenai rich snippet microdata. Sekarang sobat dapat membaca dan mempelajari new structured data, melakukan testing dengan tool and more! Jadi tidak bisa sembarangan kalau mau memasangkan apa-apa agar sesuai dengan aturan struktur yg sudah ada. Sobat bisa kunjungi webmaster central blog atau langsung menuju tool testing tool on google developers Lakukan test terhadap link home page and post page. Punya gue Page Home Link & Post Page Link Tidak ada masalah ;))

Karena tema sekarang update info, ya AA juga akan melakukan update :D Sebagai bloglang dan kolektor HTML editor with Live Preview AA akan kasih kepada kalian sobat blogger EMPAT buah HTML editor Langsung saya tabok 4 biji sekaligus :)) Saya tidak akan menjelaskan, pasti sudah pada tahu?

HTML Pencil

Demo: HTML-Pencil - Source: bit.ly/1yCFesO

Test of do's tool is happening DOM

Demo: DOM manipulation monitoring - Source: jsdo.it/elk/cHPO

ACE editor 2

Demo: ACE editor 2 - Source: jsdo.it/s.yoshiki1123/lUr9

ACE editor 3 for PC

Demo: ACE editor 3 for PC - Source: jsdo.it/s.yoshiki1123/boWD

Semua editor dapat berjalan secara offline mode. Jika ada fitur yg tidak berjalan sebagaimana mestinya (ex: Ace code) harap maklum :)

Ace Editor Unduh via 4shared --- Download Ace-Editor.zip in Ziddu

Password ZIP --> TuhanItuTidakTidur

Happy editor \m/

Get Free Tool by Mattlag

Tidak sengaja melihat ke kanan sisi ada konten miring dari web paulbakaus.com Trik CSS perspective yang mirip dengan kepunyaan web master Christian Heilmann! Karena saya suka penasaran dengan isi konten yang ada, menyempatkan diri untuk mengobak-abik deh :D Kalau urusan melihat-lihat pasti setiap orang berbeda-beda cara toh? Gue kasih tips nih, kalau web/blog dari luar negeri jangan pernah terlewatkan oleh anda untuk mencari menu/tag dengan title labs, project, work etc ;)
From master Paul Bakaus i got it, i hope you enjoy it...

• CSS based Filemanager
paulbakaus.com/labs/filemanager
• Comicstrip Navigation
paulbakaus.com/labs/comicstrip
• Uberplayer
paulbakaus.com/labs/uberplayer

Karena langka mencari ide post unik beda dari yg lain, seperti artikel sebelum²nya AA Koben akan bagi-bagi tools sederhana namun berguna. Ada 3 buah tool untuk sekarang buat kalian sobat blogger Hex Color Inverter, Word Frequency Counter & Unique Word Parser :)

Hexadecimal Color Inverter

Tool untuk melihat kode lawan warna. Ada juga yg menyebutnya color complementary!

Word Frequency Counter

Tool untuk melihat jumlah karakter kata di dalam teks dan mengurutkan berdasarkan frekuensi banyak.

Unique Word Parser

Menampilkan jumlah karakter kata dengan menghilangkan terlebih dahulu kata yang sama.

Mungkin akan terlihat agak pusing melihat penjelasan yg gue beberkan yah :D Tetapi akan terlihat mudah jika sobat sudah mencoba tools tersebut sendiri. Seperti di awal gue bilang, ini mudah (((wong saya nggak buat =)))))

Ketiga tool sudah dibuat dalam satu kemasan cakep! Dengan tampilan seragam dan sedikit tambahan navigasi. Source didapatkan dari web www.mattlag.com Silahkan dilihat-lihat seperti yang gue katakan yah, siapa tauk anda bisa mendapatkan lebih ;)

Happy tools \m/

Please read and visit or Download

Apa yang terlintas di benak kalian jika mendengar kata Glitch? Menurut google translate kata glitch berarti kesalahan. Bisa jadi juga meiliki arti kerusakan! Walaupun mempunyai arti sedikit nyeleweng, namun jika sudah menjadi sebuah generator, gambar bagus bisa kita beri efek glitch. Seperti artinya, karena merusak...jadi efek yg timbulpun amduradul :DTidak terbayangkan bagaimana susah membuat efek begituan secara manual!!! Karena sekarang acara artikel info bagi-bagi resources & tools, dengan hadirnya Glitchatron kalian tidak perlu bersusah-payah. Please sikat Glitchatron is a javascript glitch art generator github.com/errozero/glitchatron.

How to make CSS gradient animation for background? The answer is CSS Gradient Animator www.gradient-animator.com. Lalu jikalau sobat mau melakukan tersting input types, patterns and attributes sebelum membuatnya, maka harus meluncur ke tkp Input Type Sandbox inputtypes.com.
Berikut beberapa link resource's yg AA dapat kumpulkan, semoga sobat bisa mendapatkan ide briliant ;)

New brand extensible front-end HTML, CSS, dan JavaScript komponen antarmuka pengguna untuk responsif, ponsel, dan web modern titon.io/en/toolkit. From codepen i got some pen...

codepen.io/studio-klik-hr/pen/xbRabj - codepen.io/studio-klik-hr/pen/JobVOe - codepen.io/studio-klik-hr/pen/MYbEYP - codepen.io/studio-klik-hr/pen/KFhAg - codepen.io/studio-klik-hr/pen/rugot - codepen.io/studio-klik-hr/pen/rnHyB - codepen.io/studio-klik-hr/pen/Legcy - codepen.io/canfie1d/pen/ogYrZG - codepen.io/keithpickering/pen/azBdNj - codepen.io/SperWalas/pen/OPbZYW - codepen.io/somethingformed/pen/raWJXV

Bonus:
github.com/zzarcon/focusable - github.com/josephernest/bigpicture.js - github.com/douglascrockford/JSLint - github.com/jshint/jshint - www.bloggertipstricks.com/blogger/custom-robots-txt.html

Bye :-h

Encrypt your Link for Safety Link in Blogspot

Salah satu issue yang sedang merebak belakangan ini adalah tentang decrypt/encrypt! Tujuan diadakannya hal tersebut tidak lain agar tingkat keamanan data/file dapat benar-benar terlindungi dari gangguan jahil para oknum hacker ;)) Dunia web secara khusus mempunyai beragam jenis encrypt or decrypt for folder or file. Cari sendiri saja ilmu encrypting and decrypting di paman google, buanyak buanget gue jg pusing mau nerangin bagaimana @-)
Kesempatan sekarang AA Koben akan berbagi trik converter link. Kegunaan mungkin hampir mirip dengan trick short url dengan tujuan agar link sebenarnya disembunyikan. Karena topik berkaitan dengan kata aman, maka gunakan trick ini dengan bijak. Sebelum masuk ke acara penjambaran, apakah sobat pernah melihat...

Make Your Link Saver, To earn much money with your link! iLink Converter!
safelinkconverter.com

Seperti itulah kira-kira hasil jadi trick yg akan AA share " program or script that utilizes techniques encode and decode using Base64 " Persiapan yg mesti sobat lakukan adalah
>> you harus sudah mempunyai satu tools generator Base64 encoding & decoding!
Ex and download: github.com/hongru/base64-encode---decode
>> Kemudian bumbu racikan yg gue ambil dari get-myfile.blogspot.com
DEMO

Berikut penampakan struktur bumbu dalam page.html

Get my File

Kenapa saya berikan struktur tersebut, siapa tauk ada yg mau buat trick ini dengan satu blog khusus. Karena saya bereksperimen dengan menanamkan semua bumbu pada satu buah postingan dan sukses, berikut bumbunya...

<script type='text/javascript'>//<![CDATA[
function changeLink(){var e=Base64.decode(res);window.open(e,"_blank")}var currentURL=location.href,str=currentURL,res=str.replace("ADD-YOUR-LINK-HERE?url=","");$(".Visit_Link").hide();
function generate(){var e=document.getElementById("download"),n=document.getElementById("btn"),t=document.getElementById("daplong"),r=(document.getElementById("download").href,7),l=document.createElement("span");e.parentNode.replaceChild(l,e);var o;o=setInterval(function(){r--,0>r?(l.parentNode.replaceChild(e,l),clearInterval(o),t.style.display="none",e.style.display="inline"): (l.innerHTML="<h2>Link will appear in "+(""+r)+" Second</h2>",n.style.display="none")},1e3)}//]]></script>
<center><h2 id="daplong" style="color: blue;">Please Wait ...</h2>
<script src="data:application/softgrid-js;base64,dmFyIEJhc2U2ND17X2tleVN0cjoiQUJDREVGR0hJSktMTU5PUFFSU1RVVldYWVphYmNkZWZnaGlqa2xtbm9wcXJzdHV2d3h5ejAxMjM0NTY3ODkrLz0iLGVuY29kZTpmdW5jdGlvbihpbnB1dCl7dmFyIG91dHB1dD0iIjt2YXIgY2hyMSxjaHIyLGNocjMsZW5jMSxlbmMyLGVuYzMsZW5jNDt2YXIgaT0wO2lucHV0PUJhc2U2NC5fdXRmOF9lbmNvZGUoaW5wdXQpO3doaWxlKGk8aW5wdXQubGVuZ3RoKXtjaHIxPWlucHV0LmNoYXJDb2RlQXQoaSsrKTtjaHIyPWlucHV0LmNoYXJDb2RlQXQoaSsrKTtjaHIzPWlucHV0LmNoYXJDb2RlQXQoaSsrKTtlbmMxPWNocjE+PjI7ZW5jMj0oKGNocjEmMyk8PDQpfChjaHIyPj40KTtlbmMzPSgoY2hyMiYxNSk8PDIpfChjaHIzPj42KTtlbmM0PWNocjMmNjM7aWYoaXNOYU4oY2hyMikpe2VuYzM9ZW5jND02NDt9ZWxzZSBpZihpc05hTihjaHIzKSl7ZW5jND02NDt9Cm91dHB1dD1vdXRwdXQrIHRoaXMuX2tleVN0ci5jaGFyQXQoZW5jMSkrIHRoaXMuX2tleVN0ci5jaGFyQXQoZW5jMikrIHRoaXMuX2tleVN0ci5jaGFyQXQoZW5jMykrIHRoaXMuX2tleVN0ci5jaGFyQXQoZW5jNCk7fQpyZXR1cm4gb3V0cHV0O30sZGVjb2RlOmZ1bmN0aW9uKGlucHV0KXt2YXIgb3V0cHV0PSIiO3ZhciBjaHIxLGNocjIsY2hyMzt2YXIgZW5jMSxlbmMyLGVuYzMsZW5jNDt2YXIgaT0wO2lucHV0PWlucHV0LnJlcGxhY2UoL1teQS1aYS16MC05XCtcL1w9XS9nLCIiKTt3aGlsZShpPGlucHV0Lmxlbmd0aCl7ZW5jMT10aGlzLl9rZXlTdHIuaW5kZXhPZihpbnB1dC5jaGFyQXQoaSsrKSk7ZW5jMj10aGlzLl9rZXlTdHIuaW5kZXhPZihpbnB1dC5jaGFyQXQoaSsrKSk7ZW5jMz10aGlzLl9rZXlTdHIuaW5kZXhPZihpbnB1dC5jaGFyQXQoaSsrKSk7ZW5jND10aGlzLl9rZXlTdHIuaW5kZXhPZihpbnB1dC5jaGFyQXQoaSsrKSk7Y2hyMT0oZW5jMTw8Mil8KGVuYzI+PjQpO2NocjI9KChlbmMyJjE1KTw8NCl8KGVuYzM+PjIpO2NocjM9KChlbmMzJjMpPDw2KXxlbmM0O291dHB1dD1vdXRwdXQrIFN0cmluZy5mcm9tQ2hhckNvZGUoY2hyMSk7aWYoZW5jMyE9NjQpe291dHB1dD1vdXRwdXQrIFN0cmluZy5mcm9tQ2hhckNvZGUoY2hyMik7fQppZihlbmM0IT02NCl7b3V0cHV0PW91dHB1dCsgU3RyaW5nLmZyb21DaGFyQ29kZShjaHIzKTt9fQpvdXRwdXQ9QmFzZTY0Ll91dGY4X2RlY29kZShvdXRwdXQpO3JldHVybiBvdXRwdXQ7fSxfdXRmOF9lbmNvZGU6ZnVuY3Rpb24oc3RyaW5nKXtzdHJpbmc9c3RyaW5nLnJlcGxhY2UoL1xyXG4vZywiXG4iKTt2YXIgdXRmdGV4dD0iIjtmb3IodmFyIG49MDtuPHN0cmluZy5sZW5ndGg7bisrKXt2YXIgYz1zdHJpbmcuY2hhckNvZGVBdChuKTtpZihjPDEyOCl7dXRmdGV4dCs9U3RyaW5nLmZyb21DaGFyQ29kZShjKTt9CmVsc2UgaWYoKGM+MTI3KSYmKGM8MjA0OCkpe3V0ZnRleHQrPVN0cmluZy5mcm9tQ2hhckNvZGUoKGM+PjYpfDE5Mik7dXRmdGV4dCs9U3RyaW5nLmZyb21DaGFyQ29kZSgoYyY2Myl8MTI4KTt9CmVsc2V7dXRmdGV4dCs9U3RyaW5nLmZyb21DaGFyQ29kZSgoYz4+MTIpfDIyNCk7dXRmdGV4dCs9U3RyaW5nLmZyb21DaGFyQ29kZSgoKGM+PjYpJjYzKXwxMjgpO3V0ZnRleHQrPVN0cmluZy5mcm9tQ2hhckNvZGUoKGMmNjMpfDEyOCk7fX0KcmV0dXJuIHV0ZnRleHQ7fSxfdXRmOF9kZWNvZGU6ZnVuY3Rpb24odXRmdGV4dCl7dmFyIHN0cmluZz0iIjt2YXIgaT0wO3ZhciBjPWMxPWMyPTA7d2hpbGUoaTx1dGZ0ZXh0Lmxlbmd0aCl7Yz11dGZ0ZXh0LmNoYXJDb2RlQXQoaSk7aWYoYzwxMjgpe3N0cmluZys9U3RyaW5nLmZyb21DaGFyQ29kZShjKTtpKys7fQplbHNlIGlmKChjPjE5MSkmJihjPDIyNCkpe2MyPXV0ZnRleHQuY2hhckNvZGVBdChpKyAxKTtzdHJpbmcrPVN0cmluZy5mcm9tQ2hhckNvZGUoKChjJjMxKTw8Nil8KGMyJjYzKSk7aSs9Mjt9CmVsc2V7YzI9dXRmdGV4dC5jaGFyQ29kZUF0KGkrIDEpO2MzPXV0ZnRleHQuY2hhckNvZGVBdChpKyAyKTtzdHJpbmcrPVN0cmluZy5mcm9tQ2hhckNvZGUoKChjJjE1KTw8MTIpfCgoYzImNjMpPDw2KXwoYzMmNjMpKTtpKz0zO319CnJldHVybiBzdHJpbmc7fX0KdmFyIGVuY29kZT1kb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnZW5jb2RlJyksZGVjb2RlPWRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdkZWNvZGUnKSxvdXRwdXQ9ZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ291dHB1dCcpLGlucHV0PWRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdpbnB1dCcpO3ZhciBVc2VyX0lEPSIiO3ZhciBwcm90ZWN0ZWRfbGlua3M9IiI7dmFyIGFfdG9fdmE9MDt2YXIgYV90b192Yj0wO3ZhciBhX3RvX3ZjPSIiO2Z1bmN0aW9uIGF1dG9fc2FmZWxpbmsoKXthdXRvX3NhZmVjb252ZXJ0KCk7fQpmdW5jdGlvbiBhdXRvX3NhZmVjb252ZXJ0KCl7dmFyIGFfdG9fdmQ9d2luZG93LmxvY2F0aW9uLmhvc3RuYW1lO2lmKHByb3RlY3RlZF9saW5rcyE9IiImJiFwcm90ZWN0ZWRfbGlua3MubWF0Y2goYV90b192ZCkpe3Byb3RlY3RlZF9saW5rcys9IiwgIisgYV90b192ZDt9ZWxzZSBpZihwcm90ZWN0ZWRfbGlua3M9PSIiKQp7cHJvdGVjdGVkX2xpbmtzPWFfdG9fdmQ7fQp2YXIgYV90b192ZT0iIjt2YXIgYV90b192Zj1uZXcgQXJyYXkoKTt2YXIgYV90b192Zz0wO2FfdG9fdmU9ZG9jdW1lbnQuZ2V0RWxlbWVudHNCeVRhZ05hbWUoImEiKTthX3RvX3ZhPWFfdG9fdmUubGVuZ3RoO2FfdG9fdmY9YV90b19mYSgpO2FfdG9fdmc9YV90b192Zi5sZW5ndGg7dmFyIGFfdG9fdmg9ZmFsc2U7dmFyIGo9MDt2YXIgYV90b192aT0iIjtmb3IodmFyIGk9MDtpPGFfdG9fdmE7aSsrKQp7YV90b192aD1mYWxzZTtqPTA7d2hpbGUoYV90b192aD09ZmFsc2UmJmo8YV90b192ZykKe2FfdG9fdmk9YV90b192ZVtpXS5ocmVmO2lmKGFfdG9fdmkubWF0Y2goYV90b192ZltqXSl8fCFhX3RvX3ZpfHwhYV90b192aS5tYXRjaCgiaHR0cCIpKQp7YV90b192aD10cnVlO30KaisrO30KaWYoYV90b192aD09ZmFsc2UpCnt2YXIgZW5jcnlwdGVkVXJsPUJhc2U2NC5lbmNvZGUoYV90b192aSk7YV90b192ZVtpXS5ocmVmPSJodHRwOi8vd3d3LmdldG15ZmlsZS5nYS8yMDE0LzEyL2dldC5odG1sP3VybD0iKyBlbmNyeXB0ZWRVcmw7YV90b192ZVtpXS5yZWw9Im5vZm9sbG93IjthX3RvX3ZiKys7YV90b192Yys9aSsiOjo6IisgYV90b192ZVtpXS5ocmVmKyJcbiI7fX0KdmFyIGFfdG9fdmo9ZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoImFub255bWluaXplZCIpO3ZhciBhX3RvX3ZrPWRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCJmb3VuZF9saW5rcyIpO2lmKGFfdG9fdmopCnthX3RvX3ZqLmlubmVySFRNTCs9YV90b192Yjt9CmlmKGFfdG9fdmspCnthX3RvX3ZrLmlubmVySFRNTCs9YV90b192YTt9fQpmdW5jdGlvbiBhX3RvX2ZhKCkKe3ZhciBhX3RvX3ZmPW5ldyBBcnJheSgpO3Byb3RlY3RlZF9saW5rcz1wcm90ZWN0ZWRfbGlua3MucmVwbGFjZSgiICIsIiIpO2FfdG9fdmY9cHJvdGVjdGVkX2xpbmtzLnNwbGl0KCIsIik7cmV0dXJuIGFfdG9fdmY7fQ==" type="text/javascript"></script>
<script type="text/javascript">//<![CDATA[
function changeLink(){var e=Base64.decode(res);window.open(e,"_blank")}var currentURL=location.href,str=currentURL,res=str.replace("ADD-YOUR-LINK-HERE?url=","");document.write('<button id="download" class="Visit_Link" onclick="changeLink();" style="display: none;text-align:justify;margin-bottom:3px;">Visit Link</button>');
onload:generate();//]]></script></center>

Gantikan tulisan ADD-YOUR-LINK-HERE dengan link postingan!

Cara pemakaian...

1. Encode terlebih dahulu link target dengan menggunakan tool base64 encoding & decoding generator.
Original: https://www.blogger.com/home
Encode: aHR0cHM6Ly93d3cuYmxvZ2dlci5jb20vaG9tZQ==

http:// or https:// harus terbawa (ter-encoding)!!!
2. Tautkan link hasil encoding dengan link ADD-YOUR-LINK-HERE menjadi sedemikian rupa
ADD-YOUR-LINK-HERE?url=LINK-HASIL-ENCODING
3. Demo
undercover-blogger.blogspot.com/2014/12/link-converter-beben-koben.html?url=aHR0cHM6Ly93d3cuYmxvZ2dlci5jb20vaG9tZQ==

Kalau ada yg belum jelas, please jangan tanya ya :))

Happy encrypt \m/

Selection Good Resources in Beginning of the Year

Sebagai blogger pendatang setia blog Koben, pasti sobat sudah pada tahu satu kebiasaan gue yang suka membuat postingan dengan tema selection good resources Jika kalian kunjungi links yg ada, maka dapat menciptakan ide untuk bahan artikel post ;)) Simpan link blog/web yg notabene memang selalu update konten! Ex www.codepen.io salah satu tempat front end designer playground para kreator code. Generated md5 passwords javascript sebuah tool generator password. Uniknya ketika kita membuat satu kata kunci untuk Site Name & Email used on site secara otomatis hasil generate pass tidak akan berubah. Biasanya kalau lupa itu pass, dengan adanya tool ini asalkan kita ingat Site Name & Email used on site maka passnya akan muncul! Pokoknya begitu :P

Berikut beberapa seleksi post awal tahun yg saya dapatkan jauh-jauh sebelum hari...

Keikai MediaRSS Viewer jsdo.it/murakame/zNy0 - Hue · saturation · brightness (Lightness/Luminance) jsdo.it/inu7771/mr28 - Google Maps API jsdo.it/buibui80/k1FP - Cat picture book jsdo.it/teetteet/dmIT - Get count of SNS of URL jsdo.it/teetteet/6o8v - Test of API jsdo.it/tkrkt/jsdoit-menu - base64 of noise transparent PNG image jsdo.it/teetteet/gkVm - Execute Source Image jsdo.it/teetteet/4KU5 - Test of do's tool is happening DOM is jsdo.it/elk/cHPO - Sentence inclusive of share futon want five + α jsdo.it/teetteet/7Lwj - GeoLocator STANDALONE jsdo.it/teetteet/aMkO - Simple scroll jsdo.it/teetteet/wlXn - Hyper cat type canon Mk.2 Ex with intercooler jsdo.it/sasaplus1/egax - Gradient Generator jsdo.it/teetteet/cQq5 - Fullscreen colorpicker jsdo.it/teetteet/hhCI - Link source code viewer jsdo.it/teetteet/58hW - CSS3 Tree jsdo.it/teetteet/tNwD - Tag Cloud jsdo.it/qiu.lin/wfhN - HSV Color Picker jsdo.it/teetteet/6bq1 - Two-color conversion of the image jsdo.it/teetteet/myu2 - Simple Whiteboard with fabric.js jsdo.it/yamineko/kOuy - ACE editor 3 for PC jsdo.it/teetteet/ixZj - Illustrator mock jsdo.it/han.kuro/vsz1y - Current position acquisition and display application jsdo.it/teetteet/9X5q - Good feel of form layout jsdo.it/teetteet/jYv6 - gct256.PerlinNoise jsdo.it/teetteet/pSUo - Text animation jsdo.it/teetteet/3BqQ - SVG animation background generation jsdo.it/reosablo/zU9F - Implement convolution (the convolution processing) jsdo.it/edo_m18/ta0R - CSS Tooltip On Click cssdeck.com/labs/csstooltiponclick - Checkbox styling in CSS cssdeck.com/labs/n8gvfch6 - Animated Responsive Skills Bar cssdeck.com/labs/animated-responsive-skills-bar

Rebound Newsletter cssdeck.com/labs/c9ik4c94 - JQuery Auto Complete cssdeck.com/labs/bxaleaxw - Icon in CSS cssdeck.com/labs/css3-icons - Treestyle list cssdeck.com/labs/treestylelist - Animated gradient cssdeck.com/labs/ojxtjupf - Calendar 2015 cssdeck.com/labs/calendar-2015 - Buttons and inputs flat style ui cssdeck.com/labs/m01fcolh - Styled Select Option cssdeck.com/labs/styledselectoption - Rotating? Menu codepen.io/tmrDevelops/pen/wEBmk - CSS Animated Search Box Concepts codepen.io/brandonkennedy/pen/yGjsi - The super fast Coolors schemes generator! codepen.io/fbrz/pen/aynlk - Pure CSS slice cube slideshow codepen.io/pixelass/pen/mGtfF - Drop & Down codepen.io/mgh/pen/dsqIF - Peeled Text Transforms codepen.io/Michiel/pen/OPPKMr - 3D Experiment Formcodepen.io/Ruddy/pen/MYwqrK - Pure CSS iOS 7 Bokeh Background codepen.io/marvinengelmann/pen/bNdawZ - Flat Breadcrumb buttons codepen.io/ShawnSauce/pen/raNXmw - Pure CSS folded-corner effect codepen.io/ravinthranath/pen/XJJWbr - Animated Image Changes with background-blend-mode codepen.io/dudleystorey/pen/emmzvO - Online notepad codepen.io/kimblim/pen/NPPZVo - Pure CSS browser mockups codepen.io/adrienjarthon/pen/ogjjoj

Resizing, Moving, Snapping Windows with JS & CSS codepen.io/zz85/blog/resizing-moving-snapping-windows-with-js-css - Homepage with bourbon and CSS only Nav codepen.io/jongagarin/pen/pvjGKe - Text Preferences codepen.io/mattdawson/pen/wBMgpd - Set transparent background on image with canvas codepen.io/Mamboleoo/pen/MYKeEX - A Pen by Juan Patten codepen.io/runningskull/pen/vELRyY - CSS cylinder codepen.io/madebyjam/pen/bNERqq - Super Mega codepen.io/tmrDevelops/pen/myVwKE - Simple Accordian codepen.io/zeinab92/pen/PwZXgd - Responsive Text With Only CSS codepen.io/wossname/pen/raVezv - A Pen by Theodor Vararu codepen.io/tvararu/pen/zxqeQd - Glitched Text codepen.io/alexpivtorak/pen/GgZYbL - Animated rounded border on hover codepen.io/ccrch/pen/bNpOZx - Animated "Fold Out" Menu Labels codepen.io/mikegbabb/pen/myPbyK - Progressive blur with CSS & SVG codepen.io/iamvdo/pen/xECmI - Pure CSS, annotated linear carousel codepen.io/paulnoble/pen/ZYOzLG - CSS like buttons codepen.io/GriffinImer/pen/NPrrdx - Simple Player UI codepen.io/itsnoureddine/pen/ZYOebj - Loader transforming to nav animation concept codepen.io/petethedude/pen/zxBmEq - Futuristic HUD Control Monitor Interface codepen.io/declandewet/pen/GgqwXK - Placeholder Services codepen.io/jakob-e/pen/emzxqd - Magic ball (animated) codepen.io/tanghoong/pen/ByLKPG - Flexbox Shenanigans! codepen.io/starzonmyarmz/pen/WbGrgM - Material inspired grid codepen.io/tamashi/pen/PwGZNN - Offcanvas sidebar menu with a twist codepen.io/malydok/pen/LERvpM - Text mask with mix blend mode codepen.io/jreece/pen/NPRzeo - One-way CSS slider codepen.io/nicolasjengler/pen/QwKmqj - Rotating border codepen.io/imprakash/pen/VYaaKQ - Generated MD5 Passwords Javascript codepen.io/fabean/pen/NPbGeq - Account Slider developer.mozilla.org/en-US/demos/detail/account-slider - CSS Specificity Graph Generator jonassebastianohlsson.com/specificity-graph - BPG Image Comparison xooyoozoo.github.io/yolo-octo-bugfixes/

60 Cool CSS Effects On Codepen www.uibrush.com/60-cool-css-effects-codepen

Happy new year <:-P