Halaman Teks Editor Untuk Menulis - Jika menulis sebuah artikel blog secara langsung dalam formulir teks editor COMPOSE akan sangat sulit mengoreksi tata bahasa, seperti kesalahan ketik dan menganalisa cerita tulisan agar enak untuk dibaca, sehingga hanya untuk membuat 1 posting artikel blog saja akan membutuhkan waktu yang cukup lama. Saat mendapatkan sesuatu inspirasi untuk bahan tulisan akan lebih baik menyalin cerita tersebut terlebih dahulu untuk ditulis kesebuah kertas kosong atau catatan kecil, sehingga saat akan memindahkannya untuk membuat posting blog, kita tidak lagi repot-repot untuk mengoreksi teks tersebut. Tinggal di Copy lalu Pastekan pada formulir kosong mode tulis HTML/Compose pada blog, lalu publikasikan tulisan, lebih mudah dan praktis.
Menumbuhkan Ide Inspirasi Menulis Melalui Blogwalking bisa Anda jadikan acuan untuk mencari bahan tulisan posting Anda berikutnya, hal apa yang Anda temukan saat blogwalking, maka pindahkan pemikiran itu dalam sebuah catatan kecil dan tuliskan. Hal ini akan dapat membantu saat Anda membuat artikel menjadi mudah untuk menyambung teks itu dengan ide-ide Anda yang lain. Tapi pertanyaannya bagaimana jika Anda sedang online menggunakan jasa "WARNET", tidak mungkin meminta selembar kertas kosong kepada operator penjaga warnet bukan.? belum lagi meminjam pulpen beliau, hehe..!!
Pekerjaan Anda untuk membuat posting blog sementara akan saya permudah, Anda tidak perlu lagi catatan kecil atau kertas buram (sele-sele) untuk menulis bahan cerita sementara, dan Anda bisa melakukannya saat online sekalipun itu di warnet pada Halaman Teks Editor Untuk Menulis versi SAHABAT BLOGGER 77 seperti ini:
DEMO SHOW
Teks editor ini saya desain semirip mungkin dengan halaman formulir HTML/Compose yang ada pada blog, seperti:
Namun untuk tag heading option dan jenis font tidak saya sertakan, karena pilihan itu nanti bisa Anda gunakan saat tulisan sudah Anda Pastekan pada halaman menulis blog seperti tampilan gambar berikut:
Agar pekerjaan Anda untuk menulis lebih mudah lagi, cukup Copy semua kode dibawah ini, lalu simpan pada laman blog Anda, sehingga saat Anda membutuhkannya untuk membuat tullisan posting sementara akan lebih mudah Anda temukan. Kode lengkapnya seperti ini:
Nah..!! setelah ini cerita apa yang akan Anda tuliskan disana untuk membuat artikel blog selanjutnya, lebih mudah dan menarik bukan.!! semoga terinspirasi. Terimakasih.
Menumbuhkan Ide Inspirasi Menulis Melalui Blogwalking bisa Anda jadikan acuan untuk mencari bahan tulisan posting Anda berikutnya, hal apa yang Anda temukan saat blogwalking, maka pindahkan pemikiran itu dalam sebuah catatan kecil dan tuliskan. Hal ini akan dapat membantu saat Anda membuat artikel menjadi mudah untuk menyambung teks itu dengan ide-ide Anda yang lain. Tapi pertanyaannya bagaimana jika Anda sedang online menggunakan jasa "WARNET", tidak mungkin meminta selembar kertas kosong kepada operator penjaga warnet bukan.? belum lagi meminjam pulpen beliau, hehe..!!
Pekerjaan Anda untuk membuat posting blog sementara akan saya permudah, Anda tidak perlu lagi catatan kecil atau kertas buram (sele-sele) untuk menulis bahan cerita sementara, dan Anda bisa melakukannya saat online sekalipun itu di warnet pada Halaman Teks Editor Untuk Menulis versi SAHABAT BLOGGER 77 seperti ini:
Teks editor ini saya desain semirip mungkin dengan halaman formulir HTML/Compose yang ada pada blog, seperti:
- Teks Tebal (bold)
- Teks Miring (italic)
- Garis Bawah (underline)
- Teks Rata Kiri (justify-left)
- Teks Tengah (justify-center)
- Teks Rata Kanan (justify-right)
- Menyisipkan Gambar (upload/add image)
- Warna Teks (font color)
Namun untuk tag heading option dan jenis font tidak saya sertakan, karena pilihan itu nanti bisa Anda gunakan saat tulisan sudah Anda Pastekan pada halaman menulis blog seperti tampilan gambar berikut:
BACA JUGA YUKK..!!
Cara Membuat Panel Slide Halaman PostingAgar pekerjaan Anda untuk menulis lebih mudah lagi, cukup Copy semua kode dibawah ini, lalu simpan pada laman blog Anda, sehingga saat Anda membutuhkannya untuk membuat tullisan posting sementara akan lebih mudah Anda temukan. Kode lengkapnya seperti ini:
<style type='text/css'>
* {margin:0;padding:0}
#layout {margin:0 auto}
#text-title {
color: #fff;font: bold 10pt 'arial', sans-serif;
margin: 0.5em 16px 0 8px; float: left;clear: none}
#editor {font: 300 10pt arial;overflow:auto;padding: 8px;border: 1px solid #333}
#menu-toolbar {
font: 10pt arial;background: green;
margin: 0 0 6px 0;padding: 6px;
border-radius:8px 8px 0 0;border-bottom:2px solid red}
button:hover {background: #00dd77}
button:active {background: #00aa55;transform: translate( 1px, 1px )}
button {font: 10pt arial;background: #00cc55;padding: 6px;border:none}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://s-blogger77.googlecode.com/svn/trunk/rich-text-editor.js"></script>
<link rel="stylesheet" href="URL-Blog Anda/resources/demos/style.css">
<div id="layout">
<div id="menu-toolbar">
<div id="text-title">
Text Editor :</div>
<button id="bold" onclick="makeBold()"> Bold </button><button id="italic" onclick="makeItalic()"> Italic </button><button id="underline" onclick="doUnderline()"> Underline </button><button onclick="justifyLeft()"> Justify Left </button><button onclick="justifyCenter()"> Justify Center </button><button onclick="justifyRight()"> Justify Right </button><button onclick="doAddImage()"> Add Image </button><button onclick="doSetTextColor()"> Set Text Color </button></div>
<div id="editor" contenteditable="true">
KLIK, lalu tulis sesuatu disini...</div>
</div>
* {margin:0;padding:0}
#layout {margin:0 auto}
#text-title {
color: #fff;font: bold 10pt 'arial', sans-serif;
margin: 0.5em 16px 0 8px; float: left;clear: none}
#editor {font: 300 10pt arial;overflow:auto;padding: 8px;border: 1px solid #333}
#menu-toolbar {
font: 10pt arial;background: green;
margin: 0 0 6px 0;padding: 6px;
border-radius:8px 8px 0 0;border-bottom:2px solid red}
button:hover {background: #00dd77}
button:active {background: #00aa55;transform: translate( 1px, 1px )}
button {font: 10pt arial;background: #00cc55;padding: 6px;border:none}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://s-blogger77.googlecode.com/svn/trunk/rich-text-editor.js"></script>
<link rel="stylesheet" href="URL-Blog Anda/resources/demos/style.css">
<div id="layout">
<div id="menu-toolbar">
<div id="text-title">
Text Editor :</div>
<button id="bold" onclick="makeBold()"> Bold </button><button id="italic" onclick="makeItalic()"> Italic </button><button id="underline" onclick="doUnderline()"> Underline </button><button onclick="justifyLeft()"> Justify Left </button><button onclick="justifyCenter()"> Justify Center </button><button onclick="justifyRight()"> Justify Right </button><button onclick="doAddImage()"> Add Image </button><button onclick="doSetTextColor()"> Set Text Color </button></div>
<div id="editor" contenteditable="true">
KLIK, lalu tulis sesuatu disini...</div>
</div>
Nah..!! setelah ini cerita apa yang akan Anda tuliskan disana untuk membuat artikel blog selanjutnya, lebih mudah dan menarik bukan.!! semoga terinspirasi. Terimakasih.
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul= Halaman Teks Editor Untuk Menulis
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
keren dan menarik ya mbak,
BalasHapusmau dipasang tapi dipasang dimana? blog cuma satu
maksudnya disimpan di laman Mba Lina..
Hapusituloh Mba..yg masih sodara dgn tulisan di navigasi headerr blog.. yg urlnya sj yg diambil... (sebelum disimpan distu..)
inii sdh benar pa tdk ya..
ini hanya sebagai tool yang bisa kita gunakan untuk membuat coretan kecil sebelum benar-benar membuat dan mempublikasikan artikel blog. tempatkan diamana saja yang menurut kita pantas untuk ditampilkan.
Hapusbuat blog lagi la mbak imerlina, tapi dipasang di blognya kan jadi cantik :D
Hapusiyya ya.. berfungsi..
BalasHapuspembacaannya.. dari mana Vy.. sementara klo diperhatikan kode di ats.. sepertinya tdk ada yg membantu perubahan..
untuk ide nulis.. lebih dpt mendalami isi tulisan klw diambl dri pengalaman sendiri.. takutnya klw ada yg bertanya kita nda bisa jawab he.he.he...
meski yg kita tuliskn itu sedikit miring.. dan kadangkala juga susah dipahami.. intinya ada pada si penulis (rahasia penulis).. apa dan makna apa yg ia coba sampaiikan..
naah inih kode css style nulis sy Vy..
yg terlihat belum tentu nampak..pun yg nampak belum tentu terlihat..anehkan? hahaha..
contohnya saya yang tidak paham mas :D
Hapusakan lebih baik mas Al, apapun hal cerita yang kita tuliskan untuk memberikan informasi kepada pembaca, sampaikanlah itu karena memang kita sudah menguasai atau pernah mengalami cerita itu, karena saat mereka yang bertanya kita tidak bisa memberikan penjelasan yang ia butuhkan, akan terasa aneh (berbuat tetapi tidak bertanggung jawab) kurang lebih seperti itu ya mas Al.
HapusVy.. diluar kontek judul
Hapusknapa ya tab..yg judul ada agnes aldino monika..aura aldino kasih dan nikita aldino willy.. dipostingan kemarin.. kalau kita klik tabnya.. malah terbuka di tab baru browser.. tidak terbuka di tempat.. ituh kenapa ya Vy?
iya gak apa-apa ma,
Hapuskemarin Devy juga sudah lihat, rada aneh juga sih saat diKLIK link tab kok malah ke jendela baru pada browser, hal seperti ini pernah Devy temukan pada beberapa tag script, coba perhatikan Template yang mas gunakan, dimana letak script-jQuery dalam template yang mas Al gunakan.
ada di tengah..hampir pas diatas penutup hed..
Hapusselanjutnya bagaimana..
diulang2.. script-jQuery ituh yg bagaimana..apa yg seperti googleapis ya?
Hapusbenar mas yang seperti itu, 1.10.2/jquery.min.js updatetan terbaru.
Hapus<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
yaya.. sama ituh..
Hapusletaknya di atas skin pembuka.. tdk jauh dari meta2 tag..awal html Vy..!
Coba pindahkan tepat diatas tag penutup </head>
Hapussudah.. hasilnya ttp sama.. yaa nda papalah..
Hapusbiyar saja begitu..
barusan Devy sudah mencoba elemen kodenya pada 2 model Template yang berbeda, dan hasilnya sama seperti tampilan DEMO SHOW tidak ada masalah, dan Devy sudah lihat kode yang mas Al gunakan. coba perhatikan pada kode HTML pada url ini mas:
Hapus<ul class="tabs">
<li><a href="#one">Agnes Monica</a></li>
<li><a href="#two">Aura Kasih</a></li>
<li><a href="#three">Nikita Willy</a></li>
</ul>
jangan menambahkan atribut target="_blank" pada link, setelah itu hapus teks link lalu ganti dengan tanda # (pagar).
ooiya..sdh tau penyebabnya..karena memang di bawah hed template ada atribut ituh.. jadi.. mau tidak mau.. mempengaruhi.. setiap unsur2 link di dalamnya..
Hapushoaamzz.. ngantuk..!
brrti ini dipasang di halaman posting juga kn, agar bisa dibuatkan label untuk mempermudah mecari ..
BalasHapusoya ... sy pernah baca di artikel tetangga, jika menulis artikel selain di halaman posting blog kadang diangga copy-paste juga ,,, gmn mnrt devy ... ?
sebenarnya ini hanya sebagai tool untuk memudahkan kita menulis coretan kecil, sehingga saat akan membuat karya tulisan yang sebenarnya akan dengan mudah mendapatkan alur cerita tulisan yang enak untuk dibaca.
Hapusibarantnya sebagai kertas sele-sele kata orang, seperti saat ujian matematika yang diberikan kertas buram untuk mengerjakan soal.
oh ,,, brrt gpp yah ,,,,
Hapustapi klo pemasangannya di halaman posting ,,,hmmmm blm kunjung berhasil juga ,,, :-?
Info menarik bro sayangya saya gak begitu ngeh tentang script dan koding.
BalasHapusthanks mbak tutorialnya..
BalasHapusTerimakasih mba saya terus terang baru tahu perlu sambil praktek sepertinya tapi kendala nya saya ga paham script soalnya, pasti sangat membantu kalau pasang Halaman Teks Editor
BalasHapusgak apa-apa mbak, Devy juga kagak paham kok, cuma tahu sedikit saja, hehe..!!
HapusKalau aku lebih sering ngetik postingan di word. Baru di copy ke blog..
BalasHapuskalo saya alhamdulillah sdh punya laptop sendiri jadi bisa ditulis di note,saya juga sama mba suka ngumpulin ide-ide di note buat bahan posting.jadi pas posting tak perlu waktu lama.terimakasih infonya mba devi..
BalasHapusyang saya salute tuh idenya devy memang sangar...
BalasHapusbentuknya sederhana tapi stylish dev dan sangat berguna untuk menulis...
kali ini saya comot langsung dev ya....terima kasih dev atas tutorialnya
oh....yaa....udah jadian belum kemarin tuh....saya sih nunggu makan-makannya aja dev. heeee
takutnya sahabat pecinta SAHABAT BLOGGER 77 sedikit kecewa jika terlalu sering memberikan tutorial yang sudah sering dibahas blog tetangga, jadi devy merubah sedikit tampilan yang belum ada, biar terlihat unik gitu mbah, hehe..!!
Hapusoh iya, maksudnya mbah neh jadian apaan tuh..!!
Wah keren ini mah mbak..mantab jadi ada sensasinya gitu
BalasHapusKunjungan perdana Gan.. kenalin ane Insan dari obrolbatu.com, kebetulan sekarang sedang login pake akun Google punya istri :p
BalasHapusCakep blognya Mba, post nya pun OK punya. Bener2 gak nyangka deh cantik2 pinter banget ngeblognya (h)
suka bngung sama orang" yg ngerti script coding gtu deh, hebat mba.
BalasHapusaku mah ga ngrti :D
apalagi saya mbak, kenapa mbak bisa menjadi bingung gitu sama mereka yang bisa coding, soalnya saya mah justru salut sama mereka-mereka yang master coding seperti itu, bingung sih gak, tetapi jadi penasaran kenap ya mereka bisa, saya tidak.
HapusBoleh donk bagi HTML menu di atas yg bisa buka sendiri tuh?
BalasHapussudah dibagi kok sob, cari saya di label menu navigasi.
Hapusaduh ko cumaan bawak kertas sama bolpen kok jadi masalah ya...
BalasHapusmenarik mbak,nambah penghetahuan lagi nih,,ntar dicoba ya mbak,mudah-mudahan bisa :)
BalasHapuskalau berkunjung ke blog ini pasti saya bingung mau komentar apa, soalnya ilmu coding tentang blog templatenya luar biasa di sini, sedangkan saya tidak tahu apa-apa. tp ngomong ngomong terima kasih banyak dah berbagi tentang ilmu coding blognya
BalasHapus