8.3.15
37
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:
  1. Teks Tebal (bold)
  2. Teks Miring (italic)
  3. Garis Bawah (underline)
  4. Teks Rata Kiri (justify-left)
  5. Teks Tengah (justify-center)
  6. Teks Rata Kanan (justify-right)
  7. Menyisipkan Gambar (upload/add image)
  8. 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:

Text editor writte




BACA JUGA YUKK..!!
Cara Membuat Panel Slide Halaman Posting



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:

<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>


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 >>
= TERIMA KASIH =

37 komentar

  1. keren dan menarik ya mbak,
    mau dipasang tapi dipasang dimana? blog cuma satu

    BalasHapus
    Balasan
    1. maksudnya disimpan di laman Mba Lina..
      ituloh Mba..yg masih sodara dgn tulisan di navigasi headerr blog.. yg urlnya sj yg diambil... (sebelum disimpan distu..)

      inii sdh benar pa tdk ya..

      Hapus
    2. 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.

      Hapus
    3. buat blog lagi la mbak imerlina, tapi dipasang di blognya kan jadi cantik :D

      Hapus
  2. iyya ya.. berfungsi..
    pembacaannya.. 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..

    BalasHapus
    Balasan
    1. contohnya saya yang tidak paham mas :D

      Hapus
    2. akan 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.

      Hapus
    3. Vy.. diluar kontek judul

      knapa 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?

      Hapus
    4. iya gak apa-apa ma,

      kemarin 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.

      Hapus
    5. ada di tengah..hampir pas diatas penutup hed..
      selanjutnya bagaimana..

      Hapus
    6. diulang2.. script-jQuery ituh yg bagaimana..apa yg seperti googleapis ya?

      Hapus
    7. benar mas yang seperti itu, 1.10.2/jquery.min.js updatetan terbaru.

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

      Hapus
    8. yaya.. sama ituh..
      letaknya di atas skin pembuka.. tdk jauh dari meta2 tag..awal html Vy..!

      Hapus
    9. Coba pindahkan tepat diatas tag penutup </head>

      Hapus
    10. sudah.. hasilnya ttp sama.. yaa nda papalah..
      biyar saja begitu..

      Hapus
    11. 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:

      <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).

      Hapus
    12. ooiya..sdh tau penyebabnya..karena memang di bawah hed template ada atribut ituh.. jadi.. mau tidak mau.. mempengaruhi.. setiap unsur2 link di dalamnya..

      hoaamzz.. ngantuk..!

      Hapus
  3. brrti ini dipasang di halaman posting juga kn, agar bisa dibuatkan label untuk mempermudah mecari ..

    oya ... sy pernah baca di artikel tetangga, jika menulis artikel selain di halaman posting blog kadang diangga copy-paste juga ,,, gmn mnrt devy ... ?

    BalasHapus
    Balasan
    1. 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.
      ibarantnya sebagai kertas sele-sele kata orang, seperti saat ujian matematika yang diberikan kertas buram untuk mengerjakan soal.

      Hapus
    2. oh ,,, brrt gpp yah ,,,,
      tapi klo pemasangannya di halaman posting ,,,hmmmm blm kunjung berhasil juga ,,, :-?

      Hapus
  4. Info menarik bro sayangya saya gak begitu ngeh tentang script dan koding.

    BalasHapus
  5. thanks mbak tutorialnya..

    BalasHapus
  6. Terimakasih 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

    BalasHapus
    Balasan
    1. gak apa-apa mbak, Devy juga kagak paham kok, cuma tahu sedikit saja, hehe..!!

      Hapus
  7. Kalau aku lebih sering ngetik postingan di word. Baru di copy ke blog..

    BalasHapus
  8. kalo 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..

    BalasHapus
  9. yang saya salute tuh idenya devy memang sangar...
    bentuknya 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

    BalasHapus
    Balasan
    1. 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..!!

      oh iya, maksudnya mbah neh jadian apaan tuh..!!

      Hapus
  10. Wah keren ini mah mbak..mantab jadi ada sensasinya gitu

    BalasHapus
  11. Kunjungan perdana Gan.. kenalin ane Insan dari obrolbatu.com, kebetulan sekarang sedang login pake akun Google punya istri :p
    Cakep blognya Mba, post nya pun OK punya. Bener2 gak nyangka deh cantik2 pinter banget ngeblognya (h)

    BalasHapus
  12. suka bngung sama orang" yg ngerti script coding gtu deh, hebat mba.
    aku mah ga ngrti :D

    BalasHapus
    Balasan
    1. 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.

      Hapus
  13. Boleh donk bagi HTML menu di atas yg bisa buka sendiri tuh?

    BalasHapus
    Balasan
    1. sudah dibagi kok sob, cari saya di label menu navigasi.

      Hapus
  14. aduh ko cumaan bawak kertas sama bolpen kok jadi masalah ya...

    BalasHapus
  15. menarik mbak,nambah penghetahuan lagi nih,,ntar dicoba ya mbak,mudah-mudahan bisa :)

    BalasHapus
  16. kalau 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

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK