Ane mau sedikit membagikan sesuatu...
Spoiler for Buka :
Menjadikan web browser sebagai editor seperti notepad rasanya tidak mungkin bisa, tapi nyatanya kita bisa menggunakan Browser yang kita miliki agar bisa menjadi sebuah teks editor untuk membuat catatan, atau membuat file html.
Spoiler for 1. Editor Standar :
Quote:
1
Copy Paste script diatas ke Address Bar di browser kamu, Setelah itu cobalah mengetik di halaman kosong yang terbentuk, anda bisa melakukan penyimpanan dari apa yang diketik dengan menekan CTRL+S atau Menu File->Save
Mengubah Tampilan Editor.
Ternyata tampilan editor di browsernya pun kita bisa ubah, kita bisa membuatnya mirip dengan notepad, sublime-text dan bahkan bisa kita buat seperti kertas untuk menulis diary.
Spoiler for Contoh 2 : Seperti Notepad :
Dengan ini kita bisa menambahkan Teks awalannya.
Quote:
data:text/html, <html contenteditable><style>body {color: #333; width: 960px; margin: 0 auto; display: block; height: 100%; font-size: 36px; padding: 20px;}</style></html>
Spoiler for Contoh 3 : seperti Sublime Text :
Quote:
data:text/html,<title>DoJS</title><style type="text/css">#e{font-size: 16px; position:absolute;top:0;right:0;bottom:0;left:0;}</style><div id="e"></div>[removed][removed][removed]var e=ace.edit("e");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/javascript");[removed]
Spoiler for Contoh 4 : Diary / Text Notes :
Seperti kita sebutkan tadi, kita bisa membuat seolah seperti kertas diary yang siap untuk ditulis, silahkan copy paste script berikut ke URL Address di browser.
http://www.tutorial-webdesign.com/wp...tes-editor.png
Quote:
data:text/html;charset=utf-8, <title>TextEditor</title>
Spoiler for Contoh 5 : Mirip Ruby Editor :
data:text/html, <style type="text/css">#e{position:absolute;top:0;right:0;bottom:0;left:0;}</style><div id="e"></div>[removed][removed][removed]var e=ace.edit("e");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/ruby");[removed]
Spoiler for Contoh 6 : Animasi transisi warna ketika mengetik kode :
http://www.tutorial-webdesign.com/wp...red-editor.png
Quote:
data:text/html, <html><head><link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><style type="text/css"> html { font-family: "Open Sans" } * { -webkit-transition: all linear 1s; }</style>[removed]window.onload=function(){var e=false;var t=0;setInterval(function(){if(!e){t=Math.round(Math.max(0,t-Math.max(t/3,1)))}var n=(255-t*2).toString(16);document.body.style.backgroundColor="#ff"+n+""+n},1e3);var n=null;document.onkeydown=function(){t=Math.min(128,t+2);e=true;clearTimeout(n);n=setTimeout(function(){e=false},1500)}}[removed]</head><body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">
Spoiler for Contoh 7 : Notes lebih rapih :
http://www.tutorial-webdesign.com/wp...tes-editor.png
Quote:
data:text/html;charset=utf-8, <title>TextEditor</title> <link rel="shortcut icon" href="http://g.etfv.co/https://docs.google.com"/> <style> html{height: 100%;} body{background: -webkit-linear-gradient(#f0f0f0, #fff); padding: 3%; height: 94%;} .paper { font: normal 12px/1.5 "Lucida Grande", arial, sans-serif; width: 50%; height: 80%; margin: 0 auto; padding: 6px 5px 4px 42px; position: relative; color: #444; 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: -ms-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: -o-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; -webkit-background-size: 100% 20px; -moz-background-size: 100% 20px; -ms-background-size: 100% 20px; -o-background-size: 100% 20px; background-size: 100% 20px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.07); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.07); box-shadow: 0 1px 2px rgba(0,0,0,0.07); } .paper::before { content: ''; position: absolute; width: 4px; top: 0; left: 30px; bottom: 0; border: 1px solid; border-color: transparent #efe4e4; } textarea{display: block; width:94%;margin:0 auto;padding:3.8% 3%; border: none; outline: none; height: 94%; background: transparent; line-height: 20px;} </style> <body spellcheck="false"> <div class="paper"> <textarea autofocus="autofocus"></textarea> </div> </body> </html>
Oke sekian trik menarik ini, sebagai catatan, untuk menjalankannya anda cukup melakukan copy paste kode-kode diatas ke Address bar di browser kamu, Disarankan Menggunakan Google Chrome
Sumber
Quote:
Kalo berkenan tolong di
Quote:
Ane menerima
Ane menolak
Quote:
Thanks...
