Cara Membuat Dan Memasang Sitemap Otomatis Yang Simpel dan Keren Berdasarkan Kategori

Hai, Sahabat. .
Setelah saya memposting cara membuat daftar isi blog otomatis berdasarkan waktu postingan, sekarang saya akan membuat postingan tentang cara membuat sitemap atau daftar isi lainnya. Di kesempatan yang baik ini, saya ingin berbagi tentang bagaimana cara membuat sitemap atau daftar isi otomatis di blog atau website yang simpel dan keren yang dapat menampilkan semua artikel berdasarkan Label atau Kategori yang telah kamu buat. Sitemap ini juga akan menampilkan tanda “New” yang terdapat pada artikel baru kamu.

Kelebihan Sitemap atau Daftar Isi Keren Ini

Beberapa kelebihan dari sitemap yang akan kita bahas, adalah:

1. Menampilkan semua postingan dan update otomatis
2. SEO friendly, responsif, dan mobile friendly
3. Tampilan keren dan simpel
4. Fast loading dan ringan
5. Artikel dikelompokkan per kategori atau label sesuai abjad
6. Valid HTML 5 dan CSS
7. Tanda "New" pada artikel terbaru

Baca juga:

• Cara Membuat Gmail Menggunakan Smartphone Android
• Cara Membuat Blog Gratis Dengan Blogspot

Fungsi Sitemap atau Daftar Isi Untuk Blog

Sitemap atau daftar isi berfungsi untuk mempermudah para pengunjung kamu dalam mencari semua artikel yang mereka butuhkan. Sementara gadget Arsip, Labels, Random post dan Recent post hanya memberi daftar artikel yang tidak semuanya ditampilkan secara mudah dan langsung, sehingga mereka kesulitan untuk menemukan artikel yang mereka sukai.

Cara Membuat dan Memasang Sitemap atau Daftar Isi Keren Ini Di Blog Kamu

Langsung saja, mari kita lihat langkah-langkah bagaimana cara membuat sitemap yang simpel dan keren. Untuk dapat membuat sitemap atau daftar isi yang keren di blog atau website kamu, silahkan kalian ikuti langkah-langkah berikut ini:

1. Login ke Akun Blogger kamu
2. Pilih menu "Halaman" yang ada di sisi kiri
3. Klik "Halaman Baru" dan akan muncul jendela baru yang menampilkan halaman kosong untuk memulai membuat sitemap
4. Pada halaman kosong, pilih mode "HTML" (bukan mode "compose") lalu copy paste kode script di bawah postingan ini
5. Jangan lupa, beri judul untuk halaman ini dengan nama "Sitemap" atau "Daftar isi"
6. Jika kamu tidak ingin sitemap atau daftar isi kamu di komentari oleh pengunjung, silahkan klik pada menu "Pilihan" dengan "Icon roda gigi" di sisi kanan dan pilih opsi "Jangan Izinkan Komentar", lalu klik selesai.
7. Klik "Publikasikan" dan selamat sitemap kamu telah dibuat

Pilih salah satu kode atau script di bawah ini:

Contoh Sitemap atau Daftar Isi Sederhana

• Script sitemap simpel

<script style="text/javascript" src="https://cdn.rawgit.com/teknomia/sitemap/eded6943/sitemap-sederhana.js"></script>

<script src="/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Contoh Sitemap atau Daftar Isi Keren

• Script sitemap keren

<div class='jontor'>
<script src="https://cdn.rawgit.com/teknomia/sitemap/2ad476de/sitemap-keren.js"></script>
<script src="/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=teknomia_Load"></script>
</div>
<style type='text/css'>.jontor{width:100%;border-collapse:collapse;text-align:left;overflow:hidden;margin:0 auto;}
.jontor a{color:black;}
.jontor p .teknomia_Label{background:#4ECDC4;display:block;padding:12px;}
.jontor ol li{position:relative;display:block;padding:.4em .4em .4em .8em;margin:.5em 0 .5em 2.5em;background:#d9f4f2;color:#666;text-decoration:none;transition:all .3s ease-out;}
user agent stylesheetli{display:list-item;text-align:-webkit-match-parent;}
.jontor ol li:before{content:counter(li);counter-increment:li;position:absolute;left:-2.5em;top:50%;margin-top:-1em;background:#0fa9cd;color:#fff;height:2em;width:2em;line-height:2em;text-align:center;font-weight:bold;}
.jontor ol li:hover:after{left:-.5em;border-left-color:#0fa9cd;}
.jontorol li:hover{box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);transition:all 0.3s cubic-bezier(.25,.8,.25,1);}
.jontor ol li:after{position:absolute;content:'';border:.5em solid transparent;left:-1em;top:50%;margin-top:-.5em;transition:all .3s ease-out;}
ol{counter-reset:li;list-style:none;font:15px 'Arial';padding:0;margin-bottom:4em;text-shadow:0 1px 0 rgba(255,255,255,.5);margin-left:26px;}
.teknomia_Postname li:nth-of-type(odd){background:#f1f3f3;}
.new{color:red!important;font-weight:700;font-style:italic;}
user agent stylesheetol{display:block;list-style-type:decimal;-webkit-margin-before:1em;-webkit-margin-after:1em;-webkit-margin-start:0;-webkit-margin-end:0;-webkit-padding-start:40px;}
</style>


Semoga Bermanfaat.

Share this post