Merapikan Postingan (Rata Kanan-Rata Kiri) pada Blog AMP

Artikel blog, merapikan postingan pada blog amp

Blog Amp dengan segala keribetannya. Nggak boleh ini itu, kalau ingin indikator petir berwarna hijau menyala sebagai tanda valid AMP. Pun peraturan ketika menulis postingan untuk blog AMP. Sebelumnya kita bisa mengatur seindah mungkin tampilan postingan dengan hanya berjibaku sedikit pada menu EDIT POST. Memakai metode compose saja sudah cukup bagi kita untuk membuat postingan yang rapi. Tapi sekarang kita harus jungkir balik, berjibaku dengan kode HTML juga di menu sebelah demi mendapatkan postingan yang valid AMP.  Meski hasinya kadang nggak rapih.

Salah satunya adalah kita nggak bisa menggunakan menu ALIGNMENT untuk rata kanan rata kiri tulisan. Kalau kita gunakan itu, indikator amp menyala berwarna merah. Ada penggunaan style yang dilarang keras penggunaannya pada AMP. Sekeras itu, kah? Hihi. Maka hasilnya tulisan pada postingan seringnya acakadut meski valid AMP.

Ternyata setelah saya googling merapikannya cukup dengan menambah perintah rata kiri kanan itu (tex-align:justify) pada html template kita. Ditambahkan pada css post-body. Maka bila diuraikan langkahnya seperti ini:
  • Cari kode .post-body pada template yang kita gunakan, larinya ke dasbor  > template > edit html.
Lalu tambahkan: text-align:justify
maka mungkin penampakannya akan seperti ini (beda template, beda pemandangan):
.post-body{margin:10px
0;padding:0;line-height:1.3em;font-size:16px;font-weight:400;text-align:justify;}
  • save
  • dono, bos!
Contoh sebelum dan sesudah: 
merapikan postingan pada blog amp

Sesudah

merapikan postingan pada blog amp


