Mengubah Elemen Kode Menjadi Perintah Teks Dengan JavaScript.
Konversi Kode Agar Menjadi Perintah Teks - Paling sering terjadi dalam menuliskan kode tertentu adalah pada saat berkomentar, karena saat menyisipkan beberapa kode dalam kolom komentar, maka sudah pasti komentar Anda akan ditolak karena penggunaan tag HTML yang tidak diperbolehkan dalam bentuk perkodean dengan alert peringatan seperti ini:

Comment tab image


Perlu di Coba - Memberi Bayangan Dengan Efek Curva Pada Box



Apa penyebabnya.?
Perintah teks yang Anda masukkan dalam kolom komentar mengandung tag kode yang tidak diperbolehkan masuk saat menyisipkan teks dalam komentar. Itu sebabnya banyak dari beberapa blog yang menyediakan tabel "Konversi Kode" pada aturan komentarnya, jika mereka/pengunjung ingin menuliskan salinan teks yang mengandung kode. Caranya cukup mengubah simbol kode tersebut dengan cara meng-konversi kode, agar hasilnya akan menjadi perintah teks, misalnya seperti ini:


<div style="text-align:center;color:darkred;">
...
Teks Anda Disini
...
</div>

- simbol ( < ) harus kita tuliskan menjadi &lt;
- simbol ( > ) harus kita tuliskan menjadi &gt;
- simbol ( ' ) harus kita ubah menjadi &#039;
- simbol ( " ) harus kita ubah menjadi &quot;
- simbol ( & ) harus kita tuliskan menjadi &amp;


Membuat tabel konversi kode seperti ini hanya untuk mempermudah pekerjaan Anda saat akan menyisipkan simbol kode agar tampil sebagai perintah teks. Sehingga Anda tidak lagi kerepotan jika harus mengubah simbol tersebut satu persatu.
Cukup tulis/pastekan kode yang akan Anda konversi untuk mendapatkan atau mengubah simbol kode tersebut agar menjadi perintah teks pada TABEL KONVERSI KODE dibawah ini:




COBA ALAT




Buat sahabat setia SAHABAT BLOGGER 77 yang ingin membuat tabel kolom konversi seperti diatas, pertemuan kali ini saya akan bagikan 2 versi terspesial buat sahabat semua. Namun sebelumnya baca juga Daftar Generator Penulisan Simbol HTML Terlengkap yang mungkin bermanfaat saat Anda akan membuat sebuah simbol dalam tulisan.


1. VERSI JAVASCRIPT
<style type="text/css">
#convert {
  border:1px solid #333;
  width:98%;
  height:200px;
  margin:5px auto 10px;
  display:block;}

.button-select {
  margin:-1.7em auto;
  text-align:center;
  background:#666;
  width:98.8%;
  border-radius:3px;}
</style>
<textarea id="convert" placeholder="Letakkan kode Anda disini, lalu tekan TOMBOL &#039;Konversi&#039;"></textarea>
<div class="button-select">
<button onclick="cdConvert();"><span style='color:blue;font-weight:bold'>Konversi</span></button>   <button onclick="cdClear();"><span style='color:red;font-weight:bold'>Delete</span></button>
</div>
<script type="text/javascript">
function cdClear() {
    var wtarea = document.getElementById('convert');
    wtarea.value = '';}

function cdConvert() {
    var ctarea = document.getElementById('convert'),
        cv = ctarea.value;
    cv = cv.replace(/&/g, "&amp;");
    cv = cv.replace(/'/g, "&#039;");
    cv = cv.replace(/"/g, "&quot;");
    cv = cv.replace(/</g, "&lt;");
    cv = cv.replace(/>/g, "&gt;");
    ctarea.value = cv;
    ctarea.focus();
    ctarea.select();}
</script>



2. VERSI JQUERY
Untuk tabel konversi pada versi ini, akan bekerja jika template Anda sudah dilengkapi dengan penggunaan script-jquery yang saya beri warna MERAH.

<style type="text/css">
#convert {color:blue;font-weight:bold}
#clear {color:red;font-weight:bold}
#codes {
  border:1px solid #666;
  width:98%;
  height:200px;
  margin:5px auto 10px;
  display:block;
  background:#333;
  color:#ccc;
  border-radius:5px;}

.button-group {
  margin:-16.6em auto;
  text-align:center;
  float:right;
  padding-right:5px;}
</style>
<textarea id="codes" placeholder="Letakkan kode Anda disini, lalu tekan TOMBOL &#039;Konversi&#039;"></textarea>
<div class="button-group">
<button id="convert">Konversi</button>    <button id="clear">Delete</button>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    $('button#convert').click(function() {
        $('textarea#codes').val(
        $('textarea#codes').val()
            .replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;")
            .replace(/"/g, "&quot;")
            .replace(/'/g, "&#39;")
        ).focus().select();
        return false;
    });
    $('button#clear').click(function() {
        $('textarea#codes').val('').focus().select();
        return false;
    });
});
</script>

Hasilnya:



DEMO SHOW



Demikian yang dapat saya bagikan, jika kiranya ada tabel konversi yang tidak bekerja, mungkin lagi libur.!! hehe.. Akhir kata saya ucapkan Terimakasih and by...bay..!!

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Konversi Kode Agar Menjadi Perintah Teks
Ditulis oleh= Devy Indriyani
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 =

15 komentar

  1. pertaamax..Pasti. 8-)

    sip.. yg pastinya memudahkan teman2 blog,, yg kbetulan kalau lagi jalan2 ke tempat kt liat tabel konversi.. bisa langsung dikendarai..

    BalasHapus
    Balasan
    1. pertamax mahal mas, saat ini pakai bensin dulu dech,,hehe..!!

      betul mas, lebih untuk memudahkan,jika dibandingkan harus mengubahnya secara satu persatu

      Hapus
  2. wah...bisa dipasang di sidebar dong mbak, konversi kode jadi lebih mudah :-)

    BalasHapus
    Balasan
    1. bisa mas, tetapi kebayakan blog memasang konversi kode ini diatas kolom komentar dengan tampilan pop-up saat diklik

      Hapus
  3. wah saya malah jarang nih melakukan konversi kode soalnya belum begitu paham sama kode script hehehe ;)

    BalasHapus
    Balasan
    1. tetapi mbak kan jagonya ngeblog, saya sendiri aja masih kudu belajar banyak dari mbak,,hehe

      mbak eka selalu merendah

      Hapus
  4. aiiih lengkap dan mendetail pisan tutorial soal meng konversi kode menjadi teks nya teh geuningan ya...saya sering ketemu sama blog yang mempersilahkan make kode dalam berkomen, karena ngga Faham...tak abai kan selalu deh...

    gituh ceritanya teh.

    BalasHapus
  5. Mantap nih Mbak Devy,, sangat lengkap coding saya coba ya Mbak?
    Makasih atas share nya salam sukses :)

    BalasHapus
    Balasan
    1. terimakasih kembali kang dan salam sukses juga

      Hapus
  6. saya juga pernah mengalami kasus penolakan seperti ini, ternyata ada beberapa kode yang perlu dikonversi ya..

    BalasHapus
  7. mantap, informasi yang sangat berkualitas, oiya numpang artikel ini untuk menghasilkan uang dari internet
    http://khaderaindonesia.blogspot.com/2014/09/cara-menghasilkan-uang-dari-internet.html

    BalasHapus
  8. salam kenal gan
    artikel yang sangat menarik dan bermanfaat gan
    lanjutkan terus gan
    http://BestOdds123.com
    terima kasih

    BalasHapus
  9. Mantap gan.. Lumayan buat benerin seo

    Monggo mampir jg gan :http://infobisnisindonesia88.blogspot.com

    BalasHapus
  10. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  11. Mantap kali bos jangan luoa kunjungin ke blog aku ya :http://prediktogels.blogspot.com/

    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