Cara Mudah Membuat Encoder HTML atau Parse HTML di Blog Sendiri

Assalamualaikum sobat blogger, seringkali dalam kegiatan ngeblog kita membutuhkan yang namanya html encoder atau memparse html. Bagi yang sudah memiliki akun google adsense dan sudah terbiasa memasang script iklan adsense, pasti sudah tidak asing lagi dengan namanya parse html. Bagi yang belum memiliki akun adsense atau yang tidak mengetahui arti parse html, bisa dijelaskan parse html itu intinya mengubah kode. mengubah kode-kode spesifik/tertentu menjadi kode entitas atau kode unik. Dan kode-kode yang dirubah yaitu :
< akan diubah menjadi &lt;
" akan diubah menjadi &quot;
& akan diubah menjadi &amp;
' akan diubah menjadi &#039;
> akan diubah menjadi &gt;

Sebagian umum para blogger saya lihat, untuk memparse html banyak menggunakan tool dari blogcrowds, htmlparse dan lain-lain. Mungkin sedikit yang tahu, bahwa kita juga sebenarnya bisa membuat tools parse html sendiri di dalam blog kita, jadi tidak usah mengakses website-website tadi apabila kita ingin memparse html.
Baca Juga : Cara Blogger Pemula Menseting Blogger dengan Domain TLD
Ada 2 cara untuk menampilkan tool html parser ini di blog kita, bisa berbentuk page ataupun berbentuk postingan. Yang berbentuk page bisa sobat temukan di blog masdinko ini, di bagian atas dengan nama Adsense Parser. Untuk postingan bisa juga yang terpenting kita memiliki kode html dan script CSS nya.

1. Menampilkan tool html parser di bagian Page blogger

Buat page baru di blogger, caranya klik Page >> New Page, kemudian ubah mode Postnya menjadi HTML dengan cara diklik (sebelah kiri atas layar). Setelah menjadi mode HTML kemudian copy kan kode di bawah ini :

