Ensiklopedi

5 Kesalahan SEO Yang Sering Dilakukan Blogger Pemula

Kesalahan SEO Yang Sering Dilakukan Blogger Pemula — SEO menjadi ilmu yang sangat banyak dipelajari oleh para blogger, berbagai macam trik seo di pelajari, dicoba dan dipraktekan. Namun apa hasilnya? Capek sendiri dan pengunjung blog tak kunjung bertambah secara signifikan.

Ada banyak sekali pembahasan tentang SEO ini di Internet, dan dari semua trik itu masih saja banyak kesalahan yang dilakukan blogger pemula tentang SEO, berikut ulasan singkatnya.
1. Anggap SEO segalanya dan konten terabaikan
Banyak blogger yang sibuk mengoptimasi websitenya dengan trik-trik seo, memasang kata kunci dan lain sebagainya, namun sebenarnya yang harus dilakukan terlebih dahulu adalah mengurus konten blog supaya berkualitas dan berguna untuk pengunjung agar mereka betah membaca, sambil mengoptimalkan SEO nya, bukan malah konten asal-asalan dan bahkan copy paste saja, setelah itu sibuk optimasi SEO, itu salah karena Google tentunya tidak menyukai konten yang seperti itu. Hal tersebut mungkin bisa berhasil, namun biasanya tidak tahan lama.
2. Mengabiskan banyak waktu untuk mendesain blog
Banyak blogger baru sibuk memasang berbagai widget untuk blog nya sampai-sampai blog nya terlihat sangat ramai, bahkan ikan dalam akuarium pun ada di blog nya :) , ini sebenarnya tidak tepat karena akan memperlambat waktu muat website Anda, dan blog lambat tersebut tidak disukai Gooogle, pengunjung pun jadi tidak nyaman.
– Baca juga: Elemen Yang Tidak Perlu Ada Pada Sebuah Blog
3. Terlalu pusing soal SEO, padahal belum belajar dasarnya.
Banyak blogger pemula yang terlalu menganggap pusing soal SEO dan akhirnya malah berfikir aneh-aneh, terlalu buru-buru, belum belajar dasar sudah mau masuk ke link building piramid, tower, dll #alah.
Malah sampai-sampai karena tidak berhasil-berhasil menerapkan SEO, malah jadi semangat ngeblog nya yang hilang, dan akhirnya gagal membuat blog yang sukses.
– Baca juga: Begini Cara Agar Blog Tetap Disukai Banyak Orang
4. Tidak memilih topik blog yang tepat
Blogger baru sekarang banyak yang ingin cepat sukses dan menganggap penghasilan dari blog itu sangat mudah, selain itu banyak yang sembarangan saja memilih topik blog, hanya mengikuti yang sedang ramai. Padahal lebih baik jika topik blog itu sesuai dengan bidang yang digeluti agar saling mendukung dan bisa membuat tulisan yang kredibel, kalau tidak menguasai biasanya akan copy paste saja, anda pasti tau bagaimana google memposisikan konten hasil duplikat tersebut. Hm…
5. Beranggapan semua serba instan

Foto via webmeup.com

Banyak blogger pemula ‘mupeng’ sekali melihat pendapatan blogger lain yang sangat tinggi, tapi mereka tidak paham kalau blogger sukses tersebut berusaha sangat keras agar blognya sukses dan bisa menghasilkan banyak uang, blogger pemula beranggapan bisa instan hanya dengan cara-cara SEO curang yang mereka baca di Internet.
– Baca juga: Cara Menghasilkan Uang Dari Website Blog
Blogger baru sibuk SEO di awal, padahal kebanyakan blogger sukses itu fokus membangun blognya dengan rajin menanamkan konten yang berkualitas dan juga sekaligus yang disukai google, sehingga pengunjungnya banyak karena merasa kontennya berguna dan bisa membantu hidup mereka.
Sekian, semoga berguna untuk teman-teman pembaca Jurnalweb, sampai jumpa di pembahasan-pembahasan menarik berikutnya.

7 Cara Mengoptimasi Website WordPress Anda

