Cara Membuat HTML Parse di Blogger Menggunakan JavaScript

Cara Membuat Halaman HTML Parse Menggunakan JavaScript di Blogger
HTML Parse Tool for Blogger

Biar makin keren dan melengkapi isi blog, membuat tools html parse di blogger adalah salah satu langkah yang bisa kamu terapkan. Nantinya, tools html parse ini akan sangat berfungsi salah satunya buat kamu yang sering copot dan pasang iklan adsense. Karena, pada beberapa kondisi iklan adsense butuh diparse terlebih dahulu agar dapat dipasang diblog. Maka dari itu, aku bakalan bantu kalian buat bikin tools HTML Parse yang keren yang pasti cara ini mudah banget buat kalian ikuti. Let's check this out!

Apa itu HTML Parse?

HTML Parse adalah sebuah alat untuk mengkonversi struktur HTML menjadi sebuah karakter entitas yang bisa dibaca dalam kondisi tertentu. Ini diperlukan agar nantinya tidak terjadi error saat melakukan edit html dikarenakan HTML tidak mengijinkan beberapa karakter tertentu untuk langsung bisa ditampilkan pada sebuah halaman web.

Bagi seorang blogger, fungsi HTML Parse memang sangat berguna. Terbukti memang, ketika memasang widget iklan di blog, beberapa kondisi mengharuskan untuk diparse terlebih dahulu sebelum dapat dipasang. Jika tidak diparse, bukan tidak mungkin iklan adsense yang sudah dibuat tidak muncul. Sehingga, ini sangat merugikan jika terjadi. Untuk itu, pada kesempatan kali ini, saya ingin membagikan sebuah tutorial yang bisa kalian terapkan ke blog kalian masing-masing.

Cara Membuat HTML Parse di Blogger

1. Langkah pertama, buka dashboard blogger kalian.
2. Kemudian masuk menu Halaman > Buat Halaman Baru
3. Ganti editor dari mode Compose ke mode HTML (Lihat panah merah gambar dibawah ini)

Editor Blogger pada Mode HTML
HTML Mode pada Blogger Editor

4. Copy semua kode dibawah ini, dan paste ke editor mode HTML


HTML Parse adalah sebuah alat untuk mengubah dan mengurai kode HTML menjadi <i>karakter entitas </i>di HTML.<br />
<div class="obscure">
    <div class="popup animationClose">
      <a class="closeBtn" href="#">X</a>
      <h3>Copied to clipboard!</h3>
    </div></div>
<style>
textarea, .textarea-clone {
  font-family: -apple-system, BlinkMacSystemFont, "Poppins", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  box-sizing: border-box;
  border: 0;
  border-bottom: 1px solid #e3e3e3;
  margin: 0;
  padding: 12px;
  resize: none;
  font-size: 15px;
  line-height: 1.618;
  width: 100%;
  min-height: 350px;
  color: #161616;
  transition: background-color 0.4s;
  background-color: #efefef;
  margin-bottom: -30px;
}

.textarea-clone {
  position: absolute;
  top: 0;
  visibility: hidden;
  white-space: pre-wrap;
  word-wrap: break-word; 
}

textarea:focus {
  outline: none;
  background-color: #fafafa;
}

.btnParse {
padding: 6px 14px !important;
color: #fff;
background-color: #332d4f;
border: none;
cursor: pointer;
margin-bottom: 15px;
display: inline-block;
margin-left: 5px;
font-size: 14px;
border-radius: 4px;
}

.btnParse:hover {
color: #332d4f;
background-color: #fff;
border: 1px solid #332d4f;
}

.btnClear {
padding: 6px 14px !important;
color: #332d4f;
background-color: #fff;
border: 1px solid #332d4f;
cursor: pointer;
margin-bottom: 15px;
display: inline-block;
margin-left: 5px;
font-size: 14px;
border-radius: 4px;
}

.btnClear:hover {
color: #fff;
background-color: #332d4f;
border: none;
}

<!-- Flash -->
.openBtn {
margin-top: 30px;
margin-left: calc(50% - 80px);
padding: 1em 30px;
text-align: center;
width: 100px;
display: block;
-webkit-transition: all linear 0.15s;
transition: all linear 0.15s;
border-radius: 3px;
background: #3D9970;
font-size: 26px;
text-decoration: none;
letter-spacing: 1px;
text-transform: uppercase;
color: #fafafa;
z-index: 0;
}
.openBtn:hover {
  opacity: 0.75;
}

.obscure {
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  top: 0px;
  left: 0px;
  content: '';
  background: rgba(9, 9, 9, 0.67);
  z-index: 1;
}

.popup {
width: 30%;
padding: 10px 75px;
transform: translate(-50%, -50%) scale(0.5);
position: absolute;
top: 50%;
left: 50%;
box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.5);
border-radius: 5px;
background: #fff;
text-align: center;
z-index: 3;
}
.popup .closeBtn {
display: inline-block;
position: absolute;
bottom: 20px;
right: 20px;
font-weight: bold;
text-decoration: none;
color: #333;
line-height: 10px;
}

.animationOpen, .animationClose {
  display: block;
  -webkit-transition: all ease .2s;
  transition: all ease .2s;
}

.animationOpen {
  -webkit-transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.animationClose {
 opacity: 0;
  -webkit-transform: translate(-50%, -50%) scale(.5);
  transform: translate(-50%, -50%) scale(.5);
}

@media screen and (max-width: 600px ) {
h1 {
margin-bottom: 10px;
font-size: 22px;
}

h2 {
font-size: 15px;
line-height: 15px;
margin-bottom: 30px;
}
.popup{width: 80%;
padding: 10px 5%;}
}


</style>
<script>
function setHandlers () {
  const sections = document.querySelectorAll('section')

  sections.forEach(section => {
    const element = section.firstElementChild
    const clone = element.nextElementSibling
    const next = section.nextElementSibling
      ? section.nextElementSibling.firstElementChild
      : null
    const previous = section.previousElementSibling
      ? section.previousElementSibling.firstElementChild
      : null
    
    element.oninput = event => resizeTextarea(element, clone)
    element.onkeydown = event => executeShortcut(event, element, next, previous)
  })
  
  window.onresize = event => resizeSections(sections)
}

function resizeSections (sections) {
  sections.forEach(section => {
    const element = section.firstElementChild
    const clone = element.nextElementSibling
    
    resizeTextarea(element, clone)
  })
}

function resizeTextarea (element, clone) {
  let value = element.value

  // force the rendering of blank lines by adding a &nbsp;
  if (value.slice(-1) === '\n') value += '\xa0'

  clone.textContent = value
  element.style.height = clone.offsetHeight + 'px'
}

function executeShortcut (event, element, next, previous) {
  switch (event.key) {
    case 'ArrowUp':
      if (!event.repeat) {
        const start = element.selectionStart
        const end = element.selectionEnd
        
        // moves across elements when pressing up at the first index
        if (previous && start === 0 && start === end) {
          event.preventDefault()
          previous.focus()
        }
      }
 
      break

    case 'ArrowDown':
      if (!event.repeat) {
        const start = element.selectionStart
        const end = element.selectionEnd
        
        // moves across elements when pressing down at the last index
        if (next && start === element.value.length && start === end) {
          event.preventDefault()
          next.focus()
        }
      }
      
      break
  }
}

setHandlers()
resizeSections(document.querySelectorAll('section'))

</script>

<script>
$(document).ready(function(){
  $("#clipboard").hide();
});
</script>

<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; 
    $("#clipboard").show(); $('#parse').hide();}
$(this).remove();
</script>

<script>function clipboard() {
  /* Get the text field */
  var copyText = document.getElementById("somewhere");

  /* Select the text field */
  copyText.select();
  copyText.setSelectionRange(0, 99999); /*For mobile devices*/

  /* Copy the text inside the text field */
  document.execCommand("copy");
 
  alert("Copied!");
} </script>

<br />

<table style="margin: 0 auto; width: 100%;"><tbody>
<tr><td style="text-align: center;"><textarea autofocus="" id="somewhere" placeholder="Input your script here...." spellcheck="false"></textarea>
    <br />
<div class="textarea-clone">
</div>
<br />
<div class="tombol">
<input id="parse" class="btnParse" id="btnParse" onclick="convert();" style="padding: 5px;" type="button" value="Parse" /><button class="btnClear" onclick="document.getElementById('somewhere').value = ''; $('#parse').show(); $('#clipboard').hide();">Clear</button><button class="btnParse" id="clipboard" onclick="clipboard()">Copy result</button>
</div>
</td></tr>
</tbody></table>

5. Simpan semua perubahan dan periksa halaman yang baru kalian buat. Semoga berhasil!

Oh iya gan, langkah pada tutorial ini membutuhkan plugin jQuery! Pastikan blog kamu udah ada jquerynya ya!

Demo dari hasil tutorial ini :
HTML Parse

Baca juga

Post a Comment