Cara Membuat Tools Parse HTML Pada Blogger

Usuluddin, S.Kom    Selasa, Januari 28, 2020    TUTORIAL   

Cara Membuat Tools Parse HTML Pada Blogger

GoSEO.id - Karena ada beberapa teman seperjuangan yang me-request tutorial untuk memparse html seperti yang tersedia pada blog ini. Maka pada kesempatan kali GoSEO.id akan membagikan tutorial "Cara Membuat Tools Parse HTML Pada Blogger" yang berfungsi untuk memparse markup HTML yang dapat digunakan untuk pengembangan - pengembangan template pada blogger.

Sebelumnya GoSEO.id pernah membagikan tutorial serupa yaitu "Cara Membuat Tools CSS Minifier Pada Blogger".

Tanpa menunggu berlama-lama, mari ikuti tutorial Cara Membuat Tools CSS Minifier Pada Blogger.

Cara Membuat Tools Parse HTML Pada Blogger

Untuk membuat tools parse html sangat mudah, ikuti tahap berikut ini :

1. Login ke akun blogger.com milikmu.
2. Buat postingan pada halaman statis.
3. Lalu copy kode yang saya siapkan dibawah ini dan pastekan pada tab HTML.
   

   <style scoped="" type="text/css">
   #parser2{position:relative;overflow:hidden}
   #parser2 .btn,#parser2 .btn:active{background-image:none}
   #parser2 .btn{font-weight:400;padding:6px 12px;margin-bottom:5px;font-size:14px;line-height:1.42857143;text-align:center;white-space:nowrap;-ms-touch-action:manipulation;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:0;border-radius:4px;cursor:pointer;transition:all .3s}
   #parser2 .btn:active:focus,#parser2 .btn:focus{outline:0}
   #parser2 .btn:focus,#parser2 .btn:hover{color:#333;text-decoration:none;outline:0}
   #parser2 .btn:active{outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}
   #parser2 .btn-primary{color:#fff;background:#3e51b5}
   #parser2 .btn-primary:focus,.button-group button:disabled{color:#fff;background:#286090}
   #parser2 .btn-primary:active,#parser2 .btn-primary:hover{color:#fff;opacity:.9}
   #parser2 .btn-danger{color:#fff;background:#f39c12}
   #parser2 .btn-danger:focus{color:#fff;opacity:.9}
   #parser2 .btn-danger:active,#parser2 .btn-danger:hover{color:#fff;opacity:.9}
   #parser2 .btn-info{color:#fff;background:#5bc0de}
   #parser2 .btn-info:focus{color:#fff;background:#31b0d5}
   #parser2 .btn-info:active,#parser2 .btn-info:hover{color:#fff;background:#31b0d5}
   #parser2 .btn-xs{font-size:12px;line-height:1.5;border-radius:3px;padding:1px 5px}
   #parser2 textarea#somewhere{background:#fef1c8;border:0;height:300px;width:100%;margin:0 0 10px;box-sizing:border-box;font-family:Consolas,Monaco,'Andale Mono',monospace;color:#111;border-radius:10px;box-shadow:inset 0 -5px 5px rgba(0,0,0,0.05);padding:20px}
   #parser2 textarea#somewhere:active,#parser2 textarea#somewhere:focus{outline:0}
   #parser2 .btn-sm{display:inline-block;font-size:13px;line-height:1.5;border-radius:5px;padding:12px;margin:0 auto 10px auto;width:30%;box-shadow:0 3px 1.2rem -0.8rem rgba(0,0,0,0.8)}
   #parser2 .btn-xs{font-size:13px;line-height:1.5;border-radius:5px;padding:12px;margin:auto;width:30%;box-shadow:0 3px 1.2rem -0.8rem rgba(0,0,0,0.8)}
   .collapse{display:none}
   .alert-success{color:#222;background:#fff}
   .alert{border:0;padding:5px 15px;border-radius:10px;position:absolute;top:20px;right:20px;min-width:210px;color:#0984e3;font-size:13px;box-shadow:0 2px 4px 0 rgba(0,0,0,0.16)}
   button.close{padding:0;cursor:pointer;background:none;border:0;-webkit-appearance:none}
   .close{float:right;font-size:1.3rem;color:#0984e3;margin:1px 0 0 0}
   button.close:focus{outline:0}
   .close:hover{opacity:1!important}
   #btnInfo h4{margin:0;font-size:13px;line-height:2}
   #button-link{display:none}
   .clear{clear:both;display:block;margin-bottom:2px}
   .alert br{display:none}
   </style>
   <div id="parser2">
      <textarea id="somewhere" placeholder='Write/paste the code here then click the Parse Code button'></textarea>
      <div class='alert alert-success margin-bottom-20 collapse' id='btnInfo' role='alert'>
         <button class='close close-copy' onclick='document.getElementById(&quot;btnInfo&quot;).style.display = &quot;none&quot;;cdClear();' type='button'><span aria-hidden='true'>&#215;</span></button>
         <h4>Code copied to clipboard</h4>
      </div>
      <br/> <button onclick="convert();" class='btn btn-primary btn-sm btn-parse' type="button">Parse Code</button>
      <div class="clear"></div>
      <button class='btn button-link btn-xs btn-info' id='button-link' data-clipboard-action='copy' data-clipboard-target='#somewhere' type='submit'>Copy code to clipboard</button> <button class='btn btn-danger btn-xs' id='btn_clear' onclick='cdClear();'>Clean</button> 
   </div>
   <script type="text/javascript">//<![CDATA[
   function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://cdn.jsdelivr.net/gh/Arlina-Design/redvision@master/htmlparse.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
   //]]></script>

4. Setelah itu klik Simpan dan Selesai.

Untuk tampilan silahkan kamu sesuaikan pada CSS diatas sesuai dengan keinginan.

Semoga tutorial Cara Membuat Tools Parse HTML Pada Blogger ini bermanfaat. Jika ada yang tidak kamu mengerti silahkan tinggalkan komentar. Terima kasih.

---

Apakah kamu sudah membaca :
# Pentingnya Penggunaan Email Profesional Dalam Bisnis
# Cara Daftar Google News Untuk Blogger
# Memasang Widget Recent Post Blogger
# Embed Video Blogger Agar Responsive
# Meningkatkan Kecepatan Blog Dengan Cloudflare
# Perbedaan Visitor dan Unique Visitor Google Analytics
# Menghilangkan URL ?m=1 Blogger
# Membuat Press Release yang Baik dan Disukai Media
# Membuat URL Sumber Otomatis Blogger
# Membuat URL Shortener Dengan Javascript
# Cara Menghapus Spam Backlinks
# Mempercepat Loading Iklan Adsense Terbaru
# Media Sosial Sebagai Peningkat Traffic Bisnis
# Tutorial SEO Langkah Demi Langkah Untuk Pemula
# Cara Membuat Strategi Konten
# Rekomendasi SEO untuk YouTube
# Bagaimana Menghindari Kesalahan Informasi SEO
# Ebook Blogger Profesional, Adsense, FB Ads Serta SEO Terlengkap
# 10 Cara Menghasilkan Dari Blog Tanpa Google Adsense