Membuat Sitemap Blogger menggunakan BloggerScript

Membuat Sitemap Blogger menggunakan BloggerScript

Sebelum nya saya telah membagikan BloggerScript buatan yang berfungsi untuk mempermudah dalam penulisan script di web berbasis blogger.

Sekarang saya akan membuat sitemap menggunakan BloggerScript tersebut, jadi sebelum memulai silahkan pasang dulu script nya cek di sini.

Membuat Sitemap

Pertama buatlah variable dengan nama terserah kalian misalkan "sitemap0", seperti berikut.

var sitemap0 = new BloggerScript();

Selanjut nya buatlah function untuk kerangka sitemap nya, seperti berikut.

function kerangkaSitemap(e) {
  let html = '';
  e.forEach(item => {
    html += `<li><a href='${item.link}' title='${item.title}'>${item.title}</a></li>`;
  })
  document.getElementById('output').innerHTML = html;
}
key Desc
item.title Mengambil judul postingan
item.link Mengambil link postingana
item.image Mengambil gambar postingan.
item.date Mengambil tanggal postingan.
item.author berupa object untuk mengambil nama, link dan gambar author. (item.author.name, item.author.link, item.author.image)

Lanjut! Sekarang adalah script pemanggil nya dan jika di satukan akan menjadi begini.

var sitemap0 = new BloggerScript();
function kerangkaSitemap(e) {
  let html = '';
  e.forEach(item => {
    html += `<li><a href='${item.link}' title='${item.title}'>${item.title}</a></li>`;
  })
  document.getElementById('output').innerHTML = html;
}
sitemap0.sitemap('/feeds/posts/summary', kerangkaSitemap);

Yang di tandai adalah script pemanggil nya. dan berikut penjelasan isi nya.

Data Desc
/feeds/posts/summary ini adalah link untuk mengambil feed nya, note: jika ingin yang di ambil berdasarkan label tertentu maka tulisan nya begini /feeds/posts/summary/-/nama_label
kerangkaSitemap nama function untuk membuat kerangka sitemap.

Dalam menggunakan BloggerScript ini kalian akan di permudah dalam mengambil daftar postingan. Adapun kesulitan nya hanya dalam membuat kerangka nya yaitu mengaplikasikan daftar post ke dalam html. Di atas adalah contoh sederhana nya saja.

Bonus: Sitemap berdasarkan abjad.

Kalian bisa mempelajari script di bawah untuk membuat kerangka sitemap yang lebih flexibel atau lebih mudah.

