Cara Membuat Sitemap Blogger dengan Tag NEW Pada Label Artikel Baru

Widget blogger kali ini adalah cara membuat daftar isi/sitemap yang berlabel ‘new’ atau ‘baru’ sesuai label yang mendapat artikel terbaru. Widget ini untuk mempermudah menavigasi penjelajahan blog dengan melihat label dari blog tersebut.

Dengan begitu para pengunjung akan mengetahui label mana saja yang baru saja mendapatkan update artikel terbaru di blog tertentu.

Seperti yang sudah saya ungkapkan sebelumnya, fungsi #Widget daftar isi ini untuk melihat semua artikel secara lengkap dan supaya mudah di temukan oleh pengunjung dan memudahka bot menjelajah juga untuk merayapi semua artikel di blog anda.

Baca juga: Membuat Widget Random Post Tanpa Thumbnail di Bawah Postingan

Jadi, penggunaan sitemap atau daftar ini di blog sangatlah penting, semakin banyak blog anda di crawl/dijelajahi, maka semakin banyak pula page views yang dihasilkan setiap harinya.

Cara Pasang Widget Daftar Isi di Blog

Alangkah baiknya widget ini diletakkan pada laman statis, dengan cara masuk ke dashboard blog anda, lalu klik Laman > Laman baru. Kemudian tulis judul laman suka-suka anda, dan klik HTML, pastekan kode di bawah ini di dalamnya.

<div class="sitemap-widget sitemap-tag-new sitemap">

<script src="https://cdn.jsdelivr.net/gh/bungfrangki/bloggerSitemap@main/daftarisi.js"></script><script src="https://www.bungfrangki.com/feeds/posts/default?max-results=999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>

Ganti url www.bungfrangki.com pada kode di atas dengan url blog Anda.

Untuk memperbaiki tampilannya, silahkan tambahkan CSS berikut ini:

.sitemap{
  display:block;
  font-family:var(--body-font,BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif)
}
.sitemap-widget{
  max-height:525px;
  overflow:auto;
}
.sitemap p a{
  background-color:rgba(0,0,0,.055);
  color:var(--accent,#0277d4);
  font-weight:700;
  display:block;
  padding:5px 10px;
  text-decoration:none;
}
.sitemap p a:hover{
  background-color:var(--accent,#0277d4);
  color:#fff;
}
.sitema a{
  transition: .3s ease-in;
}
.sitemap ol li a {
  text-decoration:none;
  color:var(--link-color,#182257)
}
.sitemap ol li a:hover {
  color:var(--hover-color,#0277d4)
}
.sitemap ol li:not(:first-child){
  padding-top:8px;
}
.sitemap ol li:not(:last-child) {
  border-bottom:1px solid rgba(0,0,0,.055);
  padding-bottom:8px;
}

Hasilnya silahkan lihat langsung pada link berikut:

JSFiddle CodePen

Penutup

Demikian cara Membuat Sitemap dengan Tag NEW Pada Label yang Mendapat Artikel Baru, selamat mencoba.