Widget Sitemap Page Otomatis Di Blogger
Membuat Widget Sitemap Page di Blogspot dengan Kode HTML Otomatis. Membuat sitemap (peta situs) di Blogspot adalah langkah penting untuk membantu pengunjung dan mesin pencari menavigasi konten blog Anda dengan mudah. Dengan sitemap, semua artikel atau halaman di blog akan tersusun secara terstruktur dan mudah ditemukan. Artikel ini akan membahas cara "membuat halaman sitemap di Blogger", "membuat postingan halaman sitemap di Blogger", dan menyertakan "kode HTML sitemap otomatis Di Blogspot" yang dapat diterapkan sebagai "widget halaman sitemap otomatis di Blogger".
Di artikel sebelumnya saya juga sudah membahas Cara Membuat Widget Halaman Contact Form Di Blogger.
Mengapa Pengguna Blogger Harus Membuat Halaman Sitemap ?
Sitemap memiliki fungsi penting dalam mengatur konten blog. Beberapa manfaatnya adalah:
1. Memudahkan pengunjung dalam menemukan konten yang mereka cari dengan cepat.
2. Mempercepat pengindeksan oleh mesin pencari seperti Google, sehingga konten baru lebih cepat muncul di hasil pencarian.
3. Meningkatkan user experience (UX) karena pengguna bisa melihat daftar semua artikel dengan rapi.
4. Sitemap membantu navigasi internal, terutama untuk blog yang memiliki banyak postingan.
Membuat Widget Halaman Sitemap di Blogger
Langkah pertama adalah membuat halaman khusus untuk sitemap. Berbeda dengan postingan biasa, halaman sitemap dibuat sebagai "Page" di Blogger. Berikut adalah langkah-langkahnya:
1. Masuk ke Dashboard Blogger
Login ke akun Blogger Anda dan pilih blog yang ingin Anda tambahkan halaman sitemap.
2. Membuat Halaman Sitemap Baru
Setelah berada di dashboard, ikuti langkah berikut:
A. Klik menu "Pages" (Halaman) di sidebar sebelah kiri blogspot anda.
B. Klik tombol "New Page" (Halaman Baru).
3. Menulis Halaman Sitemap
Pada halaman baru tersebut, Anda bisa memberikan judul seperti "Sitemap atau Daftar Isi Blog". Pada bagian konten, kita akan memasukkan kode HTML otomatis yang akan diuraikan nanti di artikel ini.
4. Publikasikan Halaman
Setelah selesai menambahkan kode, klik "Publish" (Publikasikan). Halaman sitemap Anda sudah siap untuk digunakan.
Membuat Widget Postingan Halaman Sitemap di Blogger
Selain membuat halaman khusus, Anda juga bisa membuat sitemap dalam bentuk postingan blog biasa. Caranya mirip dengan membuat halaman:
1. Masuk ke dashboard Blogger.
2. Pilih menu "Posts" (Postingan).
3. Klik "New Post" (Posting Baru).
4. Tambahkan kode HTML sitemap pada editor HTML, lalu beri judul sesuai keinginan.
5. Setelah itu, klik "Publish" (Publikasikan).
Dengan cara ini, sitemap akan tampil sebagai salah satu postingan di blog Anda.
Kode HTML Sitemap Otomatis di Blogger
Untuk membuat sitemap yang dapat diperbarui secara otomatis, Anda perlu menggunakan kode HTML dan JavaScript. Kode ini akan menarik daftar artikel dari feed Blogspot Anda dan menampilkannya dalam format yang terstruktur.
Berikut adalah kode HTML sitemap otomatis** yang dapat Anda gunakan di halaman atau postingan blog Anda:
<style>
body {
font-family: Arial, sans-serif;
}
.sitemap {
list-style-type: none;
padding: 0;
}
.sitemap li {
margin: 5px 0;
}
.sitemap a {
text-decoration: none;
color: #3498db;
}
.sitemap a:hover {
text-decoration: underline;
}
</style>
<body>
<h1>Sitemap</h1>
<ul class="sitemap" id="sitemap"></ul>
<script>
// Ganti URL_FEED_BLOGSPOT dengan URL feed Blogspot Anda
const blogFeedUrl = 'https://www.carangeblog.com/feeds/posts/default?alt=json&max-results=500';
fetch(blogFeedUrl)
.then(response => response.json())
.then(data => {
const posts = data.feed.entry;
let sitemapHtml = '';
posts.forEach(post => {
const postTitle = post.title.$t;
const postUrl = post.link.find(link => link.rel === 'alternate').href;
sitemapHtml += `<li><a href="${postUrl}" target="_blank">${postTitle}</a></li>`;
});
document.getElementById('sitemap').innerHTML = sitemapHtml;
})
.catch(error => {
console.error('Error fetching the blog feed:', error);
});
</script>
</body>
Penjelasan Kode Html Sitemap Untuk Blogger:
Blog Feed URL: Pada bagian `const blogFeedUrl`, Anda harus mengganti `URL_FEED_BLOGSPOT` dengan URL feed blog Anda. Di atas URL ini berbentuk `https://www.carangeblog.com/feeds/posts/default?alt=json&max-results=500`. Jika Anda memiliki domain kustom, gunakan domain tersebut.
Fungsi Fetch: Kode JavaScript ini akan melakukan permintaan ke feed blog dan mengembalikan data dalam format JSON. Data tersebut kemudian diolah untuk menampilkan judul dan link dari setiap postingan yang ada di blog Anda.
List HTML: Setelah mengambil data dari feed, kode ini akan membuat elemen `<li>` untuk setiap artikel dan menampilkannya dalam format daftar di halaman.
Cara Memasukkan Kode Html Sitemap Otomatis ke Blogspot
Setelah Anda memiliki kode di atas, langkah selanjutnya adalah memasukkannya ke blog Anda:
1. Masuk ke halaman yang Anda buat (seperti yang telah dijelaskan di bagian Membuat Halaman Sitemap).
2. Pada editor halaman, pilih mode HTML untuk mengedit kode secara langsung.
3. Salin kode di atas dan tempelkan ke dalam editor HTML.
4. Simpan dan publikasikan halaman.
Setelah Anda mengikuti langkah-langkah di atas, sitemap akan muncul di halaman blog Anda, dan secara otomatis akan diperbarui setiap kali Anda memposting artikel baru.
Kelebihan Menggunakan Widget Sitemap Otomatis
1. Otomatis Update:
Setiap kali Anda menambahkan postingan baru di blog, sitemap akan diperbarui secara otomatis tanpa perlu diubah manual.
2. Tampilan Dinamis:
Dengan memanfaatkan JavaScript, Anda bisa menampilkan daftar artikel dengan link langsung ke postingan, yang mempermudah navigasi bagi pengunjung.
3. Responsif Dan SEO Friendly:
Sitemap ini dibuat menggunakan HTML dan CSS sederhana, sehingga tampilannya akan mengikuti gaya blog Anda, dan dapat terlihat baik di perangkat desktop maupun mobile.
4. SEO Friendly:
Sitemap yang diperbarui secara otomatis dapat membantu mempercepat pengindeksan konten baru di mesin pencari seperti Google, yang pada gilirannya dapat meningkatkan peringkat SEO blog Anda.
Membuat halaman sitemap di Blogger adalah salah satu cara terbaik untuk meningkatkan navigasi dan user experience di blog Anda. Dengan menggunakan kode HTML sitemap otomatis, Anda bisa dengan mudah membuat widget halaman sitemap otomatis di Blogger yang selalu diperbarui dengan artikel terbaru. Hal ini tidak hanya membantu pengunjung, tetapi juga memudahkan mesin pencari dalam mengindeks konten blog Anda.
Ikuti panduan dan gunakan kode yang telah disediakan untuk membuat sitemap di blog Anda sekarang, dan lihat bagaimana blog Anda semakin mudah diakses oleh pengunjung serta mesin pencari.
Post a Comment