Membuat Tools Parse Kode HTML Responsive Pada Halaman Statis Blog

Parse HTML adalah suatu tindakan yang dilakukan untuk memposting kode HTML ke dalam Postingan. Parse HTML Juga terkadang digunakan untuk mem parse kode iklan, yang bertujuan untuk mengurangi error. pada postingan kali ini saya akan berbagi Cara Membuat Tools Parse Kode HTML Keren Responsive Di Blog. Saya mencampurkan beberapa kode yang saya temukan saat searching di google. dan hasilnya menjadi Tools Parse HTML yang menurut saya keren, menarik, dan Responsive. Memang ada beberapa hal yang harus di perbaiki, namun cukup lah untuk sementara ini. Jika ada Kesalahan mohon maaf pasti akan saya perbaiki segera. Mau Lihat DEMO-nya? silahkan klik DEMO-nya dibawah ini :

Demo

Bagaimana cara membuatnya? kita akan membuat Tools parse html ini di Halaman Statis (laman). Simak :

1. Pertama Buka Blogger anda > Template > Cari /]]></b:skin> menggunakan CTRL+F


2. Letakan Kode ini tepat diatas /]]></b:skin>



.button{float:left;list-style:none;text-align:center;width: 100%;margin:5px 0;padding:0;font-size:14px;clear:both;}
.button ul {margin:0;padding:0}
.button li{display:inline;margin:0;padding:0}
.demo {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #E55E48; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s;letter-spacing:1px; }
.download {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #5FAAE3; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s; letter-spacing:1px;}
.demo:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }
.download:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }
.parse-html{text-align:center;background:linear-gradient(to bottom,#fefefe 0%,#d1d1d1 100%);border:1px solid #A8A8A8;border-radius:5px;margin:20px auto;width:97%;box-shadow:1px 30px 30px -26px #818181}
.parse-html-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

3. Save Template


4. Buat Laman di Blogger / didalam postingan juga bisa.


5. Letakan Kode ini didalam Postingan / Laman statis tadi



<div dir="ltr" style="text-align: left;" trbidi="on">
<br /></div>
<div class="parse-html">
<div class="parse-html-responsive">
<script type="text/javascript">
function convert(){var ele1 = document.getElementById("somewhere");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>
<br />
<table border="0" cellpadding="0" cellspacing="0" style="width: 100px;"><tbody>
<tr> <td valign="top" width="100"><font color="#03C"><center><h2>Masukan Kode HTML yang akan di Parse</h2></center></font><textarea align="center" cols="71" id="somewhere" rows="30" style="background: none repeat scroll 0% 0% rgb(248, 248, 248); border: 2px solid rgb(204, 204, 204);"></textarea><center><input class="download" onclick="convert();" type="button" value="Parse Script" ></td></center> </tr>
</tbody></table>
<span class="Apple-style-span" style="font-family: 'trebuchet ms'; font-size: x-small;"><span style="line-height: 20px;">&nbsp;© www.kangbar.blogspot.com |<a href="http://kangbar.blogspot.com/2015/03/membuat-tools-parse-kode-html-pada-halaman-statis-blog.html" target="_blank">Get This Widget</a> |</span></span><br />
<span class="Apple-style-span" style="font-family: 'trebuchet ms'; font-size: x-small;"><span style="line-height: 20px;"><br /></span></span></div>
</div>



6. Publikasikan. dan lihat hasilnya akan seperti :

Parse Tools HTML