Cara mengoptimalkan website wordpress itu tidak sulit, Anda hanya perlu melakukan sedikit pengaturan pada settingan yang sudah tersedia, dan semuanya bisa dibilang gratis dan tidak ribet.
WordPress saat ini memang dianggap sebagai platform yang sangat baik dan banyak penggunanya. Terhitung, hingga bulan November 2015 ini WordPress sudah digunakan oleh 25% dari jumlah seluruh website yang ada di internet.
Angka tersebut tentu sangat besar dimana ada lebih dari 400 juta website diseluruh dunia yang menggunakan WordPress, termasuk lebih dari 100 juta di Amerika Serikat.
Selain itu website WordPress di seluruh dunia mempublikasikan postingan setiap 17 detik. Diantara website tersebut juga banyak yang berjenis website bisnis, fakta tersebut tentu menunjukan bagaimana pentingnya WordPress sebagai layanan manajemen konten.
Kesederhanaan, integrasinya dengan sosial media serta banyaknya theme dan plugin adalah alasan utama banyak yang menggunakan WordPress.

Optimasi WordPress (Image: blog.keycdn.com)

Namun menggunakan WordPress tentu tidak bisa begitu saja setelah di install lalu didiamkan tanpa diatur, Agar website maksimal dengan WordPress Anda tetap harus memperhatikan faktor-faktor berikut ini.

1. Kualitas Themes

Terdapat ribuan theme WordPress yang gratis maupun berbayar yang bisa Anda gunakan untuk membangun website Anda. Namun, Anda perlu untuk berhati-hati dalam memilih theme yang baik untuk website Anda. Tema harus bisa fleksibel dan Anda harus bisa memodifikasi theme tersebut tanpa ribet.
– Baca juga: 18 Theme WordPress Minimalis Untuk Blog Anda

2. Hosting

Hosting adalah salah satu faktor penting keberhasilan website Anda, dimana hosting yang tangguh tentu akan membuat usaha Anda lancar. Jangan berlama-lama berada di hosting yang sering down, atau bermasalah. Segera cari penggantinya yang lebih baik. Jangan lupa juga untuk mencari hosting yang bisa memberikan layanan 7×24 jam.
– Baca juga: 5 Tips Cara Memilih Web Hosting Yang Bagus Baik dan Benar

3. Pilih plugin dengan bijak

Terdapat banyak sekali plugin yang bisa Anda gunakan dengan gratis, namun tentu Anda harus bisa memilih plugin terbaik dengan bijak. Jangan menggunakan terlalu banyak plugin agar website Anda tidak terbebani. Gunakan plugin yang penting-penting saja namun terpercaya.
– Baca juga: 11 Plugin WordPress Terbaik Yang Penting dan Berguna Untuk Blog

4. Lakukan konfigurasi pada website Anda

Setelah sukses menginstall WordPress, maka setelah itu Anda perlu melakukan berbagai pengaturan. Misalnya, Anda harus memikirkan bagaimana mengeloka komentar, apakah komentar langsung terpublish atau perlu di moderasi dulu oleh Admin. Selain itu Anda juga perlu mengatur permalink serta pengaturan lain seperti pencegahan spam.

5. Tampilan mobile

Saat ini pengguna mobile internet semakin ramai, Google pun menginformasikan bahwa pencarian sekarang lebih banyak dilakukan dari ponsel dibandingkan dari dekstop. Jadi pastikan website Anda bisa dibuka dengan maksimal dari ponsel, dengan cara memilih theme yang responsive atau menginstall plugin untuk tampilan mobile.
Selain itu website yang support mobile juga akan lebih di prioritaskan oleh mesin pencari Google.
– Baca Juga: 10 Plugin WordPress Untuk Membuat Website Versi Mobile

6. Keamanan

WordPress yang ada saat ini terbilang cukup Aman, namun tentu Anda juga perlu untuk menambahkan pengamanan-pengamanan lain demi website kesayangan Anda dengan menggunakna plugin atau trik-trik tertentu.
– Baca juga:

7. Search Engine Optimization (SEO)

SEO sudah menjadi perbincangan dimana-mana, karena dengan mengusai tehnik ini maka Anda bisa menguasai mesin pencari. Semua orang tentu ingin website nya muncul di halaman pertama mesin pencari Google. Untuk itu Anda bisa menggunakan berbagai plugin SEO atau dengan menambahkan sitemap, dan yang tak kalah penting tambahkan plugin yang bisa membuat website Anda mudah untuk dibagikan ke sosial media agar pengujung semakin bertambah.
– Baca juga: 5 Tips SEO Yang Mudah Dilakukan
Itulah beberapa cara mengoptimasi website WordPress Anda agar bisa berjalan dengan maksimal dan membawa keuntungan untuk Anda dan pengunjung.

8 Alat Membuat Desain Web Responsive Untuk Developer