<style>#siteMap1{font-size:14px;font-weight:400}#siteMap1 .judul{font-size:150%;background-color:#008c5f;color:#fff;font-weight:600;text-align:center;margin-bottom:20px;padding:15px}#siteMap1 a{color:#666;text-decoration:none;transition:all .3s ease;white-space:nowrap;overflow:hidden}#siteMap1 a:hover{color:#000}#siteMap1 .isi .abjad{background-color:#36688a;color:#fff;padding:10px 15px;font-size:110%;font-weight:600;text-transform:uppercase;position:relative}#siteMap1 .isi .abjad:nth-of-type(even){background-color:#b53428}#siteMap1 .isi .abjad #top:before{content:'';width:12px;height:calc(100% - 20px);position:absolute;right:0;top:0;padding:10px;cursor:pointer;background:rgba(0,0,0,.2) url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15,20H9V12H4.16L12,4.16L19.84,12H15V20Z' fill='%23fff'/%3E%3C/svg%3E") center/20px no-repeat}#siteMap1 ol,#siteMap1 ol li{list-style-type:none}#siteMap1 .nav ol{margin:0 0 15px;padding:0;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}#siteMap1 .nav ol li{background-color:#444;color:#fff;padding:7px 0;cursor:pointer;margin:0 5px 5px 0;text-align:center;text-transform:uppercase;width:40px}#siteMap1 .nav ol li:last-child{margin-right:0}#siteMap1 .isi ol{margin:0 0 20px;padding:0;border:1px solid #ccc;border-top:0;overflow:hidden}#siteMap1 .isi ol li{color:#666;list-style-type:none;margin:0;padding:10px;line-height:1.5em;display:flex;width:47%;float:left}#siteMap1 .isi ol li:before{content:'';width:20px;height:20px;min-width:20px;min-height:20px;margin:0;vertical-align:-5px;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='%234b4f56'/%3E%3C/svg%3E") center no-repeat;transition:.4s all ease;-webkit-transition:.4s all ease;-moz-transition:.4s all ease;-ms-transition:.4s all ease;-o-transition:.4s all ease}#siteMap1 .isi ol li:hover:before{transform:rotate(-36deg);-webkit-transform:rotate(-36deg);-moz-transform:rotate(-36deg);-ms-transform:rotate(-36deg);-o-transform:rotate(-36deg)}@media screen and (max-width:680px){#siteMap1 .isi ol li{width:100%;float:none}}@media screen and (max-width:480px){#siteMap1{font-size:13px}#siteMap1 .judul{padding:10px}#siteMap1 .isi .abjad{padding:7px 15px}}@media screen and (max-width:360px){#siteMap1{font-size:12px}#siteMap1 .judul{padding:10px}#siteMap1 .isi .abjad{padding:7px 12px}#siteMap1 .isi ol li{padding:7px 12px}}</style>
<div id="siteMap1"></div>
<script type="text/javascript">/*<![CDATA[*/
  "use strict";var siteMap1=new BloggerScript;siteMap1.siteMap("/feeds/posts/summary",function(a){var g="",c="",d="",e=new Array,b=new Array;for(var f in a.forEach(function(a){var b=a.title.charAt(0).toLowerCase();-1==g.indexOf(b)?(g+=b,e[b]=[{title:a.title,link:a.link}]):e[b].push({title:a.title,link:a.link})}),e)b.push(f);b.sort().forEach(function(b){d+='<div class="abjad"><span data-value="'.concat(b,'">').concat(b,'</span><span id="top" title="Back to Top"></span></div><ol>');for(var a=0,g=e[b];a<g.length;a++){var f=g.sort(function(a,b){return a.title>b.title?1:-1});d+='<li><a href="'.concat(f[a].link,'" title="').concat(f[a].title,'">').concat(f[a].title,"</a></li>")}d+="</ol>",c+="<li>".concat(b,"</li>")}),document.getElementById("siteMap1").innerHTML='<div class="judul">Total Post: '.concat(a.length,'</div><div class="nav"><ol>').concat(c,'</ol></div><div class="isi">').concat(d,"</div>"),document.querySelectorAll(".nav ol li").forEach(function(a){a.onclick=function(a){var b=a.currentTarget;document.querySelector('.isi .abjad [data-value="'.concat(b.innerHTML,'"]')).parentNode.scrollIntoView({behavior:"instant",block:"start"})}}),document.querySelectorAll(".isi .abjad #top").forEach(function(a){a.onclick=function(){document.querySelector(".nav").scrollIntoView({behavior:"instant",block:"start"})}})})
/*]]>*/</script>
Bisa kalian pasang langsung lewat Halaman atau Postingan. Demo di sini.

Artikel Terkait

5 komentar

Ikuti format penulisan berikut untuk menyisipkan elemen tambahan.
  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong>

Emoticon

  • Berkas Kita
    10 Juli 2022 14.27
    Profil: https://www.blogger.com/profile/05392949523370725401
    wahh keren bang, batasnya sampek berapa ini bang 100, 200, 999 atau lebih
    • Шош. Сом
      10 Juli 2022 14.31
      Profil: https://www.blogger.com/profile/11131198046075365419
      tanpa batas
  • Mangenak
    28 Juli 2022 17.01
    Profil: https://www.blogger.com/profile/16844503105431258165
    min klo lebih dari 2 labelnya gimana caranya?
    • Шош. Сом
      28 Juli 2022 18.01
      Profil: https://www.blogger.com/profile/11131198046075365419
      maksud nya gimana 2 label?
      2 sitemap?
    • Mangenak
      28 Juli 2022 18.30
      Profil: https://www.blogger.com/profile/16844503105431258165
      /feeds/posts/summary/-/label dan label lg?