<div dir="ltr" style="text-align: left;" trbidi="on">
<script type="text/javascript">
//<![CDATA[
function html2entities(){
var re=/[(<>"'&]/g
for (i=0; i<arguments.length; i++)
arguments[i].value=arguments[i].value.replace(re, function(m){return replacechar(m)})
}
function replacechar(match){
if (match=="<")
return "&lt;"
else if (match==">")
return "&gt;"
else if (match=="\"")
return "&quot;"
else if (match=="'")
return "&#039;"
else if (match=="&")
return "&amp;"
}
//]]>
</script>
<br />
<div id="wrap">
<div id="wrap2">
<div class="widget Blog" id="Blog1">
<div class="blog-posts hfeed">
<form class="ht-newform">
<textarea class="ht-encoder" name="data1" placeholder="Add Codes Here and Click Encode to Parse it"></textarea>&nbsp;
<br />
<div style="text-align: left;">
</div>
<div style="text-align: left;">
&nbsp;<input class="ht2" onclick="html2entities(this.form.data1)" onmouseout="this.className='ht2'" onmouseover="this.className='ht2 ht2hov'" type="button" value="Encode" /> <input class="ht2" onmouseout="this.className='ht2'" onmouseover="this.className='ht2 ht2hov'" type="reset" value="Clear All" /> </div>
</form>
</div>
</div>
</div>
</div>
</div>

Kemudian beri judul atau nama Pagenya. Kemudian klik Publish.

Tahap selanjutnya yaitu menyalin CSS di di dalam template.

Masuk ke template dan EDIT HTML.
Cari kode ]]></b:skin> dengan Ctrl+f, setelah ditemukan kodenya, kemudian Paste kan kode di bawah ini, SEBELUM kode ]]></b:skin>, atau DI ATAS kode ]]></b:skin>
.ht-newform { width: 400px; margin-left: 100px; } .ht-encoder { width: 400px !important; height: 180px !important; margin-left: 10%; margin: 5px auto; padding: 2px 2px 2px 6px; font-family:Arial, sans-serif !important; font-size: 18px; color:#808080; border:1px solid #ccc; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px; box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px; -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.2), 0 0 0 6px #e0e0e0; -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.2), 0 0 0 6px #e0e0e0; box-shadow: inset 0 1px 2px rgba(0,0,0,0.2), 0 0 0 6px #e0e0e0; -webkit-transition: all 0.4s linear; -moz-transition: all 0.4s linear; transition: all 0.4s linear; } .ht-encoder:focus { width: 100%; color: #666; border: 1px solid #808080; -webkit-box-shadow: inset 0 1px 2px #808080, 0 0 0 6px #808080; -moz-box-shadow: inset 0 1px 2px #808080, 0 0 0 6px #808080; box-shadow: inset 0 1px 2px #808080, 0 0 0 6px #808080; -webkit-transition: all 0.4s linear; -moz-transition: all 0.4s linear; transition: all 0.4s linear; } .ht-encoder:hover{ border: 1px solid #c0c0c0; -webkit-box-shadow: inset 0 1px 2px #c0c0c0, 0 0 0 6px #c0c0c0; -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1), 0 0 0 6px #f0f0f0; box-shadow: inset 0 1px 2px #c0c0c0, 0 0 0 6px #c0c0c0; -webkit-transition: all 0.4s linear; -moz-transition: all 0.4s linear; transition: all 0.4s linear; } .ht3 { color:#000; font: normal 12px sans-serif, verdana; border:1px dotted #67A7E3; background:#C9E4FF; } .ht3:hover { color:#289728; font: normal 12px sans-serif, verdana; border-left:5px solid #289728; background:#fff; } .ht4 { color:#3C3C3C; font: normal 12px sans-serif, arial; border:1px dotted #67A7E3; background:#C9E4FF; margin-bottom:4px; } .ht4:hover { color:#289728; border:1px solid #289728; background:#fff; } .ht2 {margin-bottom: 2px; float: right;} .ht2 { padding: 12px 12px; background: #f4f4f4; background: -moz-linear-gradient(top, #f4f4f4 0%, #f1f1f1 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(100%,#f1f1f1)); background: -webkit-linear-gradient(top, #f4f4f4 0%,#f1f1f1 100%); background: -o-linear-gradient(top, #f4f4f4 0%,#f1f1f1 100%); background: -ms-linear-gradient(top, #f4f4f4 0%,#f1f1f1 100%); background: linear-gradient(top, #f4f4f4 0%,#f1f1f1 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#f1f1f1',GradientType=0 ); -moz-box-shadow: 0 1px 1px #ddd inset, 0 2px 0 #fff; -webkit-box-shadow: 0 1px 1px #ddd inset, 0 2px 0 #fff; box-shadow: 0 1px 1px #ddd inset, 0 2px 0 #fff; color: #808080; text-decoration: none; cursor: pointer; display: inline-block; text-align: center; font-weight: bold; font-family: Arial, Helvetica, sans-serif; text-transform:uppercase; text-shadow: 0px 1px 1px rgba(255,255,255,1); line-height: 1; font-size:12px; border: solid 1px #bbb; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; } .ht2:hover { color: #333; border-color: #999; -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2); -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); } .ht2:active { outline: 0; border-color: #aaa; color: #FF0000; -moz-box-shadow: 0 4px 4px #bbb inset; -webkit-box-shadow: 0 4px 4px #bbb inset; box-shadow: 0 4px 4px #bbb inset; } .ht2 a:active { color: #FF0000; -moz-box-shadow: 0 4px 4px #bbb inset; -webkit-box-shadow: 0 4px 4px #bbb inset; box-shadow: 0 4px 4px #bbb inset; }


Coba hasilnya di preview dahulu, kalau tidak terdapat error, SAVE template/theme.

Sekarang coba gunakan untuk memparse kode adsense anda, kalau kode-kodenya berubah menandakan pekerjaan anda sudah BERHASIL.

Baca juga : TIPS SUKSES Blog Gado-gado Dapat Trafik Banyak

Untuk memasang menu PAGE ini didepan, di barisan menu, anda tinggal menambahkannya di
templat anda, dengan cara edit html kembali. Seperti tampilan di blog masdinko ini, Adsense Parser di tempatkan di deretan menu atas.

2. Menampilkan tool html parser di postingan.
Untuk cara ke-2 menampilkan html parser di dalam postingan, sama saja prinsipnya dengan cara membuat di dalam page, urutannya seperti ini :

Buat posting baru, ubah mode postingan menjadi HTML dan copy kodenya (kode yg pertama). Kemudian ganti mode nya ke Compose (Penulisan biasa). Isi dengan kalimat anda, dan ukuran kotak bisa anda ubah-ubah. Isikan dengan keyword-keyword yang berkaitan dengan html parser supaya ada pengunjung masuk ke blog anda. Beri judul postingnya dan kemudian Publish.

Untuk kode CSS nya sudah diterangkan di atas, cukup satu saja kita membuat kode CSS nya.

Nah begitulah caranya menambahkan HTML Encoder atau Parse HTML Tool ke dalam blog kita. Tujuannya supaya mempermudah apabila ingin memparse kode html adsense kita. Tentunya harapan lainnya banyak juga yang berkunjung ke blog dan memanfaatkan tool HTML Parser yang kita tambahkan di blog. Demikian artikel Cara Mudah membuat Encoder HTML atau Parse HTML di Blog sendiri, mudah-mudahan bermanfaat. Keep learning and sharing.

Post a Comment for "Cara Mudah Membuat Encoder HTML atau Parse HTML di Blog Sendiri"