Alat Membuat Web Responsive Untuk Web Developer — Desain web adalah bagian yang penting dalam sebuah proyek pengembangan website. Klien pada saat ini menuntut sebuah website yang responsive untuk dibuat.

Dengan menggunakan HTML5 dan CSS3, hal tersebut tentu menjadi cukup mudah untuk para developer. Developer bisa lebih fokus pada desain web, user experience dibandingkan kode back-end.
Terdapat banyak framework yang tersedia secara online yang dapat dimanfaatkan untuk mendesain web. Ada grid yang fleksibel, gambar dan layout yang bisa digunakan developer.
Pada tulisan kali ini TWD akan informasikan kepada Anda beberapa tools yang bisa digunakan untuk mempermudah pekerjaan Anda dalam membuat desain web responsive.

1. Froont

Froont merupakan alat berbasis web yang efektif dan bisa berjalan di jendela browser Anda. Bisa digunakan untuk merancang desain front-end dari situs website. Alat ini termasuk mudah untuk digunakan, karena anda hanya perlu melakukan drag and drop elemen yang disediakan dan nanti akan terbentuk sendiri kode HTML dan CSS nya.

Froont (Foto: lafermeduweb.net)

2. Screenqueri.es

Screenqueri.es adalah alat yang berbasiskan pixel yang menarik untuk membuat web responsif. Anda bisa menguji tempilan web responsif Anda dengan menggunakan 30 perangkat yang berbeda menggunakan screenqueri.es.

3. Viewport Resizer

Viewport Resizer ialah alat untuk merancang berbasis browser. Anda bisa mengetes website responsive apapun menggunakan ini. Anda juga bisa membuat bookmark dari alat ini di browser Anda. Anda bisa menguji kompatibilitas layar dengan mudah dengan alat ini.

4. Opera Mobile Classic Emulator

Masih banyak sekali pengguna yang menggunakan Opera Mini di ponselnya. Oleh karena itu developer juga perlu untuk memeriksa apakah website nya sudah bagus jika dibuka dengan Opera atau belum dengan menggunakan Opera Mobile Classic Emulator ini.

Foto via kabatology.com

5. Review.js

Review.js ini dikembangkan dengan Javascript murni ini bisa digunakan untuk menguji efisiensi desain web Anda. Alat ini mengikuti prinsip “progresive enhancement”.

6. Jetstrap

Jetstrap merupakan alat untuk membangun antarmuka visual. Alat ini menyediakan cara untuk membuat prototipe dengan capat di browser. Desainer yang biasa bekerja dengan Bootstrap bisa memilih tools ini. Cukup drag and drop dalam menggunakan alat ini.

7. Adobe Edge Inspect CC

Ini termasuk alat yang cukup ringan untuk memeriksa desain web. Anda dapat mendownload toolbar dan plug-in dan uji coba desain pada perangkat yang berbeda. Adobe Edge Inspect CC ini mengikuti pendekatan minimalis saat merancang.

8. The Responsive Calculator

The Responsive Calculator adalah sebuah alat untuk desainer web untuk mengkonversi pixel PSD ke persen. Alat ini sangat berguna untuk digunakan selama awal pengembangan website responsive Anda.

13 Tutorial Cara Membuat Game Dengan HTML5

Tutorial membuat game dengan HTML5 — Seperti yang kita ketahui bahwa HTML5 saat ini menjadi perbincangan hangat dikalangan web developer saat ini, bagaimana tidak, kecanggihan HTML5 terbukti sudah berhasil memukul mati kejayaan Flash sebagai sarana pembuatan animasi untuk website.
Saat ini beberapa game populer di Internet telah dibuat menggunakan HTML5, olah karena itu tidak ada salahnya jika kita juga mulai mencoba merambah ke dunia game HTML5 ini.
HTML5 telah memberikan developer sejumlah fitur dan kemampuan canggih. Diantaranya adalah kemampuan untuk membangun game yang inovatif dan keren yang dapat dimainkan oleh pengguna langsung di web browser mereka. Tetapi untuk membangun permainan yang benar-benar menarik, tentunya seseorang harus menjadi developer yang benar-benar berbakat. Untuk ini mungkin diperlukan beberapa tutorial untuk mengasah kemampuan tersebut. Beberapa tutorial ini mungkin bisa dijadikan panutan awal bagi kita semua.
1. Buat Game Pertama Anda Dengan HTML5
Tutorial yang disajikan oleh Nettuts+ ini akan memandu kita semua untuk membuat game pertama dengan menggunakan HTML5
2. Membuat Animasi Sprite Dengan Kanvas HTML5 dan Javascript
Tutorial ini akan mengajarkan anda membuat animasi sprite dengan menggunakan HTML5 dan Javascript.
3. Pengenalan ImpactJs
ImpactJs adalah sebuah framework untuk membuat game, dan artikel ini akan memandu anda memahami sedikit tentang ImpactJS.
4. Mengenal CreateJS dan Membuat Game Bola Pimpong
Belajar CreateJS dengan studi kasus membuat game bola Pimpong dengan HTML5
5. Mengenal Gamepad API
Dengan gamepad API maka game yang anda buat dapat dihubungkan dengan konsol lama yang anda punya, jadi ini juga perlu dipelajari untuk membuat game berbasis HTML5
6. Membuat Karakter Game
Sebuah game tentunya membutuhkan sosok karakter, dan artikel ini akan mengajarkan anda membuat karakter tersebut.

Contoh karakter game

Baca Juga: Membuat Animasi Lingkaran Dengan Canvas HTML5 – Javascript
7. Membuat Game RPG Untuk Mobile dengan HTML5
Tutorial ini mengajarkan anda membuat game RPG dengan HTML5 untuk digunakan di platform yang support HTML5
8. Membuat Game Farming (perkebunan) seperti Farmville
Tutorial ini akan mengajarkan anda membuat game farming sederhana seperti farmville atau kalau dulu anda pernah bermain Harverst Moon di Playstation 1.
9. Membuat Game Binatang Peliharaan Virtual
Tutorial ini akan mengajarkan anda membuat game yang dimana kita diminta untuk memelihara binatang kesayangan secara virtual.
10. Belajar Mengelola Aset Dalam Pembuatan Game
Ingin membangun komponen manajemen aset sederhana untuk permainan HTML5 Anda? Berikut adalah cara untuk melakukannya!
11. Belajar Membuat Game Yang Bisa Auto Resize
Pengguna anda tentu terkadang ingin memainkan game secara portrait dan terkadang landscape, nah artikel ini bisa membantu anda memahami pembuatan game yang bisa auto resize dengan html5.
12. Membuat Game Ular Dengan Kanvas HTML5
Kanvas adalah salah satu elemen penting di HTML5 jika anda ingin membuat game, pada artikel ini anda bisa memahami pembuatan kanvas dalam studi kasus membuat game ular atau snake game
Baca Juga: Belajar HTML5 Dengan Video
13. Membuat Game Ala Super Mario
Anda tentu dulu pernah memainkan game Super Mario, dimana disitu ada monster atau musuhnya, ada cerobong dan ada jurang nya, artikel ini akan membawa anda kembali ke masa lalu dengan membuat game ala Super Mario

Proteksi CSS Dengan PHP

CSS yang merupakan kependekan dari Cascading Style Sheets adalah kumpulan kode yang digunakan untuk mempercantik tampilan website, css mengatur suatu objek harus seperti apa, berwarna apa, bentuknya bagaimana, ukurannya seberapa besar, dan lain sebagainya. CSS Biasanya digunakan di html, php, asp, dan lain lain.

Image Credit by Telegraph.co.uk

Membuat CSS itu tergolong gampang-gampang susah. Dan pada suatu hari saya pernah kecolongan CSS Saya, dimana seseorang dengan mudahnya melakukan copy paste kode css dengan fitur View Page Source yang ada di browser, saya mencari cara proteksi css di google. Akhirnya saya menemukannya :D. Okay kita mulai mempelajarinya disini.
Contoh saya gunakan css dibawah :

.class { key:value; }

filenamenya style.css
Kita Ganti nama filenya menjadi berakhiran .php ( contoh : style.css menjadi style.php )
Selanjutnya kita ganti kode diatas menjadi kode berikut

<?php
session_start();
header("Content-type: text/css");
if($_SESSION['NameSession'] != "Key" ){ die("CSS PROTECTED"); }
$_SESSION['NameSession'] = "AnotherKey";
?>
isi css disini

CSS Sudah diproteksi dengan bantuan session php, dimana jika session tidak ditemukan atau tidak cocok maka kode css tidak akan ditampilkan, namun browser hanya akan menampilkan tulisan “CSS PROTECTED”, sampai disini kode ini sudah oke, tetapi belum bisa digunakan.
:: Cara Penggunaan
Kalau ingin menggunakan kode berikut. ( Taruh di index.php / lainnya ), disini kita memprotek isi dari style.php yang isinya adalah kode css dengan menggunakan session di php.

<?php
session_start();
$_SESSION['NameSession'] = "Key";
?>
Isi index / header atau lainnya

:) Silahkan dicoba.

DEMO

Untuk demo silahkan lihat disini.

TIPS LAIN

Untuk menggunakan CSS nya cukup mudah. Namun jangan menggunakan link href, tetapi gunakan @import seperti berikut ini.

<style type="text/css">@import url(http://blablabla/style.css);</style>

Menyamarkan style.php menjadi style.css

dan sedikit lagi. Trik menghilangkan ekstensi .php dan menggantinya dengan .css agar kode dapat diproteksi kita menggunakan .htaccess ( mod_rewrite ). Bagaimana caranya?
Begini Caranya :

RewriteEngine on
RewriteRule style.css style.php

Bagaimana ? Anda bisa ? Coba dulu. Silahkan Berkomentar bila ada masalah, atau belum mengerti.
HASIL
DEMO | DOWNLOAD CODE
Berikut file CSS yang di protek:
http://tutorial-webdesign.com/labs/php/proteksi-css-dengan-php/style.php
http://tutorial-webdesign.com/labs/php/proteksi-css-dengan-php/style.css
Kelemahan

Menjadikan Browser Sebagai Text Editor

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.
Ini dapat digunakan untuk membuat catatan dengan cepat, biasanya dari pada membuka-buka notepad lebih mudah jika kita tinggal klik link bookmark yang sudah kita buat.
Kembali ke topik utama, menjadikan Web Browser seperti mozilla atau chrome sebagai editor dapat kita lakukan dengan menuliskan script singkat berikut di Address bar.
Tips:

Untuk mencoba tinggal Copy Paste kode ke Address Bar di Browser
Simpan di bookmark agar mudah di klik dengan cepat
Gunakan Google Chrome Untuk Mencoba

Artikel Sejenis

CSS Tanpa HTML

Contoh 1 : Editor Standar

data:text/html, <html contenteditable>

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.

Contoh 2 : Seperti Notepad

Dengan ini kita bisa menambahkan Teks awalannya.

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>
#TWDNotes:

Contoh 3 : seperti Sublime Text

Sublime Text di Browser

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><script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script><script>var e=ace.edit("e");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/javascript");</script>

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.

Bergaya diary / notes

 

    data:text/html;charset=utf-8, <title>TextEditor</title>
           
    <style>
    body {
            background: -webkit-linear-gradient(#f0f0f0, #fff);
            padding: 3%;
            height: 94%;
           
    }
     
    .paper {
            font: normal 14px "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;
    }"><h1>Text Editor</h1>
    </style>
     
    <link rel="shortcut icon" href="http://g.etfv.co/https://docs.google.com"/>
     
    <body OnLoad='document.body.focus();' contenteditable spellcheck="true" class="paper" >

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><script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script><script>var e=ace.edit("e");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/ruby");</script>

Contoh 6 : Animasi transisi warna ketika mengetik kode

Background Merah

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><script>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)}}</script></head><body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">

Contoh 7 : Agar kursor langsung fokus

data:text/html, <textarea style="font-size: 1.5em; width: 100%; height: 100%; border: none; outline: none" autofocus />

Contoh 8 : Ditambah Placeholder

Ditambah Placeholder

data:text/html, <style>html,body{margin: 0; padding: 0;}</style><textarea style="font-size: 1.5em; line-height: 1.5em; background: %23000; color: %233a3; width: 100%; height: 100%; border: none; outline: none; margin: 0; padding: 90px;" autofocus placeholder="TWD Editor..." />

Contoh 9 : Bisa diberi title

Agar ketika di bookmark ada judul yang bagus, kita bisa tambahkan tag title

data:text/html, <title>Text Editor</title><body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">

Contoh 10 : Dengan Merubah Font agar lebih keren

data:text/html;charset=utf-8, <title>TextEditor</title><body contenteditable style="font-size:2rem;font-family:monaco;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;" spellcheck="false"><h1>TWD Editor</h1><p>Start Here.

Contoh 11 : Kita juga bisa membuat file HTML

Tinggal jalankan, lalu bookmark, untuk mengetik tinggal arahkan kursor
Editor.html | Demo

<!doctype html>
<meta charset="utf-8">
<title>html5 notepad</title>
<textarea></textarea>
<script>
var n = document.getElementsByTagName('textarea')[0];
n.onchange = function(){localStorage.setItem("n",n.value);}
n.value = localStorage.getItem("n");
</script>

Contoh 12 : Notes lebih rapih