Di template bikinan Kang Adhy yang saya gunakan sekarang, saya menambahkan pada lima baris yang ada post body-nya.  Saya mencarinya (pake CTRL F) di edit html dengan kata kunci .post-body{margin
Well sekian, semoga artikel tentang cara merapikan postingan blog AMP ini membantu. 
merapikan postingan pada blog amp

Blog Amp dengan segala keribetannya. Nggak boleh ini itu, kalau ingin indikator petir berwarna hijau menyala sebagai tanda valid AMP. Pun peraturan ketika menulis postingan untuk blog AMP. Sebelumnya kita bisa mengatur seindah mungkin tampilan postingan dengan hanya berjibaku sedikit pada menu EDIT POST. Memakai metode compose saja sudah cukup bagi kita untuk membuat postingan yang rapi. Tapi sekarang kita harus jungkir balik, berjibaku dengan kode HTML juga di menu sebelah demi mendapatkan postingan yang valid AMP.  Meski hasinya kadang nggak rapih.

Salah satunya adalah kita nggak bisa menggunakan menu ALIGNMENT untuk rata kanan rata kiri tulisan. Kalau kita gunakan itu, indikator amp menyala berwarna merah. Ada penggunaan style yang dilarang keras penggunaannya pada AMP. Sekeras itu, kah? Hihi. Maka hasilnya tulisan pada postingan seringnya acakadut meski valid AMP.

Ternyata setelah saya googling merapikannya cukup dengan menambah perintah rata kiri kanan itu (tex-align:justify) pada html template kita. Ditambahkan pada css post-body. Maka bila diuraikan langkahnya seperti ini:
  • Cari kode .post-body pada template yang kita gunakan, larinya ke dasbor  > template > edit html.
Lalu tambahkan: text-align:justify
maka mungkin penampakannya akan seperti ini (beda template, beda pemandangan):
.post-body{margin:10px
0;padding:0;line-height:1.3em;font-size:16px;font-weight:400;text-align:justify;}
  • save
  • dono, bos!
Contoh sebelum dan sesudah: 
merapikan postingan pada blog amp

Sesudah

merapikan postingan pada blog amp


Di template bikinan Kang Adhy yang saya gunakan sekarang, saya menambahkan pada lima baris yang ada post body-nya.  Saya mencarinya (pake CTRL F) di edit html dengan kata kunci .post-body{margin
Well sekian, semoga artikel tentang cara merapikan postingan blog AMP ini membantu. 

Merapikan Postingan (Rata Kanan-Rata Kiri) pada Blog AMP

Artikel blog, merapikan postingan pada blog amp

Blog Amp dengan segala keribetannya. Nggak boleh ini itu, kalau ingin indikator petir berwarna hijau menyala sebagai tanda valid AMP. Pun peraturan ketika menulis postingan untuk blog AMP. Sebelumnya kita bisa mengatur seindah mungkin tampilan postingan dengan hanya berjibaku sedikit pada menu EDIT POST. Memakai metode compose saja sudah cukup bagi kita untuk membuat postingan yang rapi. Tapi sekarang kita harus jungkir balik, berjibaku dengan kode HTML juga di menu sebelah demi mendapatkan postingan yang valid AMP.  Meski hasinya kadang nggak rapih.

Salah satunya adalah kita nggak bisa menggunakan menu ALIGNMENT untuk rata kanan rata kiri tulisan. Kalau kita gunakan itu, indikator amp menyala berwarna merah. Ada penggunaan style yang dilarang keras penggunaannya pada AMP. Sekeras itu, kah? Hihi. Maka hasilnya tulisan pada postingan seringnya acakadut meski valid AMP.

Ternyata setelah saya googling merapikannya cukup dengan menambah perintah rata kiri kanan itu (tex-align:justify) pada html template kita. Ditambahkan pada css post-body. Maka bila diuraikan langkahnya seperti ini:
  • Cari kode .post-body pada template yang kita gunakan, larinya ke dasbor  > template > edit html.
Lalu tambahkan: text-align:justify
maka mungkin penampakannya akan seperti ini (beda template, beda pemandangan):
.post-body{margin:10px
0;padding:0;line-height:1.3em;font-size:16px;font-weight:400;text-align:justify;}
  • save
  • dono, bos!
Contoh sebelum dan sesudah: 
merapikan postingan pada blog amp

Sesudah

merapikan postingan pada blog amp


Di template bikinan Kang Adhy yang saya gunakan sekarang, saya menambahkan pada lima baris yang ada post body-nya.  Saya mencarinya (pake CTRL F) di edit html dengan kata kunci .post-body{margin
Well sekian, semoga artikel tentang cara merapikan postingan blog AMP ini membantu. 
merapikan postingan pada blog amp

Blog Amp dengan segala keribetannya. Nggak boleh ini itu, kalau ingin indikator petir berwarna hijau menyala sebagai tanda valid AMP. Pun peraturan ketika menulis postingan untuk blog AMP. Sebelumnya kita bisa mengatur seindah mungkin tampilan postingan dengan hanya berjibaku sedikit pada menu EDIT POST. Memakai metode compose saja sudah cukup bagi kita untuk membuat postingan yang rapi. Tapi sekarang kita harus jungkir balik, berjibaku dengan kode HTML juga di menu sebelah demi mendapatkan postingan yang valid AMP.  Meski hasinya kadang nggak rapih.

Salah satunya adalah kita nggak bisa menggunakan menu ALIGNMENT untuk rata kanan rata kiri tulisan. Kalau kita gunakan itu, indikator amp menyala berwarna merah. Ada penggunaan style yang dilarang keras penggunaannya pada AMP. Sekeras itu, kah? Hihi. Maka hasilnya tulisan pada postingan seringnya acakadut meski valid AMP.

Ternyata setelah saya googling merapikannya cukup dengan menambah perintah rata kiri kanan itu (tex-align:justify) pada html template kita. Ditambahkan pada css post-body. Maka bila diuraikan langkahnya seperti ini:
  • Cari kode .post-body pada template yang kita gunakan, larinya ke dasbor  > template > edit html.
Lalu tambahkan: text-align:justify
maka mungkin penampakannya akan seperti ini (beda template, beda pemandangan):
.post-body{margin:10px
0;padding:0;line-height:1.3em;font-size:16px;font-weight:400;text-align:justify;}
  • save
  • dono, bos!
Contoh sebelum dan sesudah: 
merapikan postingan pada blog amp

Sesudah

merapikan postingan pada blog amp


Di template bikinan Kang Adhy yang saya gunakan sekarang, saya menambahkan pada lima baris yang ada post body-nya.  Saya mencarinya (pake CTRL F) di edit html dengan kata kunci .post-body{margin
Well sekian, semoga artikel tentang cara merapikan postingan blog AMP ini membantu. 

Membuat Sitemap pada Blog Amp

Artikel blog, Artikel Others,

Membuat daftar isi valid AMP.

Sitemap atau daftar isi begitu penting kehadirannya di sebuah blog. Sebagai salah satu bagian navigasi buat pembaca agar mudah memindai artikel mana atau apa saja yang ia hendak baca. Atau sekedar lihat-lihat kalau seandainya ada artikel yang sedang mereka cari.

Bagi blog yang non-AMP rasanya bisa dibilang mudah membuat daftar isi atau sitemap untuk blognya. Namun untuk para pengguna template AMP akan sedikit menemui kesulitan apalagi kalau pakai custom domain. Seperti kata Admin Kompi Ajaib :
“Seperti kita ketahui bahwa ada beberapa komponen AMP HTML yang harus menggunakan HTTPS agar dapat berjalan. Komponen tersebut di antaranya adalah amp-iframe. Dan blogger dapat membuat sitemap blog dengan menggunakan amp-iframe dengan menghosting kode-kodenya terlebih dahulu dengan URL hosting dengan HTTPS seperti halnya cdn.rawgit dari Github.”

Kang Adhi membagikan tutorial untuk membuat sitemap di blognya Untuk yang mencari tutorial sitemap bagi amp blog, pasti sudah sempat mengintip blog beliau tersebut. Sila lihat di sana kalau penasaran. Apalagi untuk yang memakai custom domain.

Lantas saya cari-cari tutorial yang lain, yang, istilahnya, lebih sederhana dan mudah dipahami. Karena waktu kemarin-kemarin saya masih menggunakan domain blogspot. Saya pun berlabuh di kediaman digital miliknya om Antoncabon. Memang lebih sederhana, bisa ditengok di lapak (blog) beliau juga. Tapi saya sedikit menemui hambatan.

Baik, tidak berlama-lama, ini cara membuat sitemap valid AMP sederhana lainnya.

Langkah-langkahnya:

#1. Pastikan kalian mempunyai akun di Github atau penyedia hosting gratis lainnya. Cara registrasi dan pembuatan jelasnya, ada di lapak Kompi Ajaib.

#2. Pastikan di HTML template kalian sudah ada kode di bawah ini, di atas kode </head>:
<script async='async' custom-element='amp-iframe'src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'></script>
Tapi saya rasa di template amp html kalian sudah tersimpan kode tersebut. Kalau belum, sisipkan segera.

#3. Salin kode di bawah ini di notepad biasa atau notepad++, ganti deadpixl.blogspot.com dengan alamat blog kamu, lalu simpan dalam format html. Kasih nama terserah, misal daftarisi.html .  Saya sendiri juga suka menggunakan notepad++ kalau urusan html.




<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Sitemap</title>

<meta content='width=device-width, initial-scale=1' name='viewport'>

<style>

/* Sitemaps */ #sitemap-tab{padding:7px 10px;margin:0 auto 20px} #sitemap-tab table{width:auto;margin:0 auto} #sitemap-tab form{font:inherit} #sitemap-tab label{display:block;text-align:right;margin:0 10px 0 0;padding:4px 0 0} #sitemap-tab select[disabled]{opacity:.4} #post-searcher{display:block;margin:0;padding:0} #sitemap-tab input{width:100%;border:1px solid #dedede;border-radius:5px;margin:0;padding:5px;text-transform:capitalize!important;outline:0;color:#333!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} #sitemap-tab select{width:100%;border:1px solid #dedede;border-radius:5px;margin:0 0 5px;padding:5px;text-transform:capitalize!important;outline:0;color:#333!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} #sitemap-tab select option{min-height:1.4em!important;} #sitemap-tab input#feed-q{padding:5px 10px!important;} #sitemap-container{background:#fff;display:block;clear:both;margin:0;padding:0;list-style:none;overflow:hidden;position:relative;border-top:none} #sitemap-container li{list-style:none;margin:0;padding:0;display:inline} #sitemap-container li a{text-decoration:none;color:#2C2C2C;font-weight:bold;font-size:16px} #sitemap-container li a:hover{text-decoration:none;color:#E94141} #sitemap-container li img{float:left;margin:0 15px 15px 0;padding:0;width:70px;height:50px;!important} #sitemap-nav{margin:10px 0 30px;text-align:center;font-weight:500;width:100%} #sitemap-nav a,#sitemap-nav span{color:#fff;text-decoration:none;display:block;opacity:.8} #sitemap-nav a:hover,#sitemap-nav span:hover{opacity:1} #sitemap-nav span{cursor:wait} @media (max-width:600px){#sitemap-tab table{margin:0 auto;width:100%} #sitemap-container,#sitemap-tab{margin:0 auto} #sitemap-container li .inner{margin:5px auto;height:auto;} #SitemaContainer li{float:none;display:block;width:auto;height:auto} #sitemap-container li .news-text, #sitemapContainer:after,#sitemap-container li img{display:none!important}

</style>

</head>

<body>



<div id="sitemap-tab">



  <table>

    <tbody>

      <tr>

        <td>

          <label for="feed-order">Urutkan artikel berdasarkan:</label>

        </td>

        <td>

          <select id="feed-order">

            <option selected="" value="published">Artikel terbaru</option>

            <option value="updated">Artikel yang terakhir di update</option>

          </select>

        </td>

      </tr>

      <tr>

        <td>

          <label for="label-sorter">Filter artikel berdasarkan kategori:</label>

        </td>

        <td>

          <select disabled="" id="label-sorter">

            <option selected="">Loading....</option>

          </select>

        </td>

      </tr>

      <tr>

        <td>

          <label for="feed-q">Cari artikel dengan kata kunci:</label>

        </td>

        <td>

          <form id="post-searcher">

            <input id="feed-q" placeholder="Ketik dan tekan ENTER" type="text" />

          </form>

        </td>

      </tr>

    </tbody>

  </table>

</div>

<br />

<header id="result-desc"></header>

<br />

<ul id="sitemap-container"></ul>

<div id="sitemap-nav">

</div>



<script type='text/javaScript'>

document.write;var loadToc,loadCategories,_toc={init:function(){var cfg={url:'https://deadpixl.blogspot.com/',maxResults:10,numChars:270,thumbWidth:140,thumbHeight:95,navText:"Tampilkan artikel selanjutnya &#9660;",resetToc:"Kembali ke Awal",noImage:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4nfsafh80Y9SP1x6cdaeAGdFMTwSyoFT2K27oCO19R-F6jDL-NX8fY_2U_0hsd558czTWJ9DTtOMZ3809hCzYtqgYpI_zd0ipPw2WZ49PvEYd29WKE4o-1V1WUBiQ3zCfDX1g_fbHPDV0/s1100/no-thumbnail.png",loading:"<span>Memuat...</span>",counting:"<div>Memuat artikel...</div>",searching:"<span>Mencari...</span>"},w=window,d=document,el=function(id){return d.getElementById(id);},o={a:el('feed-order'),b:el('label-sorter').parentNode,c:el('post-searcher'),d:el('feed-q'),e:el('result-desc'),f:el('sitemap-container'),g:el('sitemap-nav'),h:d.getElementsByTagName('head')[0],i:0,j:null,k:'published',l:0,m:""},fn={a:function(){old=el('temporer-script');old.parentNode.removeChild(old);},b:function(param){var script=d.createElement('script');script.type="text/javascript";script.id="temporer-script";script.src=param;if(el('temporer-script'))fn.a();o.h.appendChild(script);},c:function(mode,tag,order){o.i++;o.e.innerHTML=cfg.counting;o.g.innerHTML=cfg[mode==1?"searching":"loading"];if(mode===0){fn.b(tag!==null?cfg.url+'/feeds/posts/summary/-/'+ tag+'?alt=json-in-script&start-index='+((o.i*cfg.maxResults)+ 1)+'&max-results='+ cfg.maxResults+'&orderby='+ order+'&callback=loadToc':cfg.url+'/feeds/posts/summary?alt=json-in-script&start-index='+((o.i*cfg.maxResults)+ 1)+'&max-results='+ cfg.maxResults+'&orderby='+ order+'&callback=loadToc');}else if(mode==1){fn.b(cfg.url+'/feeds/posts/summary?alt=json-in-script&start-index='+((o.i*cfg.maxResults)+ 1)+'&max-results='+ cfg.maxResults+'&q='+ tag+'&orderby='+ order+'&callback=loadToc');} o.j=(tag!==null)?tag:null;o.l=mode;o.a.disabled=true;o.b.children[0].disabled=true;},d:function(json){var _h;o.g.innerHTML="";o.e.innerHTML=o.l==1?'<span>Hasil penelusuran untuk kata kunci <b>&#8220;'+ o.m+'&#8221;</b> ('+ json.feed.openSearch$totalResults.$t+' Hasil)</span>':'<div>Total: '+ json.feed.openSearch$totalResults.$t+' Artikel</div>';if("entry"in json.feed){var a=json.feed.entry,b,c,_d,e="0 Komentar",f="",g;for(var i=0;i<cfg.maxResults;i++){if(i==a.length)break;b=a[i].title.$t;_d=("summary"in a[i])?a[i].summary.$t.replace(/<br ?\/?>/ig," ").replace(/<(.*?)>/g,"").replace(/<iframe/ig,"").substring(0,cfg.numChars):"";g=("media$thumbnail"in a[i])?a[i].media$thumbnail.url.replace(/.*?:\/\//g , "//").replace(/\/s[0-9]+\-c/,"\/s"+ cfg.thumbWidth+""):cfg.noImage.replace(/\/s[0-9]+\-c/,"\/s"+ cfg.thumbWidth+"");for(var j=0,jen=a[i].link.length;j<jen;j++){c=(a[i].link[j].rel=="alternate")?a[i].link[j].href:"#";} for(var k=0,ken=a[i].link.length;k<ken;k++){if(a[i].link[k].rel=="replies"&&a[i].link[k].type=="text/html"){e=a[i].link[k].title;break;}} _h=d.createElement('li');_h.innerHTML='<div class="inner"><img style="width:'+ cfg.thumbWidth+'px;height:'+ cfg.thumbHeight+'px;" src="'+ g+'" alt="'+ b+'"><a class="toc-title" href="'+ c+'" target="_blank" title="'+ b+'">'+ b+'</a><div class="news-text">'+ _d+'&hellip;<br style="clear:both;"></div></div>';o.f.appendChild(_h);} _h=d.createElement('a');_h.href='#load-more';_h.innerHTML=cfg.navText;_h.onclick=function(){fn.c(o.l,o.j,o.k);return false;};}else{_h=d.createElement('a');_h.href='#reset-content';_h.innerHTML=cfg.resetToc;_h.onclick=function(){o.i=-1;o.e.innerHTML=cfg.counting;o.f.innerHTML="";fn.c(0,null,'published');o.a.innerHTML=o.a.innerHTML;o.b.children[0].innerHTML=o.b.children[0].innerHTML;return false;};} o.g.appendChild(_h);o.a.disabled=false;o.b.children[0].disabled=false;},e:function(json){var a=json.feed.category,b='<select id="label-sorter"><option value="" selected disabled>Pilih Kategori...</option>';for(var i=0,len=a.length;i<len;i++){b+='<option value="'+ encodeURIComponent(a[i].term).replace(/%20/g, " ")+'">'+ encodeURIComponent(a[i].term).replace(/%20/g, " ")+'</option>';} b+='</select>';o.b.innerHTML=b;o.b.children[0].onchange=function(){o.i=-1;o.f.innerHTML="";o.g.innerHTML=cfg.loading;fn.c(0,this.value,o.k);};}};loadToc=fn.d;loadCategories=fn.e;fn.b(cfg.url+'/feeds/posts/summary?alt=json-in-script&start-index='+(o.i+ 1)+'&max-results='+ cfg.maxResults+'&orderby=published&callback=loadToc');fn.b(cfg.url+'/feeds/posts/summary?alt=json-in-script&max-results=0&orderby=published&callback=loadCategories');o.a.onchange=function(){o.i=-1;o.f.innerHTML="";o.g.innerHTML=cfg.counting;o.b.children[0].innerHTML=o.b.children[0].innerHTML;fn.c(0,null,this.value);o.k=this.value;};o.c.onsubmit=function(){o.i=-1;o.f.innerHTML="";o.m=o.d.value;fn.c(1,o.d.value,o.k);return false;};}};_toc.init();

</script>

<div class='clear'></div>

</div>

</div>

</div>

<div class='inline-ad'>

</div>

        </div></div>

</body>

</html>

(kredit kode kepada om antoncabon)

#4. Upload file html tersebut ke github. Setelah selesai klik kanan file itu dan “copy link address

#5. Paste link yang tadi di RawGit dan copy link yang berada di box kiri bawah.
daftar isi

#6. Lalu paste-kan di kode iframe ini :
<div class="img-width-400 img-center">
<amp-img width="400" height="400" layout="responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVMTOaYBOD9rExdmvvgycjYM57PBK6BOnZ0EWhP4celtIlDodkNtlALgkKDZteIdMQy2nJkfauMFKUGLIKALhAN3UG3FqdehNirBeOyWkDTKneOlalFfpnp4Ml-yNgsEJ5nwmNrMnFOser/s1600/dpx-logo-keren.png" width="300"></amp-img></div>

<amp-iframe allowfullscreen="" frameborder="0" height="700" layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups" src="ISIKAN KODE TADI DI SINI" width="700"> </amp-iframe>

#7. Ganti juga source gambar dan kelebarannya.

#8. Simpan kode yang sudah diedit tersebut di laman page di blog untuk sitemap. Sila preview terlebih dahulu. Setelah menurut kalian sesuai, publish.

Baca Juga: Merapikan (mengatur rata kanan-rata kiri) pada Postingn Blog AMP

Catatan: saya sengaja sisipkan gambar di atasnya, karena kalau tidak, maka sitemap tidak akan muncul, loading terus. Kalian bisa menggantinya dengan properti lain selain gambar, terserah.
Untuk demo, karena saya sudah mengganti sitemapnya, bisa dicek di KAMVRETMAP (Sitemap The Kamvret). Maaf, Adminnya udah ganti template. :)

Demikian cara membuat sitemap AMP sederhana versi lainnya. 

Membuat daftar isi valid AMP.

Sitemap atau daftar isi begitu penting kehadirannya di sebuah blog. Sebagai salah satu bagian navigasi buat pembaca agar mudah memindai artikel mana atau apa saja yang ia hendak baca. Atau sekedar lihat-lihat kalau seandainya ada artikel yang sedang mereka cari.

Bagi blog yang non-AMP rasanya bisa dibilang mudah membuat daftar isi atau sitemap untuk blognya. Namun untuk para pengguna template AMP akan sedikit menemui kesulitan apalagi kalau pakai custom domain. Seperti kata Admin Kompi Ajaib :
“Seperti kita ketahui bahwa ada beberapa komponen AMP HTML yang harus menggunakan HTTPS agar dapat berjalan. Komponen tersebut di antaranya adalah amp-iframe. Dan blogger dapat membuat sitemap blog dengan menggunakan amp-iframe dengan menghosting kode-kodenya terlebih dahulu dengan URL hosting dengan HTTPS seperti halnya cdn.rawgit dari Github.”

Kang Adhi membagikan tutorial untuk membuat sitemap di blognya Untuk yang mencari tutorial sitemap bagi amp blog, pasti sudah sempat mengintip blog beliau tersebut. Sila lihat di sana kalau penasaran. Apalagi untuk yang memakai custom domain.

Lantas saya cari-cari tutorial yang lain, yang, istilahnya, lebih sederhana dan mudah dipahami. Karena waktu kemarin-kemarin saya masih menggunakan domain blogspot. Saya pun berlabuh di kediaman digital miliknya om Antoncabon. Memang lebih sederhana, bisa ditengok di lapak (blog) beliau juga. Tapi saya sedikit menemui hambatan.

Baik, tidak berlama-lama, ini cara membuat sitemap valid AMP sederhana lainnya.

Langkah-langkahnya:

#1. Pastikan kalian mempunyai akun di Github atau penyedia hosting gratis lainnya. Cara registrasi dan pembuatan jelasnya, ada di lapak Kompi Ajaib.

#2. Pastikan di HTML template kalian sudah ada kode di bawah ini, di atas kode </head>:
<script async='async' custom-element='amp-iframe'src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'></script>
Tapi saya rasa di template amp html kalian sudah tersimpan kode tersebut. Kalau belum, sisipkan segera.

#3. Salin kode di bawah ini di notepad biasa atau notepad++, ganti deadpixl.blogspot.com dengan alamat blog kamu, lalu simpan dalam format html. Kasih nama terserah, misal daftarisi.html .  Saya sendiri juga suka menggunakan notepad++ kalau urusan html.




<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Sitemap</title>

<meta content='width=device-width, initial-scale=1' name='viewport'>

<style>

/* Sitemaps */ #sitemap-tab{padding:7px 10px;margin:0 auto 20px} #sitemap-tab table{width:auto;margin:0 auto} #sitemap-tab form{font:inherit} #sitemap-tab label{display:block;text-align:right;margin:0 10px 0 0;padding:4px 0 0} #sitemap-tab select[disabled]{opacity:.4} #post-searcher{display:block;margin:0;padding:0} #sitemap-tab input{width:100%;border:1px solid #dedede;border-radius:5px;margin:0;padding:5px;text-transform:capitalize!important;outline:0;color:#333!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} #sitemap-tab select{width:100%;border:1px solid #dedede;border-radius:5px;margin:0 0 5px;padding:5px;text-transform:capitalize!important;outline:0;color:#333!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} #sitemap-tab select option{min-height:1.4em!important;} #sitemap-tab input#feed-q{padding:5px 10px!important;} #sitemap-container{background:#fff;display:block;clear:both;margin:0;padding:0;list-style:none;overflow:hidden;position:relative;border-top:none} #sitemap-container li{list-style:none;margin:0;padding:0;display:inline} #sitemap-container li a{text-decoration:none;color:#2C2C2C;font-weight:bold;font-size:16px} #sitemap-container li a:hover{text-decoration:none;color:#E94141} #sitemap-container li img{float:left;margin:0 15px 15px 0;padding:0;width:70px;height:50px;!important} #sitemap-nav{margin:10px 0 30px;text-align:center;font-weight:500;width:100%} #sitemap-nav a,#sitemap-nav span{color:#fff;text-decoration:none;display:block;opacity:.8} #sitemap-nav a:hover,#sitemap-nav span:hover{opacity:1} #sitemap-nav span{cursor:wait} @media (max-width:600px){#sitemap-tab table{margin:0 auto;width:100%} #sitemap-container,#sitemap-tab{margin:0 auto} #sitemap-container li .inner{margin:5px auto;height:auto;} #SitemaContainer li{float:none;display:block;width:auto;height:auto} #sitemap-container li .news-text, #sitemapContainer:after,#sitemap-container li img{display:none!important}

</style>

</head>

<body>



<div id="sitemap-tab">



  <table>

    <tbody>

      <tr>

        <td>

          <label for="feed-order">Urutkan artikel berdasarkan:</label>

        </td>

        <td>

          <select id="feed-order">

            <option selected="" value="published">Artikel terbaru</option>

            <option value="updated">Artikel yang terakhir di update</option>

          </select>

        </td>

      </tr>

      <tr>

        <td>

          <label for="label-sorter">Filter artikel berdasarkan kategori:</label>

        </td>

        <td>

          <select disabled="" id="label-sorter">

            <option selected="">Loading....</option>

          </select>

        </td>

      </tr>

      <tr>

        <td>

          <label for="feed-q">Cari artikel dengan kata kunci:</label>

        </td>

        <td>

          <form id="post-searcher">

            <input id="feed-q" placeholder="Ketik dan tekan ENTER" type="text" />

          </form>

        </td>

      </tr>

    </tbody>

  </table>

</div>

<br />

<header id="result-desc"></header>

<br />

<ul id="sitemap-container"></ul>

<div id="sitemap-nav">

</div>



<script type='text/javaScript'>

document.write;var loadToc,loadCategories,_toc={init:function(){var cfg={url:'https://deadpixl.blogspot.com/',maxResults:10,numChars:270,thumbWidth:140,thumbHeight:95,navText:"Tampilkan artikel selanjutnya &#9660;",resetToc:"Kembali ke Awal",noImage:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4nfsafh80Y9SP1x6cdaeAGdFMTwSyoFT2K27oCO19R-F6jDL-NX8fY_2U_0hsd558czTWJ9DTtOMZ3809hCzYtqgYpI_zd0ipPw2WZ49PvEYd29WKE4o-1V1WUBiQ3zCfDX1g_fbHPDV0/s1100/no-thumbnail.png",loading:"<span>Memuat...</span>",counting:"<div>Memuat artikel...</div>",searching:"<span>Mencari...</span>"},w=window,d=document,el=function(id){return d.getElementById(id);},o={a:el('feed-order'),b:el('label-sorter').parentNode,c:el('post-searcher'),d:el('feed-q'),e:el('result-desc'),f:el('sitemap-container'),g:el('sitemap-nav'),h:d.getElementsByTagName('head')[0],i:0,j:null,k:'published',l:0,m:""},fn={a:function(){old=el('temporer-script');old.parentNode.removeChild(old);},b:function(param){var script=d.createElement('script');script.type="text/javascript";script.id="temporer-script";script.src=param;if(el('temporer-script'))fn.a();o.h.appendChild(script);},c:function(mode,tag,order){o.i++;o.e.innerHTML=cfg.counting;o.g.innerHTML=cfg[mode==1?"searching":"loading"];if(mode===0){fn.b(tag!==null?cfg.url+'/feeds/posts/summary/-/'+ tag+'?alt=json-in-script&start-index='+((o.i*cfg.maxResults)+ 1)+'&max-results='+ cfg.maxResults+'&orderby='+ order+'&callback=loadToc':cfg.url+'/feeds/posts/summary?alt=json-in-script&start-index='+((o.i*cfg.maxResults)+ 1)+'&max-results='+ cfg.maxResults+'&orderby='+ order+'&callback=loadToc');}else if(mode==1){fn.b(cfg.url+'/feeds/posts/summary?alt=json-in-script&start-index='+((o.i*cfg.maxResults)+ 1)+'&max-results='+ cfg.maxResults+'&q='+ tag+'&orderby='+ order+'&callback=loadToc');} o.j=(tag!==null)?tag:null;o.l=mode;o.a.disabled=true;o.b.children[0].disabled=true;},d:function(json){var _h;o.g.innerHTML="";o.e.innerHTML=o.l==1?'<span>Hasil penelusuran untuk kata kunci <b>&#8220;'+ o.m+'&#8221;</b> ('+ json.feed.openSearch$totalResults.$t+' Hasil)</span>':'<div>Total: '+ json.feed.openSearch$totalResults.$t+' Artikel</div>';if("entry"in json.feed){var a=json.feed.entry,b,c,_d,e="0 Komentar",f="",g;for(var i=0;i<cfg.maxResults;i++){if(i==a.length)break;b=a[i].title.$t;_d=("summary"in a[i])?a[i].summary.$t.replace(/<br ?\/?>/ig," ").replace(/<(.*?)>/g,"").replace(/<iframe/ig,"").substring(0,cfg.numChars):"";g=("media$thumbnail"in a[i])?a[i].media$thumbnail.url.replace(/.*?:\/\//g , "//").replace(/\/s[0-9]+\-c/,"\/s"+ cfg.thumbWidth+""):cfg.noImage.replace(/\/s[0-9]+\-c/,"\/s"+ cfg.thumbWidth+"");for(var j=0,jen=a[i].link.length;j<jen;j++){c=(a[i].link[j].rel=="alternate")?a[i].link[j].href:"#";} for(var k=0,ken=a[i].link.length;k<ken;k++){if(a[i].link[k].rel=="replies"&&a[i].link[k].type=="text/html"){e=a[i].link[k].title;break;}} _h=d.createElement('li');_h.innerHTML='<div class="inner"><img style="width:'+ cfg.thumbWidth+'px;height:'+ cfg.thumbHeight+'px;" src="'+ g+'" alt="'+ b+'"><a class="toc-title" href="'+ c+'" target="_blank" title="'+ b+'">'+ b+'</a><div class="news-text">'+ _d+'&hellip;<br style="clear:both;"></div></div>';o.f.appendChild(_h);} _h=d.createElement('a');_h.href='#load-more';_h.innerHTML=cfg.navText;_h.onclick=function(){fn.c(o.l,o.j,o.k);return false;};}else{_h=d.createElement('a');_h.href='#reset-content';_h.innerHTML=cfg.resetToc;_h.onclick=function(){o.i=-1;o.e.innerHTML=cfg.counting;o.f.innerHTML="";fn.c(0,null,'published');o.a.innerHTML=o.a.innerHTML;o.b.children[0].innerHTML=o.b.children[0].innerHTML;return false;};} o.g.appendChild(_h);o.a.disabled=false;o.b.children[0].disabled=false;},e:function(json){var a=json.feed.category,b='<select id="label-sorter"><option value="" selected disabled>Pilih Kategori...</option>';for(var i=0,len=a.length;i<len;i++){b+='<option value="'+ encodeURIComponent(a[i].term).replace(/%20/g, " ")+'">'+ encodeURIComponent(a[i].term).replace(/%20/g, " ")+'</option>';} b+='</select>';o.b.innerHTML=b;o.b.children[0].onchange=function(){o.i=-1;o.f.innerHTML="";o.g.innerHTML=cfg.loading;fn.c(0,this.value,o.k);};}};loadToc=fn.d;loadCategories=fn.e;fn.b(cfg.url+'/feeds/posts/summary?alt=json-in-script&start-index='+(o.i+ 1)+'&max-results='+ cfg.maxResults+'&orderby=published&callback=loadToc');fn.b(cfg.url+'/feeds/posts/summary?alt=json-in-script&max-results=0&orderby=published&callback=loadCategories');o.a.onchange=function(){o.i=-1;o.f.innerHTML="";o.g.innerHTML=cfg.counting;o.b.children[0].innerHTML=o.b.children[0].innerHTML;fn.c(0,null,this.value);o.k=this.value;};o.c.onsubmit=function(){o.i=-1;o.f.innerHTML="";o.m=o.d.value;fn.c(1,o.d.value,o.k);return false;};}};_toc.init();

</script>

<div class='clear'></div>

</div>

</div>

</div>

<div class='inline-ad'>

</div>

        </div></div>

</body>

</html>

(kredit kode kepada om antoncabon)

#4. Upload file html tersebut ke github. Setelah selesai klik kanan file itu dan “copy link address

#5. Paste link yang tadi di RawGit dan copy link yang berada di box kiri bawah.
daftar isi

#6. Lalu paste-kan di kode iframe ini :
<div class="img-width-400 img-center">
<amp-img width="400" height="400" layout="responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVMTOaYBOD9rExdmvvgycjYM57PBK6BOnZ0EWhP4celtIlDodkNtlALgkKDZteIdMQy2nJkfauMFKUGLIKALhAN3UG3FqdehNirBeOyWkDTKneOlalFfpnp4Ml-yNgsEJ5nwmNrMnFOser/s1600/dpx-logo-keren.png" width="300"></amp-img></div>

<amp-iframe allowfullscreen="" frameborder="0" height="700" layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups" src="ISIKAN KODE TADI DI SINI" width="700"> </amp-iframe>

#7. Ganti juga source gambar dan kelebarannya.

#8. Simpan kode yang sudah diedit tersebut di laman page di blog untuk sitemap. Sila preview terlebih dahulu. Setelah menurut kalian sesuai, publish.

Baca Juga: Merapikan (mengatur rata kanan-rata kiri) pada Postingn Blog AMP

Catatan: saya sengaja sisipkan gambar di atasnya, karena kalau tidak, maka sitemap tidak akan muncul, loading terus. Kalian bisa menggantinya dengan properti lain selain gambar, terserah.
Untuk demo, karena saya sudah mengganti sitemapnya, bisa dicek di KAMVRETMAP (Sitemap The Kamvret). Maaf, Adminnya udah ganti template. :)

Demikian cara membuat sitemap AMP sederhana versi lainnya. 

Membuat Sitemap pada Blog Amp

Artikel blog, Artikel Others,

Membuat daftar isi valid AMP.

Sitemap atau daftar isi begitu penting kehadirannya di sebuah blog. Sebagai salah satu bagian navigasi buat pembaca agar mudah memindai artikel mana atau apa saja yang ia hendak baca. Atau sekedar lihat-lihat kalau seandainya ada artikel yang sedang mereka cari.

Bagi blog yang non-AMP rasanya bisa dibilang mudah membuat daftar isi atau sitemap untuk blognya. Namun untuk para pengguna template AMP akan sedikit menemui kesulitan apalagi kalau pakai custom domain. Seperti kata Admin Kompi Ajaib :
“Seperti kita ketahui bahwa ada beberapa komponen AMP HTML yang harus menggunakan HTTPS agar dapat berjalan. Komponen tersebut di antaranya adalah amp-iframe. Dan blogger dapat membuat sitemap blog dengan menggunakan amp-iframe dengan menghosting kode-kodenya terlebih dahulu dengan URL hosting dengan HTTPS seperti halnya cdn.rawgit dari Github.”

Kang Adhi membagikan tutorial untuk membuat sitemap di blognya Untuk yang mencari tutorial sitemap bagi amp blog, pasti sudah sempat mengintip blog beliau tersebut. Sila lihat di sana kalau penasaran. Apalagi untuk yang memakai custom domain.

Lantas saya cari-cari tutorial yang lain, yang, istilahnya, lebih sederhana dan mudah dipahami. Karena waktu kemarin-kemarin saya masih menggunakan domain blogspot. Saya pun berlabuh di kediaman digital miliknya om Antoncabon. Memang lebih sederhana, bisa ditengok di lapak (blog) beliau juga. Tapi saya sedikit menemui hambatan.

Baik, tidak berlama-lama, ini cara membuat sitemap valid AMP sederhana lainnya.

Langkah-langkahnya:

#1. Pastikan kalian mempunyai akun di Github atau penyedia hosting gratis lainnya. Cara registrasi dan pembuatan jelasnya, ada di lapak Kompi Ajaib.

#2. Pastikan di HTML template kalian sudah ada kode di bawah ini, di atas kode </head>:
<script async='async' custom-element='amp-iframe'src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'></script>
Tapi saya rasa di template amp html kalian sudah tersimpan kode tersebut. Kalau belum, sisipkan segera.

#3. Salin kode di bawah ini di notepad biasa atau notepad++, ganti deadpixl.blogspot.com dengan alamat blog kamu, lalu simpan dalam format html. Kasih nama terserah, misal daftarisi.html .  Saya sendiri juga suka menggunakan notepad++ kalau urusan html.




<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Sitemap</title>

<meta content='width=device-width, initial-scale=1' name='viewport'>

<style>

/* Sitemaps */ #sitemap-tab{padding:7px 10px;margin:0 auto 20px} #sitemap-tab table{width:auto;margin:0 auto} #sitemap-tab form{font:inherit} #sitemap-tab label{display:block;text-align:right;margin:0 10px 0 0;padding:4px 0 0} #sitemap-tab select[disabled]{opacity:.4} #post-searcher{display:block;margin:0;padding:0} #sitemap-tab input{width:100%;border:1px solid #dedede;border-radius:5px;margin:0;padding:5px;text-transform:capitalize!important;outline:0;color:#333!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} #sitemap-tab select{width:100%;border:1px solid #dedede;border-radius:5px;margin:0 0 5px;padding:5px;text-transform:capitalize!important;outline:0;color:#333!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} #sitemap-tab select option{min-height:1.4em!important;} #sitemap-tab input#feed-q{padding:5px 10px!important;} #sitemap-container{background:#fff;display:block;clear:both;margin:0;padding:0;list-style:none;overflow:hidden;position:relative;border-top:none} #sitemap-container li{list-style:none;margin:0;padding:0;display:inline} #sitemap-container li a{text-decoration:none;color:#2C2C2C;font-weight:bold;font-size:16px} #sitemap-container li a:hover{text-decoration:none;color:#E94141} #sitemap-container li img{float:left;margin:0 15px 15px 0;padding:0;width:70px;height:50px;!important} #sitemap-nav{margin:10px 0 30px;text-align:center;font-weight:500;width:100%} #sitemap-nav a,#sitemap-nav span{color:#fff;text-decoration:none;display:block;opacity:.8} #sitemap-nav a:hover,#sitemap-nav span:hover{opacity:1} #sitemap-nav span{cursor:wait} @media (max-width:600px){#sitemap-tab table{margin:0 auto;width:100%} #sitemap-container,#sitemap-tab{margin:0 auto} #sitemap-container li .inner{margin:5px auto;height:auto;} #SitemaContainer li{float:none;display:block;width:auto;height:auto} #sitemap-container li .news-text, #sitemapContainer:after,#sitemap-container li img{display:none!important}

</style>

</head>

<body>



<div id="sitemap-tab">



  <table>

    <tbody>

      <tr>

        <td>

          <label for="feed-order">Urutkan artikel berdasarkan:</label>

        </td>

        <td>

          <select id="feed-order">

            <option selected="" value="published">Artikel terbaru</option>

            <option value="updated">Artikel yang terakhir di update</option>

          </select>

        </td>

      </tr>

      <tr>

        <td>

          <label for="label-sorter">Filter artikel berdasarkan kategori:</label>

        </td>

        <td>

          <select disabled="" id="label-sorter">

            <option selected="">Loading....</option>

          </select>

        </td>

      </tr>

      <tr>

        <td>

          <label for="feed-q">Cari artikel dengan kata kunci:</label>

        </td>

        <td>

          <form id="post-searcher">

            <input id="feed-q" placeholder="Ketik dan tekan ENTER" type="text" />

          </form>

        </td>

      </tr>

    </tbody>

  </table>

</div>

<br />

<header id="result-desc"></header>

<br />

<ul id="sitemap-container"></ul>

<div id="sitemap-nav">

</div>



<script type='text/javaScript'>

document.write;var loadToc,loadCategories,_toc={init:function(){var cfg={url:'https://deadpixl.blogspot.com/',maxResults:10,numChars:270,thumbWidth:140,thumbHeight:95,navText:"Tampilkan artikel selanjutnya &#9660;",resetToc:"Kembali ke Awal",noImage:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4nfsafh80Y9SP1x6cdaeAGdFMTwSyoFT2K27oCO19R-F6jDL-NX8fY_2U_0hsd558czTWJ9DTtOMZ3809hCzYtqgYpI_zd0ipPw2WZ49PvEYd29WKE4o-1V1WUBiQ3zCfDX1g_fbHPDV0/s1100/no-thumbnail.png",loading:"<span>Memuat...</span>",counting:"<div>Memuat artikel...</div>",searching:"<span>Mencari...</span>"},w=window,d=document,el=function(id){return d.getElementById(id);},o={a:el('feed-order'),b:el('label-sorter').parentNode,c:el('post-searcher'),d:el('feed-q'),e:el('result-desc'),f:el('sitemap-container'),g:el('sitemap-nav'),h:d.getElementsByTagName('head')[0],i:0,j:null,k:'published',l:0,m:""},fn={a:function(){old=el('temporer-script');old.parentNode.removeChild(old);},b:function(param){var script=d.createElement('script');script.type="text/javascript";script.id="temporer-script";script.src=param;if(el('temporer-script'))fn.a();o.h.appendChild(script);},c:function(mode,tag,order){o.i++;o.e.innerHTML=cfg.counting;o.g.innerHTML=cfg[mode==1?"searching":"loading"];if(mode===0){fn.b(tag!==null?cfg.url+'/feeds/posts/summary/-/'+ tag+'?alt=json-in-script&start-index='+((o.i*cfg.maxResults)+ 1)+'&max-results='+ cfg.maxResults+'&orderby='+ order+'&callback=loadToc':cfg.url+'/feeds/posts/summary?alt=json-in-script&start-index='+((o.i*cfg.maxResults)+ 1)+'&max-results='+ cfg.maxResults+'&orderby='+ order+'&callback=loadToc');}else if(mode==1){fn.b(cfg.url+'/feeds/posts/summary?alt=json-in-script&start-index='+((o.i*cfg.maxResults)+ 1)+'&max-results='+ cfg.maxResults+'&q='+ tag+'&orderby='+ order+'&callback=loadToc');} o.j=(tag!==null)?tag:null;o.l=mode;o.a.disabled=true;o.b.children[0].disabled=true;},d:function(json){var _h;o.g.innerHTML="";o.e.innerHTML=o.l==1?'<span>Hasil penelusuran untuk kata kunci <b>&#8220;'+ o.m+'&#8221;</b> ('+ json.feed.openSearch$totalResults.$t+' Hasil)</span>':'<div>Total: '+ json.feed.openSearch$totalResults.$t+' Artikel</div>';if("entry"in json.feed){var a=json.feed.entry,b,c,_d,e="0 Komentar",f="",g;for(var i=0;i<cfg.maxResults;i++){if(i==a.length)break;b=a[i].title.$t;_d=("summary"in a[i])?a[i].summary.$t.replace(/<br ?\/?>/ig," ").replace(/<(.*?)>/g,"").replace(/<iframe/ig,"").substring(0,cfg.numChars):"";g=("media$thumbnail"in a[i])?a[i].media$thumbnail.url.replace(/.*?:\/\//g , "//").replace(/\/s[0-9]+\-c/,"\/s"+ cfg.thumbWidth+""):cfg.noImage.replace(/\/s[0-9]+\-c/,"\/s"+ cfg.thumbWidth+"");for(var j=0,jen=a[i].link.length;j<jen;j++){c=(a[i].link[j].rel=="alternate")?a[i].link[j].href:"#";} for(var k=0,ken=a[i].link.length;k<ken;k++){if(a[i].link[k].rel=="replies"&&a[i].link[k].type=="text/html"){e=a[i].link[k].title;break;}} _h=d.createElement('li');_h.innerHTML='<div class="inner"><img style="width:'+ cfg.thumbWidth+'px;height:'+ cfg.thumbHeight+'px;" src="'+ g+'" alt="'+ b+'"><a class="toc-title" href="'+ c+'" target="_blank" title="'+ b+'">'+ b+'</a><div class="news-text">'+ _d+'&hellip;<br style="clear:both;"></div></div>';o.f.appendChild(_h);} _h=d.createElement('a');_h.href='#load-more';_h.innerHTML=cfg.navText;_h.onclick=function(){fn.c(o.l,o.j,o.k);return false;};}else{_h=d.createElement('a');_h.href='#reset-content';_h.innerHTML=cfg.resetToc;_h.onclick=function(){o.i=-1;o.e.innerHTML=cfg.counting;o.f.innerHTML="";fn.c(0,null,'published');o.a.innerHTML=o.a.innerHTML;o.b.children[0].innerHTML=o.b.children[0].innerHTML;return false;};} o.g.appendChild(_h);o.a.disabled=false;o.b.children[0].disabled=false;},e:function(json){var a=json.feed.category,b='<select id="label-sorter"><option value="" selected disabled>Pilih Kategori...</option>';for(var i=0,len=a.length;i<len;i++){b+='<option value="'+ encodeURIComponent(a[i].term).replace(/%20/g, " ")+'">'+ encodeURIComponent(a[i].term).replace(/%20/g, " ")+'</option>';} b+='</select>';o.b.innerHTML=b;o.b.children[0].onchange=function(){o.i=-1;o.f.innerHTML="";o.g.innerHTML=cfg.loading;fn.c(0,this.value,o.k);};}};loadToc=fn.d;loadCategories=fn.e;fn.b(cfg.url+'/feeds/posts/summary?alt=json-in-script&start-index='+(o.i+ 1)+'&max-results='+ cfg.maxResults+'&orderby=published&callback=loadToc');fn.b(cfg.url+'/feeds/posts/summary?alt=json-in-script&max-results=0&orderby=published&callback=loadCategories');o.a.onchange=function(){o.i=-1;o.f.innerHTML="";o.g.innerHTML=cfg.counting;o.b.children[0].innerHTML=o.b.children[0].innerHTML;fn.c(0,null,this.value);o.k=this.value;};o.c.onsubmit=function(){o.i=-1;o.f.innerHTML="";o.m=o.d.value;fn.c(1,o.d.value,o.k);return false;};}};_toc.init();

</script>

<div class='clear'></div>

</div>

</div>

</div>

<div class='inline-ad'>

</div>

        </div></div>

</body>

</html>

(kredit kode kepada om antoncabon)

#4. Upload file html tersebut ke github. Setelah selesai klik kanan file itu dan “copy link address

#5. Paste link yang tadi di RawGit dan copy link yang berada di box kiri bawah.
daftar isi

#6. Lalu paste-kan di kode iframe ini :
<div class="img-width-400 img-center">
<amp-img width="400" height="400" layout="responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVMTOaYBOD9rExdmvvgycjYM57PBK6BOnZ0EWhP4celtIlDodkNtlALgkKDZteIdMQy2nJkfauMFKUGLIKALhAN3UG3FqdehNirBeOyWkDTKneOlalFfpnp4Ml-yNgsEJ5nwmNrMnFOser/s1600/dpx-logo-keren.png" width="300"></amp-img></div>

<amp-iframe allowfullscreen="" frameborder="0" height="700" layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups" src="ISIKAN KODE TADI DI SINI" width="700"> </amp-iframe>

#7. Ganti juga source gambar dan kelebarannya.

#8. Simpan kode yang sudah diedit tersebut di laman page di blog untuk sitemap. Sila preview terlebih dahulu. Setelah menurut kalian sesuai, publish.

Baca Juga: Merapikan (mengatur rata kanan-rata kiri) pada Postingn Blog AMP

Catatan: saya sengaja sisipkan gambar di atasnya, karena kalau tidak, maka sitemap tidak akan muncul, loading terus. Kalian bisa menggantinya dengan properti lain selain gambar, terserah.
Untuk demo, karena saya sudah mengganti sitemapnya, bisa dicek di KAMVRETMAP (Sitemap The Kamvret). Maaf, Adminnya udah ganti template. :)

Demikian cara membuat sitemap AMP sederhana versi lainnya. 

Membuat daftar isi valid AMP.

Sitemap atau daftar isi begitu penting kehadirannya di sebuah blog. Sebagai salah satu bagian navigasi buat pembaca agar mudah memindai artikel mana atau apa saja yang ia hendak baca. Atau sekedar lihat-lihat kalau seandainya ada artikel yang sedang mereka cari.

Bagi blog yang non-AMP rasanya bisa dibilang mudah membuat daftar isi atau sitemap untuk blognya. Namun untuk para pengguna template AMP akan sedikit menemui kesulitan apalagi kalau pakai custom domain. Seperti kata Admin Kompi Ajaib :
“Seperti kita ketahui bahwa ada beberapa komponen AMP HTML yang harus menggunakan HTTPS agar dapat berjalan. Komponen tersebut di antaranya adalah amp-iframe. Dan blogger dapat membuat sitemap blog dengan menggunakan amp-iframe dengan menghosting kode-kodenya terlebih dahulu dengan URL hosting dengan HTTPS seperti halnya cdn.rawgit dari Github.”

Kang Adhi membagikan tutorial untuk membuat sitemap di blognya Untuk yang mencari tutorial sitemap bagi amp blog, pasti sudah sempat mengintip blog beliau tersebut. Sila lihat di sana kalau penasaran. Apalagi untuk yang memakai custom domain.

Lantas saya cari-cari tutorial yang lain, yang, istilahnya, lebih sederhana dan mudah dipahami. Karena waktu kemarin-kemarin saya masih menggunakan domain blogspot. Saya pun berlabuh di kediaman digital miliknya om Antoncabon. Memang lebih sederhana, bisa ditengok di lapak (blog) beliau juga. Tapi saya sedikit menemui hambatan.

Baik, tidak berlama-lama, ini cara membuat sitemap valid AMP sederhana lainnya.

Langkah-langkahnya:

#1. Pastikan kalian mempunyai akun di Github atau penyedia hosting gratis lainnya. Cara registrasi dan pembuatan jelasnya, ada di lapak Kompi Ajaib.

#2. Pastikan di HTML template kalian sudah ada kode di bawah ini, di atas kode </head>:
<script async='async' custom-element='amp-iframe'src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'></script>
Tapi saya rasa di template amp html kalian sudah tersimpan kode tersebut. Kalau belum, sisipkan segera.

#3. Salin kode di bawah ini di notepad biasa atau notepad++, ganti deadpixl.blogspot.com dengan alamat blog kamu, lalu simpan dalam format html. Kasih nama terserah, misal daftarisi.html .  Saya sendiri juga suka menggunakan notepad++ kalau urusan html.




<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Sitemap</title>

<meta content='width=device-width, initial-scale=1' name='viewport'>

<style>

/* Sitemaps */ #sitemap-tab{padding:7px 10px;margin:0 auto 20px} #sitemap-tab table{width:auto;margin:0 auto} #sitemap-tab form{font:inherit} #sitemap-tab label{display:block;text-align:right;margin:0 10px 0 0;padding:4px 0 0} #sitemap-tab select[disabled]{opacity:.4} #post-searcher{display:block;margin:0;padding:0} #sitemap-tab input{width:100%;border:1px solid #dedede;border-radius:5px;margin:0;padding:5px;text-transform:capitalize!important;outline:0;color:#333!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} #sitemap-tab select{width:100%;border:1px solid #dedede;border-radius:5px;margin:0 0 5px;padding:5px;text-transform:capitalize!important;outline:0;color:#333!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} #sitemap-tab select option{min-height:1.4em!important;} #sitemap-tab input#feed-q{padding:5px 10px!important;} #sitemap-container{background:#fff;display:block;clear:both;margin:0;padding:0;list-style:none;overflow:hidden;position:relative;border-top:none} #sitemap-container li{list-style:none;margin:0;padding:0;display:inline} #sitemap-container li a{text-decoration:none;color:#2C2C2C;font-weight:bold;font-size:16px} #sitemap-container li a:hover{text-decoration:none;color:#E94141} #sitemap-container li img{float:left;margin:0 15px 15px 0;padding:0;width:70px;height:50px;!important} #sitemap-nav{margin:10px 0 30px;text-align:center;font-weight:500;width:100%} #sitemap-nav a,#sitemap-nav span{color:#fff;text-decoration:none;display:block;opacity:.8} #sitemap-nav a:hover,#sitemap-nav span:hover{opacity:1} #sitemap-nav span{cursor:wait} @media (max-width:600px){#sitemap-tab table{margin:0 auto;width:100%} #sitemap-container,#sitemap-tab{margin:0 auto} #sitemap-container li .inner{margin:5px auto;height:auto;} #SitemaContainer li{float:none;display:block;width:auto;height:auto} #sitemap-container li .news-text, #sitemapContainer:after,#sitemap-container li img{display:none!important}

</style>

</head>

<body>



<div id="sitemap-tab">



  <table>

    <tbody>

      <tr>

        <td>

          <label for="feed-order">Urutkan artikel berdasarkan:</label>

        </td>

        <td>

          <select id="feed-order">

            <option selected="" value="published">Artikel terbaru</option>

            <option value="updated">Artikel yang terakhir di update</option>

          </select>

        </td>

      </tr>

      <tr>

        <td>

          <label for="label-sorter">Filter artikel berdasarkan kategori:</label>

        </td>

        <td>

          <select disabled="" id="label-sorter">

            <option selected="">Loading....</option>

          </select>

        </td>

      </tr>

      <tr>

        <td>

          <label for="feed-q">Cari artikel dengan kata kunci:</label>

        </td>

        <td>

          <form id="post-searcher">

            <input id="feed-q" placeholder="Ketik dan tekan ENTER" type="text" />

          </form>

        </td>

      </tr>

    </tbody>

  </table>

</div>

<br />

<header id="result-desc"></header>

<br />

<ul id="sitemap-container"></ul>

<div id="sitemap-nav">

</div>



<script type='text/javaScript'>

document.write;var loadToc,loadCategories,_toc={init:function(){var cfg={url:'https://deadpixl.blogspot.com/',maxResults:10,numChars:270,thumbWidth:140,thumbHeight:95,navText:"Tampilkan artikel selanjutnya &#9660;",resetToc:"Kembali ke Awal",noImage:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4nfsafh80Y9SP1x6cdaeAGdFMTwSyoFT2K27oCO19R-F6jDL-NX8fY_2U_0hsd558czTWJ9DTtOMZ3809hCzYtqgYpI_zd0ipPw2WZ49PvEYd29WKE4o-1V1WUBiQ3zCfDX1g_fbHPDV0/s1100/no-thumbnail.png",loading:"<span>Memuat...</span>",counting:"<div>Memuat artikel...</div>",searching:"<span>Mencari...</span>"},w=window,d=document,el=function(id){return d.getElementById(id);},o={a:el('feed-order'),b:el('label-sorter').parentNode,c:el('post-searcher'),d:el('feed-q'),e:el('result-desc'),f:el('sitemap-container'),g:el('sitemap-nav'),h:d.getElementsByTagName('head')[0],i:0,j:null,k:'published',l:0,m:""},fn={a:function(){old=el('temporer-script');old.parentNode.removeChild(old);},b:function(param){var script=d.createElement('script');script.type="text/javascript";script.id="temporer-script";script.src=param;if(el('temporer-script'))fn.a();o.h.appendChild(script);},c:function(mode,tag,order){o.i++;o.e.innerHTML=cfg.counting;o.g.innerHTML=cfg[mode==1?"searching":"loading"];if(mode===0){fn.b(tag!==null?cfg.url+'/feeds/posts/summary/-/'+ tag+'?alt=json-in-script&start-index='+((o.i*cfg.maxResults)+ 1)+'&max-results='+ cfg.maxResults+'&orderby='+ order+'&callback=loadToc':cfg.url+'/feeds/posts/summary?alt=json-in-script&start-index='+((o.i*cfg.maxResults)+ 1)+'&max-results='+ cfg.maxResults+'&orderby='+ order+'&callback=loadToc');}else if(mode==1){fn.b(cfg.url+'/feeds/posts/summary?alt=json-in-script&start-index='+((o.i*cfg.maxResults)+ 1)+'&max-results='+ cfg.maxResults+'&q='+ tag+'&orderby='+ order+'&callback=loadToc');} o.j=(tag!==null)?tag:null;o.l=mode;o.a.disabled=true;o.b.children[0].disabled=true;},d:function(json){var _h;o.g.innerHTML="";o.e.innerHTML=o.l==1?'<span>Hasil penelusuran untuk kata kunci <b>&#8220;'+ o.m+'&#8221;</b> ('+ json.feed.openSearch$totalResults.$t+' Hasil)</span>':'<div>Total: '+ json.feed.openSearch$totalResults.$t+' Artikel</div>';if("entry"in json.feed){var a=json.feed.entry,b,c,_d,e="0 Komentar",f="",g;for(var i=0;i<cfg.maxResults;i++){if(i==a.length)break;b=a[i].title.$t;_d=("summary"in a[i])?a[i].summary.$t.replace(/<br ?\/?>/ig," ").replace(/<(.*?)>/g,"").replace(/<iframe/ig,"").substring(0,cfg.numChars):"";g=("media$thumbnail"in a[i])?a[i].media$thumbnail.url.replace(/.*?:\/\//g , "//").replace(/\/s[0-9]+\-c/,"\/s"+ cfg.thumbWidth+""):cfg.noImage.replace(/\/s[0-9]+\-c/,"\/s"+ cfg.thumbWidth+"");for(var j=0,jen=a[i].link.length;j<jen;j++){c=(a[i].link[j].rel=="alternate")?a[i].link[j].href:"#";} for(var k=0,ken=a[i].link.length;k<ken;k++){if(a[i].link[k].rel=="replies"&&a[i].link[k].type=="text/html"){e=a[i].link[k].title;break;}} _h=d.createElement('li');_h.innerHTML='<div class="inner"><img style="width:'+ cfg.thumbWidth+'px;height:'+ cfg.thumbHeight+'px;" src="'+ g+'" alt="'+ b+'"><a class="toc-title" href="'+ c+'" target="_blank" title="'+ b+'">'+ b+'</a><div class="news-text">'+ _d+'&hellip;<br style="clear:both;"></div></div>';o.f.appendChild(_h);} _h=d.createElement('a');_h.href='#load-more';_h.innerHTML=cfg.navText;_h.onclick=function(){fn.c(o.l,o.j,o.k);return false;};}else{_h=d.createElement('a');_h.href='#reset-content';_h.innerHTML=cfg.resetToc;_h.onclick=function(){o.i=-1;o.e.innerHTML=cfg.counting;o.f.innerHTML="";fn.c(0,null,'published');o.a.innerHTML=o.a.innerHTML;o.b.children[0].innerHTML=o.b.children[0].innerHTML;return false;};} o.g.appendChild(_h);o.a.disabled=false;o.b.children[0].disabled=false;},e:function(json){var a=json.feed.category,b='<select id="label-sorter"><option value="" selected disabled>Pilih Kategori...</option>';for(var i=0,len=a.length;i<len;i++){b+='<option value="'+ encodeURIComponent(a[i].term).replace(/%20/g, " ")+'">'+ encodeURIComponent(a[i].term).replace(/%20/g, " ")+'</option>';} b+='</select>';o.b.innerHTML=b;o.b.children[0].onchange=function(){o.i=-1;o.f.innerHTML="";o.g.innerHTML=cfg.loading;fn.c(0,this.value,o.k);};}};loadToc=fn.d;loadCategories=fn.e;fn.b(cfg.url+'/feeds/posts/summary?alt=json-in-script&start-index='+(o.i+ 1)+'&max-results='+ cfg.maxResults+'&orderby=published&callback=loadToc');fn.b(cfg.url+'/feeds/posts/summary?alt=json-in-script&max-results=0&orderby=published&callback=loadCategories');o.a.onchange=function(){o.i=-1;o.f.innerHTML="";o.g.innerHTML=cfg.counting;o.b.children[0].innerHTML=o.b.children[0].innerHTML;fn.c(0,null,this.value);o.k=this.value;};o.c.onsubmit=function(){o.i=-1;o.f.innerHTML="";o.m=o.d.value;fn.c(1,o.d.value,o.k);return false;};}};_toc.init();

</script>

<div class='clear'></div>

</div>

</div>

</div>

<div class='inline-ad'>

</div>

        </div></div>

</body>

</html>

(kredit kode kepada om antoncabon)

#4. Upload file html tersebut ke github. Setelah selesai klik kanan file itu dan “copy link address

#5. Paste link yang tadi di RawGit dan copy link yang berada di box kiri bawah.
daftar isi

#6. Lalu paste-kan di kode iframe ini :
<div class="img-width-400 img-center">
<amp-img width="400" height="400" layout="responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVMTOaYBOD9rExdmvvgycjYM57PBK6BOnZ0EWhP4celtIlDodkNtlALgkKDZteIdMQy2nJkfauMFKUGLIKALhAN3UG3FqdehNirBeOyWkDTKneOlalFfpnp4Ml-yNgsEJ5nwmNrMnFOser/s1600/dpx-logo-keren.png" width="300"></amp-img></div>

<amp-iframe allowfullscreen="" frameborder="0" height="700" layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups" src="ISIKAN KODE TADI DI SINI" width="700"> </amp-iframe>

#7. Ganti juga source gambar dan kelebarannya.

#8. Simpan kode yang sudah diedit tersebut di laman page di blog untuk sitemap. Sila preview terlebih dahulu. Setelah menurut kalian sesuai, publish.

Baca Juga: Merapikan (mengatur rata kanan-rata kiri) pada Postingn Blog AMP

Catatan: saya sengaja sisipkan gambar di atasnya, karena kalau tidak, maka sitemap tidak akan muncul, loading terus. Kalian bisa menggantinya dengan properti lain selain gambar, terserah.
Untuk demo, karena saya sudah mengganti sitemapnya, bisa dicek di KAMVRETMAP (Sitemap The Kamvret). Maaf, Adminnya udah ganti template. :)

Demikian cara membuat sitemap AMP sederhana versi lainnya. 

Salah Ganti Template Blog Mempengaruhi Google Index

Artikel blog, Artikel Others,

Apa benar begitu?

Pertama kita harus tahu dulu sifat-sifat template blog yang ada. Suka ada istilah template mempengaruhi SEO, berpengaruh di mesin pencari google. Mungkin kalian juga pernah lihat sewaktu mencari custom template buat blog kalian di internet, kalian menemukan istilah, katanya pakai template ‘anu’, artikel yang kita post jadi cepat muncul di halaman pertama mesin pencari google.


Benarkah?
Lepas dari itu, saya tidak tahu. Mungkin iya, tapi entah seagresif apa pengaruh template tersebut bisa membuat artikel kita nangkring di pejwan. Yang saya benar pernah rasakan adalah sifat template berdasarkan kelasnya: standar, responsive dan lainnya. Dari kecepatan loadingnya, dari bagaimana template itu menghandle tampilan ponsel, web, dsb. Itu saya baru yakin pengaruhnya memang besar sekali. Juga lepas dari masalah template premium, gretongan, kloningan dan korengan . Hihi, kalian mungkin sudah tahu sendiri perbedaan di sisi itu.

Denger-denger, perbandingan template-template itu, dari yang standar, responsive dan yang terbaru, template AMP sangat krusial. Lebih cepat empat kali dari pada kecepatan template responsive. CMIIW.

Tapi balik lagi ke topik permasalahan, apakah benar ganti template yang salah bisa mengurangi jumlah artikel kita yang sudah terindex di google? 

Sebelum saya jawab, lihat gambar di bawah ini:
google index menurun

Gambar itu adalah penghitung artikel yang sudah submitted dan indexed (di-submit dan ter-index) pada webmaster tool. Artikel yang sudah di-submit berjumlah 50 buah, sedangkan yang baru terindex cuma berjumlah 13 buah. Itu penurunan yang parah, karena sebelumnya artikel yang terindex sudah sekitar 46. Saya kaget sewaktu pertama kali melihatnya.
google index menurun

Kok bisa?

Lalu saya ingat itu terjadi sewaktu saya ganti template (ketika terkena error bx) kemarin, Selama dua hari saya menggunakan template bawaan dari google (stock template). Sebelumnya saya menggunakan custom template AMP buatan Kang Adhi Kompi Ajaib.

Bisa liat permasalah error bx dan penyeleseiannya di: Memperbaiki error bx-70ur5u

Selama dua hari itu pula, penayangan post blog saya menurun drastis di dashboard. Saya tidak habis pikir. Apakah karena sebelumnya saya menggunakan template AMP lalu (terjebak) menggunakan stock template, itu memang pengaruhnya besar?

Karena selintas, memang jelas pengaruhnya dari tampilan, gambar-gambar di blog saya tidak akan tampil di stock template atau pun di template responsive karena beda penulisan tag gambar. Di template AMP kita menggunakan img. Beda dengan, misal, pengalihan dari template responsive ke stock template, tidak akan berpengaruh kepada gambar yang diposting. Dalam catatan akan tetap nongol.

Benarkah itu masalahnya, karena rasanya, saya pun dulu sering gonta-ganti template dan tidak pernah berpengaruh besar sampai ke artikel yang diindex mesin pencari. Apakah karena saya menggunakan AMP template sebelum terjebak di stock template?

Well, sebaiknya saya ngopi dulu, semoga artikel saya cepat terindex kembali saja.

Sila share di kolom komentar kalau pernah mengalami pengalaman yang sama :)

Apa benar begitu?

Pertama kita harus tahu dulu sifat-sifat template blog yang ada. Suka ada istilah template mempengaruhi SEO, berpengaruh di mesin pencari google. Mungkin kalian juga pernah lihat sewaktu mencari custom template buat blog kalian di internet, kalian menemukan istilah, katanya pakai template ‘anu’, artikel yang kita post jadi cepat muncul di halaman pertama mesin pencari google.


Benarkah?
Lepas dari itu, saya tidak tahu. Mungkin iya, tapi entah seagresif apa pengaruh template tersebut bisa membuat artikel kita nangkring di pejwan. Yang saya benar pernah rasakan adalah sifat template berdasarkan kelasnya: standar, responsive dan lainnya. Dari kecepatan loadingnya, dari bagaimana template itu menghandle tampilan ponsel, web, dsb. Itu saya baru yakin pengaruhnya memang besar sekali. Juga lepas dari masalah template premium, gretongan, kloningan dan korengan . Hihi, kalian mungkin sudah tahu sendiri perbedaan di sisi itu.

Denger-denger, perbandingan template-template itu, dari yang standar, responsive dan yang terbaru, template AMP sangat krusial. Lebih cepat empat kali dari pada kecepatan template responsive. CMIIW.

Tapi balik lagi ke topik permasalahan, apakah benar ganti template yang salah bisa mengurangi jumlah artikel kita yang sudah terindex di google? 

Sebelum saya jawab, lihat gambar di bawah ini:
google index menurun

Gambar itu adalah penghitung artikel yang sudah submitted dan indexed (di-submit dan ter-index) pada webmaster tool. Artikel yang sudah di-submit berjumlah 50 buah, sedangkan yang baru terindex cuma berjumlah 13 buah. Itu penurunan yang parah, karena sebelumnya artikel yang terindex sudah sekitar 46. Saya kaget sewaktu pertama kali melihatnya.
google index menurun

Kok bisa?

Lalu saya ingat itu terjadi sewaktu saya ganti template (ketika terkena error bx) kemarin, Selama dua hari saya menggunakan template bawaan dari google (stock template). Sebelumnya saya menggunakan custom template AMP buatan Kang Adhi Kompi Ajaib.

Bisa liat permasalah error bx dan penyeleseiannya di: Memperbaiki error bx-70ur5u

Selama dua hari itu pula, penayangan post blog saya menurun drastis di dashboard. Saya tidak habis pikir. Apakah karena sebelumnya saya menggunakan template AMP lalu (terjebak) menggunakan stock template, itu memang pengaruhnya besar?

Karena selintas, memang jelas pengaruhnya dari tampilan, gambar-gambar di blog saya tidak akan tampil di stock template atau pun di template responsive karena beda penulisan tag gambar. Di template AMP kita menggunakan img. Beda dengan, misal, pengalihan dari template responsive ke stock template, tidak akan berpengaruh kepada gambar yang diposting. Dalam catatan akan tetap nongol.

Benarkah itu masalahnya, karena rasanya, saya pun dulu sering gonta-ganti template dan tidak pernah berpengaruh besar sampai ke artikel yang diindex mesin pencari. Apakah karena saya menggunakan AMP template sebelum terjebak di stock template?

Well, sebaiknya saya ngopi dulu, semoga artikel saya cepat terindex kembali saja.

Sila share di kolom komentar kalau pernah mengalami pengalaman yang sama :)

Memperbaiki Error bX-70ur5u

Artikel blog, Artikel Others,

Apa itu error bX-70ur5u? 

Kalian blogger mungkin sudah tahu dan hapal jenis error semacam ini. Biasanya error bX ini sering muncul ketika akan upload/mengganti template blogger kalian atau juga dalam hal lain. Namun apa sebenarnya error ini, apa yang menyebabkannya? Karena kadang kemarin-kemarin normal saja ketika kita edit template melalui “edit html” atau langsung upload via menu “cadangkan/pulihkan”.

Well, kita dengar apa yang mereka bilang soal error bX ini:

“Bx-error codes are mysterious but annoying error which has become every blogger users nightmare and that puts them from using Blogger.” | deeepak kamat”
 “Bx-error codes are the most evil thing on Blogger and no user want to face it, just to get rid of it you can try different ways, which you will learn in.....”

Jadi error semacam ini udah lumrah (ijinkan saya ketawa meringis dulu), misterius tetapi lumayan bikin risih dan mengganggu. Jadi momok menakutkan bagi para blogger (benarkah?) dan ini, “yang paling jahat, yang paling iblis.” [*dies*]

Ini berdasarkan pengalaman, saya akan ceritakan kronologinya. Waktu itu saya sedang sibuk mengedit template blog. Template blog saya rubah dari responsif ke template AMP valid. Waktu yang dihabiskan pun hampir lumayan lama, dari pengeditan postingan, perubahan penulisan kode untuk gambar, dan lain-lain, kalian mungkin lebih paham. Saya hampir ikutan botak seperti Kang Adhi Kompi Ajaib karena template AMP ini, haha, (salute buat beliau).

Lalu dari seringnya saya edit html, muncullah error bX-70ur5u. Tidak tahu persis apa penyebabnya. Gejalanya yang muncul pertama adalah saya tidak bisa edit template sama sekali, meskipun saya edit langsung dari laman dashboard blogger (box edit html), ataupun lewat notepad terlebih dahulu. Ketika di-saving, laman itu tidak memberitahukan error apapun. Biasanya kalau ada masalah mark-up, misal kurang penutup <div> atau apa, akan diberitahukan dengan huruf merah langsung di atas box edit html. Tetapi ini tidak sama sekali. Tidak ada peringatan, tidak ada perubahan juga di template. Intinya, template yang sudah kita edit seperti tidak tersimpan.

Saya penasaran. Padahal waktu itu saya cuma edit tulisan yang muncul di bagian atas artikel, <p>blablablabla</p> tapi selalu gagal ketika di-save. Lalu saya coba ganti dengan template lain, tapi masih custom template. GAGAL. Lalu saya coba ganti dengan custom responsive, masih GAGAL. Metode penggantian template yang biasa saya lakukan adalah copas dari xml langsung ke box edit html. Saya pun mencoba upload lewat menu “Cadangkan/Pulihkan” tetap saja gagal dan malah mendapat pop up pemberitahuan error bX-70ur5u. Pun ketika saya ganti browser dari chrome ke Internet Explore. Mozzila pun sama saja ketika berkali-kali saya refresh laman.

Saya belum stress, karena saya cuma ingin mengubah sedikit dari template yang sedang saya gunakan pada waktu itu. Cuma saya masih penasaran. Akhirnya saya ganti template yang sedang saya gunakan dengan template bawaan blog dengan niat “memancing”. Lalu perubahan terjadi, template berhasil diganti. Tampilan blog saya jadi simpel tentunya. Dan kemudian, saya coba ganti dengan template semula yang sudah saya edit. Dan GAGAL.

Di tahap ini saya mulai stress karena selain sudah coba metode ganti browser, bersihkan caches dan cookies, lepas ekstension, ganti template custom dengan yang lain, jungkir balik, googling sana-sini, mindai topik forum, tidak ada solusi yang berarti. Hasilnya Nihil. Bahkan saya coba ganti akun dengan masuk ke blog lain (masih dalam 1 email) tetap gagal ganti template. Pun ketika saya membuat blog baru (beda email) tetap saja saya tidak bisa ganti template dan malah keluar error bx itu bila upload xml. Dan dalam dua hari saya tidak bisa apa-apa. Lalu apa yang terjadi, pengindexan artikel blog saya di mesin pencari google, menurun parah. Nasib [cries].

Baca; Salah ganti template google index turun

And then, how to fix bx-70ur5u [?] Emm, bisa diakali kalau sekadar mau edit template. 

fix bx-70ur5u

Oke cukup curhatnya, ini solusi dari pengalaman saya untuk memperbaiki error bx-70ur5u.  Ternyata simpel. Simpel nggak simpel sii. Yang mesti diingat perjuangannya untuk bisa ke tahap yang rupanya simpel itu [smileonta]

#1. Ubah template ke template bawaan blogger terlebih dahulu (terserah yang mana saja).
#2. Buka / gunakan browser mozzila firefox, masuk ke dashbor, pilih template.
#3. Untuk upload template yang sudah kalian edit, pakai sistem copy / paste template xml ke box edit html (jangan menggunakan metode upload via “cadangkan/pulihkan”) untuk buka format xml, bisa gunakan notepad++.
fix bx-70ur5u

#4. Sebelum kalian “save”, klik terlebih dahulu fitur “Format Template”. Tunggu sebentar jangan langsung di-save.
fix bx-70ur5u
#5. Akan muncul POP UP dari mozzila (biasanya sii) “unrensponsive script”. Nah di sini kalian klik “Stop Script”. Lalu dialog box itu akan menutup.
fix bx-70ur5u #6. Tunggu beberapa jenak, setelah itu coba simpan / save template.
fix bx-70ur5u#7. DONE!

Ini hanya trik untuk yang mau edit template dan terkendala sama error tersebut. Karena toh error itu masih ada. Semoga membantu.




Apa itu error bX-70ur5u? 

Kalian blogger mungkin sudah tahu dan hapal jenis error semacam ini. Biasanya error bX ini sering muncul ketika akan upload/mengganti template blogger kalian atau juga dalam hal lain. Namun apa sebenarnya error ini, apa yang menyebabkannya? Karena kadang kemarin-kemarin normal saja ketika kita edit template melalui “edit html” atau langsung upload via menu “cadangkan/pulihkan”.

Well, kita dengar apa yang mereka bilang soal error bX ini:

“Bx-error codes are mysterious but annoying error which has become every blogger users nightmare and that puts them from using Blogger.” | deeepak kamat”
 “Bx-error codes are the most evil thing on Blogger and no user want to face it, just to get rid of it you can try different ways, which you will learn in.....”

Jadi error semacam ini udah lumrah (ijinkan saya ketawa meringis dulu), misterius tetapi lumayan bikin risih dan mengganggu. Jadi momok menakutkan bagi para blogger (benarkah?) dan ini, “yang paling jahat, yang paling iblis.” [*dies*]

Ini berdasarkan pengalaman, saya akan ceritakan kronologinya. Waktu itu saya sedang sibuk mengedit template blog. Template blog saya rubah dari responsif ke template AMP valid. Waktu yang dihabiskan pun hampir lumayan lama, dari pengeditan postingan, perubahan penulisan kode untuk gambar, dan lain-lain, kalian mungkin lebih paham. Saya hampir ikutan botak seperti Kang Adhi Kompi Ajaib karena template AMP ini, haha, (salute buat beliau).

Lalu dari seringnya saya edit html, muncullah error bX-70ur5u. Tidak tahu persis apa penyebabnya. Gejalanya yang muncul pertama adalah saya tidak bisa edit template sama sekali, meskipun saya edit langsung dari laman dashboard blogger (box edit html), ataupun lewat notepad terlebih dahulu. Ketika di-saving, laman itu tidak memberitahukan error apapun. Biasanya kalau ada masalah mark-up, misal kurang penutup <div> atau apa, akan diberitahukan dengan huruf merah langsung di atas box edit html. Tetapi ini tidak sama sekali. Tidak ada peringatan, tidak ada perubahan juga di template. Intinya, template yang sudah kita edit seperti tidak tersimpan.

Saya penasaran. Padahal waktu itu saya cuma edit tulisan yang muncul di bagian atas artikel, <p>blablablabla</p> tapi selalu gagal ketika di-save. Lalu saya coba ganti dengan template lain, tapi masih custom template. GAGAL. Lalu saya coba ganti dengan custom responsive, masih GAGAL. Metode penggantian template yang biasa saya lakukan adalah copas dari xml langsung ke box edit html. Saya pun mencoba upload lewat menu “Cadangkan/Pulihkan” tetap saja gagal dan malah mendapat pop up pemberitahuan error bX-70ur5u. Pun ketika saya ganti browser dari chrome ke Internet Explore. Mozzila pun sama saja ketika berkali-kali saya refresh laman.

Saya belum stress, karena saya cuma ingin mengubah sedikit dari template yang sedang saya gunakan pada waktu itu. Cuma saya masih penasaran. Akhirnya saya ganti template yang sedang saya gunakan dengan template bawaan blog dengan niat “memancing”. Lalu perubahan terjadi, template berhasil diganti. Tampilan blog saya jadi simpel tentunya. Dan kemudian, saya coba ganti dengan template semula yang sudah saya edit. Dan GAGAL.

Di tahap ini saya mulai stress karena selain sudah coba metode ganti browser, bersihkan caches dan cookies, lepas ekstension, ganti template custom dengan yang lain, jungkir balik, googling sana-sini, mindai topik forum, tidak ada solusi yang berarti. Hasilnya Nihil. Bahkan saya coba ganti akun dengan masuk ke blog lain (masih dalam 1 email) tetap gagal ganti template. Pun ketika saya membuat blog baru (beda email) tetap saja saya tidak bisa ganti template dan malah keluar error bx itu bila upload xml. Dan dalam dua hari saya tidak bisa apa-apa. Lalu apa yang terjadi, pengindexan artikel blog saya di mesin pencari google, menurun parah. Nasib [cries].

Baca; Salah ganti template google index turun

And then, how to fix bx-70ur5u [?] Emm, bisa diakali kalau sekadar mau edit template. 

fix bx-70ur5u

Oke cukup curhatnya, ini solusi dari pengalaman saya untuk memperbaiki error bx-70ur5u.  Ternyata simpel. Simpel nggak simpel sii. Yang mesti diingat perjuangannya untuk bisa ke tahap yang rupanya simpel itu [smileonta]

#1. Ubah template ke template bawaan blogger terlebih dahulu (terserah yang mana saja).
#2. Buka / gunakan browser mozzila firefox, masuk ke dashbor, pilih template.
#3. Untuk upload template yang sudah kalian edit, pakai sistem copy / paste template xml ke box edit html (jangan menggunakan metode upload via “cadangkan/pulihkan”) untuk buka format xml, bisa gunakan notepad++.
fix bx-70ur5u

#4. Sebelum kalian “save”, klik terlebih dahulu fitur “Format Template”. Tunggu sebentar jangan langsung di-save.
fix bx-70ur5u
#5. Akan muncul POP UP dari mozzila (biasanya sii) “unrensponsive script”. Nah di sini kalian klik “Stop Script”. Lalu dialog box itu akan menutup.
fix bx-70ur5u #6. Tunggu beberapa jenak, setelah itu coba simpan / save template.
fix bx-70ur5u#7. DONE!

Ini hanya trik untuk yang mau edit template dan terkendala sama error tersebut. Karena toh error itu masih ada. Semoga membantu.



Popular Games