Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Tuesday, July 23, 2013

cara membuat tool parse kode html diblog

Tool parse kode html atau aplikasi konversi kode html adalah suatu sistem konversi atau penggantian kode html tertentu yang tidak dapat dipublish oleh aplikasi tag tag html pada halaman blog atau situs web. Kegunaan konveksi kode html ini sering dipergunakan kebanyakan untuk berkomentar dengan memuat tag tag html yang dalam devaultnya tag html tersebut tidak dapat dipublish pada kotak komentar halaman blog. Pada halaman blog yang membidangi tutorial hal ini sangat perlu dimiliki, dengan alasan apabila seorang komentator mau memuat suatu code tag html pada komentar untuk mengkomentari tutorial yang diposting maka sang komentator akan memerlukan suatu aplikasi untuk mengkonversi code tag html tersebut untuk dapat dipublish pada form komentar. Ada juga yang mempergunakan aplikasi konversi tag html ini untuk berbagai keperluan untuk mengganti semua kode tag yang memang pada dasarnya kode tag html tersebut tidak diterima oleh beberapa aplikasi halaman blog.

Pada tutorial kali ini saya akan membantu anda untuk mengantisipasi hal tersebut. Aplikasi ini saya buat menggunakan software Macromadia Dreamweaver 8 dan memiliki script yang ringan serta Valid HTML 5 dan CSS 3 jadi sangat cocok untuk template yang berbasih HTML 5, Script ini juga SEO Friendly dengan menganut pengcodean script yang mempunyai standart SEO. Aplikasi Konveksi HTML ini saya berinama " Black Parse HTML ". Buat para teman teman bloger menginstalasi script ini tergolong mudah pada halaman blog kesayangan anda.


Kode standart yang dapat dikonversi

  1. Code [ & ] menjadi [ & ]
  2. Code [ < ] menjadi [ &lt; ]
  3. Code [ > ] menjadi [ &gt; ]
  4. Code [ " ] menjadi [ &quot; ]
  5. Code [ ± ] menjadi [ &plusmn; ]
  6. Code [ © ] menjadi [ &copy; ]
  7. Code [ ® ] menjadi [ &reg; ]

Untuk melihat DEMO silahkan kunjungi link halaman dibawah ini :
http://rivai-silaban.blogspot.com/p/k-onversi-kode-html-adalah-suatu-sistem.html


Install Program CSS


  • Login ke dashboard anda
  • Masuk ke "TEMPLATE" lalu klik " Edit HTML "
  • Cari code ]]></b:skin> 
  • Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi

.boxarea_BD { background-color:#F2F2F2; border: solid #ccc 1px; border-radius:10px; padding:10px;box-shadow: 1px 1px 2px #ccc;}
.boxarea_BD:hover { background-color:#FFFFFF; border: solid #ccc 1px; border-radius:10px; padding:10px;box-shadow: 1px 1px 2px #ccc;}
.BD_tombol {color:#FFFFFF;font-weight:bold;text-decoration:none;padding:6px 15px;border:1px solid #c4c4c4;cursor: pointer;border-radius: 4px;
background: #fbfbfb;background-color: #000000;}
.BD_tombol:hover{color:#FFFFFF;font-weight:bold;text-decoration:none;background-color: #313333;}


Install Program Tag HTML


Untuk menempatkan script dan kode tag ini ada baiknya anda tempatkan pada satu halaman blog anda, atau bisa saja pada widget, tergantung selera anda.


Tutorial pemasangan pada halaman blog


  1. Setelah anda login ke dasbor blog anda silahkan pilih " LAMAN "
  2. Kemudian klik " LAMAN BARU "
  3. Pilih " LAMAN KOSONG "
  4. Setelah berada pada halaman kosong pilih " HTML " bukan " COMPOSE "
  5. Copy script dibawah lalu pastekan pada halaman kosong " HTML "
  6. Kemudian buat judul halaman dan simpan halaman anda.

Tutorial pemasangan pada widget blog


  • Anda masih berada dihalaman dasbor lalu anda menuju "TATA LETAK "
  • Silahkan klik "Add Gadget "( Tambahkan gadget )
  • Pilih " HTML / JavaScript "
  • Copy Code script/html dibawah ini, paste pada gadget anda.
  • Untuk memaksimalkan ukuran sesuai dengan halaman anda silahkan edit code [ cols="50" rows="15" ] sesuai dengan ukuran widget pada halaman anda.

<textarea cols="50" rows="15" wrap="virtual" class="boxarea_BD" id="bdkode" placeholder="1. Ketikkan kode html anda disini, 2. Kemudian klik Konversi , 3. Untuk membersihkan klik &quot;Bersihkan&quot; 4. Jenis Kode : &lt; &quot; &amp; &quot; &gt; &amp; &plusmn; &reg; &#169; " spellcheck="false"></textarea>
<br /><span>
<button class="BD_tombol" id="bdclear" onClick="convert();this.disabled = true;" title='Konversi'>KONVERSIKAN</button>
<button class="BD_tombol" onClick="cdClear();" title='Bersihkan'>BERSIHKAN</button>
</span><script type="text/javascript">
function cdClear() {
var wtarea = document.getElementById('bdkode');
wtarea.value = '';
wtarea.focus();
document.getElementById('bdclear').disabled = false;
}function convert(){var ele1 = document.getElementById("bdkode");var replaced;replaced = ele1.value;replaced = replaced.replace(/&/ig, "&amp;");replaced = replaced.replace(/</ig, "&lt;");replaced = replaced.replace(/>/ig, "&gt;");replaced = replaced.replace(/"/ig, "&quot;");replaced = replaced.replace(/&#177;/ig, "&plusmn;");replaced = replaced.replace(/&#169;/ig, "&copy;");replaced = replaced.replace(/&#174;/ig, "&reg;");replaced = replaced.replace(/ya'll/ig, "ya'll");ele1.value = replaced;}
</script>
<div style="clear: both;">

Pengoperasian Aplikasi
  • Ketikkan atau pastekan kode html anda pada form textarea
  • Kemudian Klik " KONVERSIKAN "
  • Copy code anda yang sudah Di Konversi.
  • Bila anda merasa belum sempurna silahkan ulagi dan klik " BERSIHKAN " untuk membersihkan textarea bekas kode yang telah dibuat.


Kesimpulan

Aplikasi konversi kode html ini dapat anda pergunakan untuk berbagai keperluan dalam hal menangani konversi kode html. Script yang dimiliki aplikasi ini ringan dan SEO friendly serta Valid HTML 5 dan CSS 3.

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Rivai Silaban Update pada : 12:28 PM

6 comments :

  1. kang tombol buttonnya kok jelek jadinya ga sama ama yg demonya, gimana cara ganti tombol buttonya yg kaya punya akang

    ReplyDelete
    Replies
    1. coba akang teliti dibagian kode ' .BD_tombol ' sama ngak pada kode html [ class="BD_tombol" ]

      Class CSSnya harus sama dengan Class HTMLnya.

      coba diperhatikan penempatan CSSnya apa memang sudah seperti pada tutorial..

      Delete
    2. uda bisa kang tapi knapa buttonya kok numpuk ke bawah ga mendatar? jadi ga rapi dilihatnya

      Delete
    3. coba diperhatikan lebar widgetnya , begitu juga lebar buttonnya , dan besar huruf buttonnya..

      Delete
  2. kok gak jadi gan? apa ada yang salah?

    ReplyDelete
  3. gan tombolnya kok gak berfungsi ya?

    ReplyDelete

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog