vlogٷ

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.

membuat sitemap atau daftar isi

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 vlogٷ, 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="/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:


Penutup

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

3 komentar

  1. Profil:https://draft.blogger.com/profile/11852453549897404711
    Thanks gan
  2. Profil:https://draft.blogger.com/profile/07564732866905299730
    hebat...msh aktif...sepertinya para blogger udh jarang update postingan.....msh relevan gak ya ngeblog ???
  3. Profil:https://draft.blogger.com/profile/04614188634593932289
    Kok punya saya ngak bisa ya, cara ganti link bagaimana dan cara gabungkan html sama css bagaimana? Masih awam banged apakah ada yg mau ikhlas membantu saya.. terimakasih
  • Gunakan fitur Format Kode untuk menulis atau menyisipkan kode dan gambar dengan format tertentu.
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi via Email ketika ada balasan.
  • Apabila ada pertanyaan di luar artikel silahkan telusuri atau bertanya lewat .
  • Untuk menyisipkan gambar, silahkan terlebih dahulu. Lalu salin URL Gambar tersebut, paste ke kolom di bawah ini, lalu klik tombol Image.
  • Untuk menyisipkan Potongan Kode, atau Quote, paste kode tersebut ke kolom di bawah ini, lalu klik tombol pre, code, atau quote.
  • Untuk menulis kode dalam Syntax Highlighter gunakan format kode panjang.
  • Setelah itu, salin atau copy hasil parse dengan klik tombol icon Salin Kode! lalu paste ke kolom komentar.

image quote pre code