Cara Membuat Tools Parse HTML Pada Blogger

Cara Membuat Tools Parse HTML Pada Blogger
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

0 Comments

Posting Komentar