Cara Membuat Tools Alexa Rank di Blogger

Halo teman-teman semua, pada kesempatan kali ini saya akan memberi tutorial Cara Membuat Tools Alexa Rank di Blogger.

Pada postingan sebelumnya saya sudah membuat tutorial Cara Memasang Tools CSS Minifier di Blogger untuk proses coding kalian.

Pastinya disini saya akan memberi script pembuatan cek peringkat Alexa atau biasa di sebut Alexa Rank Checker dengan sangat mudah.

Sebelum itu kalian pasti banyak yang belum tahu kan, apa si Alexa atau Alexa Rank itu?

Alexa adalah platform SEO yang di kembangkan oleh Amazon untuk membantu para penulis blog dalam menganalisa aktifitas blogging.

Siapa sih yang tidak tahu platform yang sangat familiran ini, pasti kalian sudah tau semua bukan?.

Seperti yang kalian tahu, Alexa melakukan pemetaan web berdasarkan peringkat layaknya Ahrefs dan Semrush.

Walaupun sangat tidak menjamin peringatan di hasil penelusuran, namun peringkat tersebut biasa dijadikan acuan dalam menilai kualitas blog.

Untuk mengecek peringkat anda biasa membuka halaman ini dengan memasukan url situs web anda.

Setelah itu, akan disediakan beberapa data penting yang berkaitan dengan aktifitas blogging.

Mulai dari kata kunci, sumber traffic, nilai pantulan, dan pastinya yang paling utama adalah peringkat dari domain atau DR.

Tapi pernahkah kalian berfikir untuk memasang alat pengecek Alexa Rank sendiri? Jika kalian pernah berfikir seperti itu, mungkin artikel kali ini sangat cocok untuk kalian.

Untuk tampilan toolsnya silahkan lihat gambar di bawah ini :

Bagaimana? Untuk tampilannya cukup menarik bukan, silahkan ikuti tutorial di bawah ini untuk cara memasang tools Alexa Rank.

Cara Membuat Tools Alexa Rank di Blogger

Step 1 : Silahkan buka Dashboard Blogger kalian.

Step 2 : Setelah sudah dalam Dashboard Blogger silahkan pilih menu HALAMAN atau PAGE

Step 3 : Pilih tombol HALAMAN BARU yang ada di atas sebelah kiri pada Dashboard Blogger

Step 4 : Jika sudah masuk dalam HALAMAN atau PAGE, silahkan ubah TAMPILAN MENULIS ke mode TAMPILAN HTML

Step 5 : Silahkan copy semua kode di bawah ini lalu pastikan kode tersebut di Halaman atau Page yang baru kalian buat

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

<!-- JavaScript by ESP -->
<script>
var CreateCSS=document.createElement("style");
CreateCSS.innerHTML=`
#alexaChecker{background:#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:#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:#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:#009ee0;color:#fff;font-size:13px;margin:20px 0 10px;padding:15px;border:0;border-radius:99em;cursor:pointer}
#alexaButton:hover{background: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 -->