Cara Membuat Tools Alexa Rank Checker di Blog

Pada postingan sebelumnya, kita telah belajar bagaimana cara membuat word counter untuk proses pembuatan artikel SEO. Nah di artikel kali ini, saya akan membagikan skrip pembuatan cek peringkat Alexa atau Alexa Rank Checker.

Alexa adalah platform SEO yang dikembangkan oleh Amazon untuk membantu para penulis dalam menganalisa aktifitas blogging. Siapa sih yang tidak tahu dengan platform ini, sudah familiar bukan?

Seperti yang kita tahu, Alexa melakukan pemetaan web berdasarkan peringkat layaknya Ahrefs dan Semrush. Walaupun tidak menjamin peringkat di hasil penelusuran, namun peringkat tersebut biasa dijadikan acuan dalam menilai kualitas.

Untuk mengecek peringkat, Anda bisa membuka halaman ini dengan memasukkan URL. Setelah itu, akan disediakan beberapa data penting yang berkaitan dengan aktifitas blogging, mulai dari kata kunci, sumber trafik, nilai pantulan, dan tentunya peringkat.

Tapi pernahkah berpikir untuk memasang alat pengecekan sendiri? Jika iya, artikel ini mungkin cocok buat Anda.

Cara Memasang Tools Alexa Rank Checker

1. Pertama, buka Blogger.
2. Kemudian pilih menu Halaman
3. Pilih Halaman Baru
4. Pilih Tampilan HTML
5. Pastekan kode Berikut :

  <!-- HTML -->
<div id="alexaChecker"/>
<!-- End HTML -->

<!-- JavaScript -->
<script>
var CreateCSS=document.createElement("style");
CreateCSS.innerHTML=`
#alexaChecker{background-color:#fff;font-family:"Noto Sans",sans-serif;text-align:center;margin:auto;padding:20px;border:0;border-radius:10px;box-shadow:0 0 8px 0 rgba(0,0,0,.08)}
#alexaTitle{color:#666;font-size:25px;font-weight:bold;margin-bottom:20px}
#alexaChecker div input{background-color:#f6f6f6;font-family:"Fira Mono",monospace;font-size:13px;text-align:center;padding:25px;border:1px solid #f6f6f6;border-radius:99em}
#alexaChecker div input:focus{background-color:#fff;border:1px solid #e6e6e6}
#alexaChecker div input::placeholder{color:#aaa;text-align:center}
#alexaInput{width:100%;height:30px;padding-left:5px;outline:none}
#alexaButton{background-color:#009ee0;color:#fff;font-size:13px;margin:20px 0 10px;padding:15px;border:0;border-radius:99em;cursor:pointer}
#alexaButton:hover{background-color:rgba(0,158,224,.8);color:#fff}
#alexaRank{color:#009ee0;font-size:30px;font-weight:bold;margin:15px 0}
#alexaInfo{color:#333;font-size:13px}
`;
document.body.append(CreateCSS);
var dataValue=0;
if (document.getElementById("alexaChecker")){
    document.getElementById("alexaChecker").innerHTML=`
<div id="alexaTitle">Alexa Rank Checker</div>
<div><input id="alexaInput" placeholder="Paste your domain here..." spellcheck="false"/></div>
<div><button id="alexaButton">Check</button></div>
<div id="alexaRank">-</div>
<div id="alexaInfo">Click the button and get your Alexa Rank!</div>
`;
  document.getElementById("alexaButton").addEventListener("click",function(){
    var dataUrl=document.getElementById("alexaInput").value;
    if(dataUrl.indexOf("http://")>=0||dataUrl.indexOf("https://")>=0 ){
    	dataUrl=dataUrl
    }else{
    	dataUrl="http://"+dataUrl
    }
    document.getElementById("alexaRank").innerText="---";
        var xhr=new XMLHttpRequest();
        xhr.open("POST","https://apialexa.maskoding.com/",true);
        xhr.onreadystatechange=function(){
            if (xhr.readyState==4){ 
                if(xhr.status==200){
                   	var db=JSON.parse(xhr.responseText);
                  	document.getElementById("alexaRank").innerText =db.data
                 }
            }
        }
        xhr.onerror=function(){ 
         setTimeout(function(){
         document.getElementById("alexaButton").click();
         },1000)
        }
        xhr.send(JSON.stringify({
          "data":dataUrl
        }))
  })
}
</script>
<!-- End JavaScript -->
  

6. Publikasikan

Demo

Penutup

Untuk kode yang lebih singkat, Anda bisa menggunakan JavaScript yang telah dihosting di GitHub berikut:

<!-- HTML -->
<div id="alexaChecker"/>
<!-- End HTML -->

<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/gh/Ferisp/Widget@main/alexa-rank-checker.js"></script>
<!-- End JavaScript -->

Penutup

Oh iya, skrip di atas berfungsi dengan memanfaatkan API dari www.maskoding.com. Jangan lupa berkunjung ya, Anda akan disediakan artikel-artikel yang membahas masalah JavaScript serta tutorial blogging lainnya.

Cukup sekian artikel tentang Cara Memasang Tools Alexa Rank di Blog ini, Terima kasih.