Cara Menampilkan dan Memasang Kode HTML di Postingan

Cara Menampilkan dan Memasang Kode HTML di Postingan - Kode html ini sangat mengasikkan untuk ditelusuri. Tapi juga memusingkan untuk dipikirkan, haha. Saya tidak begitu ahli, hanya mengerti sedikit saja. Kali ini saya akan share tentang cara menampilkan kode html di postingan. Semua platform blog -yang saya ketahui- memiliki dua mode dalam area penulisan sebuah post. Mode "compose" untuk tulisan biasa (alfabetis) dan "html" untuk mode hyper text markup language (html). Blogspot maupun wordpress, sama saja.

Tidak sembarangan menampilkan kode html di dalam postingan, ada tips dan triknya agar html itu keluar di dalam postingan. Kode tersebut jika serta merta dipasang dalam postingan hanya akan muncul seperti di bawah ini:

<a href="http://tutorialbagus.com/2013/10/cara-menampilkan-kode-html-di-postingan.html" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdSqnEp3nDU7GOhr0Ve_jM9w_k7DWTp7povA7ln_k3-x2Kub5q0Ws-W01naxuVj04Few18MOVnM_4Hsqxo6hw3KW13JSyczvH2163mvMk2zTMh8r7pV3fv_XdRs1y_sdAMSa3FWI7Ng-nO/s1600/icon_tools.png" /></a>

Nah, sekarang bagaimana caranya agar bisa muncul di dalam postingan dengan kode yang utuh? jawabannya kita harus terlebih dulu parse kode html yang akan dicantumkan dalam postingan tersebut.

Cara Parse HTML
Dalam bahasa inggris, Parse sendiri mempunyai makna:

1. analyze syntactically by assigning a constituent structure to (a sentence) source: wordnet30
2. To resolve into its elements, as a sentence, pointing out the several parts of speech, and their relation to each other by government or agreement; to analyze and describe grammatically source: webster1913

Caranya gampang, tinggal copy kode html tersebut (yang akan dicantumkan dalam postingan) lalu paste ke dalam kotak pada blogcrowds, lihat gambar:

 

Copy html ke dalam kotak tersebut, lalu klik PARSE, hasilnya seperti di bawah ini :

Setelah proses PARSE kita tinggal Copy dan pasang ke dalam Postingan anda.

CARA MEMASANG KODE PARSE PADA POSTINGAN :

Cukup mudah menampilkan kode HTML Dalam postingan Blog. yaitu dengan cara membuat teks area atau mem Parse kode HTML Yang anda ingin posting.

Cara Pertama Dengan Cara Membuat teks Area :
Untuk Membuat teks area silakan copy kode berikut ini

<p align="center"><textarea name="code" rows="6" cols="20"> Tulis Kode html disini </textarea></p> 

Cara meletakkannya seperti gambar dibawah :

Contoh Hasil Dari kode diatas 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> //<!-- $(document).ready(function() {$(".gplusbox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-330"}, "medium");}, 500);}); //--> </script> <style type="text/css"> .gplusbox{ background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLmXQhql9zV5TF0gFqLRkmBTVrj4-9DPvZ80Aa9VGGAT7GwIjFCELM73JtMgRgmH63pVP3vXf5Cth2rQmE6yENPRjaWbRZdguhRlK6NgFwHeDl8XY5cFw-8T5G1vHTDMwg5ct95ZMNsdU/s1600/google+plus+gemar+html.png") no-repeat scroll left center transparent !important; display: block; float: right; height: 330px; padding: 0 0px 0 46px; width: 325px; z-index: 99999; position:fixed; right:-330px; top:20%; } .gplusbox div{ padding: 16px; background: white; border: 1px solid #ff4747; border-right: 0; } </style> <div class="gplusbox"> <div> <div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/108329354747256877665" data-source="blogger:blog:followers" data-width="320"> </div> <script> <!-- document.write(unescape("x3Cx70x20x73x74x79x6Cx65x3Dx22x64x69x73x70x6Cx61x79x3Ax6Ex6Fx6Ex65x3Bx22x3Ex57x69x64x67x65x74x20x47x6Fx6Fx67x6Cx65x2Bx20x46x6Fx6Cx6Cx6Fx77x65x72x73x20x62x79x20x3Cx61x20x68x72x65x66x3Dx22x68x74x74x70x3Ax2Fx2Fx77x77x77x2Ex74x75x74x6Fx72x69x61x6Cx62x6Cx6Fx67x73x70x6Fx74x2Ex63x6Fx6Dx2Fx22x3Ex54x75x74x6Fx72x69x61x6Cx42x6Cx6Fx67x73x70x6Fx74x2Ex63x6Fx6Dx3Cx2Fx61x3Ex3Cx2Fx70x3E")); //--> </script> <script type="text/javascript"> (function() { window.___gcfg = {'lang': 'en'}; var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> </div> </div> ​

Keterangan
rows="6" : Adalah tinggi tinggi teks area tersebut .bisa anda ubah dengan angka yang lebih tinggi jika anda ingin menambah tinggi teks area tersebut.

Cols="20" :Menunjukan lebar teks area tadi , dan bisa juga anda rubah ke angka yang lebih tinggi .

<p align="center"> : Menunjukan bahwa teks area berada di tengah . Jika anda ingin ingin teks area tersebut berada di sebelah kiri silakan rubah kata center menjadi left Dan jika anda ingin merubahnya menjadi di sebelah kanan tinggal rubah saja kode tadi menjadi right. 

Selamat Mencoba Cara Menampilkan dan Memasang Kode HTML di Postingan.

Tweet

Subscribe to receive free email updates: