Cara Membuat Sitemap Otomatis yang SEO di Halaman Blogger 2018
Cara Membuat Sitemap Otomatis yang SEO di Halaman Blogger 2018

Anda para Blogger pasti sudah tidak asing lagi dengan yang namanya Sitemap. Kali ini saya ingin membagikan tutorial cara membuat sitemap otomatis yang SEO di Blogger 2018. Kita sudah sering sekali melihat tutorial membuat sitemap ini di Google, tetapi sayangnya lebih dari 60% diantaranya script sudah rusak, alias tidak work lagi.

Oleh karenanya kali ini saya ingin membagikan script nya yang masih work di tahun 2018. Sitemap juga sering disebut daftar isi.

Bila anda belum tau, sitemap merupakan sebuah widget yang akan menampilkan seluruh postingan yang pernah anda publikasikan di blog, dan postingan ini diurutkan berdasarkan label nya. Sitemap ini otomatis, jadi jika anda membuat postingan baru, postingan tersebut secara otomatis masuk ke daftar sitemap.

Anda sangat saya sarankan untuk memasang widget ini, karena sitemap berfungsi untuk mempermudah pengunjung untuk melihat semua postingan yang pernah anda buat, dan tentunya juga memberikan profit kepada anda yaitu Page Views semakin meningkat dan menurunkan bounce rate yang akan berdampak bagi SEO.

Kelebihan dari widget yang saya buat kali ini adalah responsif, jadi tampilannya tetap bagus dan keren walaupun dilihat melalui handphone dan laptop. Selain itu, ada beberapa kelebihan lainnya dari widget daftar isi yang saya buat kali ini, antara lain:

  1. SEO Friendly
  2. Fast Loading
  3. Bisa dipasang kan LazyLoad ke dalamnya
  4. Tampilan yang elegan
  5. Cara memasang nya yang mudah
  6. Mudah untuk diedit ulang atau redesain



Langsung saja, berikut cara memasang daftar isi otomatis nya...

Cara Membuat Sitemap / Daftar Isi Otomatis yang SEO di Halaman Statis Blogger


Pemasangan Script Sitemap


Seperti biasa, pertama silakan anda masuk ke blogger.com, tekan Tema, dan pilih Edit HTML, cari kode berikut ini:

<head>

Bila tidak ada, berikut kode penggantinya:

&lt;head&gt;

Sebut saja kode diatas namanya HEAD. Bila sudah ketemu, silakan tempatkan kode berikut tepat dibawah kode HEAD tadi.

<style>
.kodejarwo-sitemap-list {}
.kodejarwo-sitemap-list ul {padding:0;margin:0;box-shadow:0 0 10px rgba(0,0,0,.2);}
.kodejarwo-sitemap-list ul li.judul {padding:10px 20px;list-style:none;margin:0;font-family:arial;font-size:17px;font-weight:700;text-transform:uppercase}
.kodejarwo-sitemap-list ul ul li.menu {list-style:none;margin:0;}
.kodejarwo-sitemap-list ul ul li a {padding:10px 30px;background:#454359;border-bottom:2px solid #3f3e4e;width:100%;color:white !important;display:inline-block}
.kodejarwo-sitemap-list ul ul li a:link {color:white !important;font-family:arial;font-size:15px}
.kodejarwo-sitemap-list ul ul li a:hover {opacity:0.8}
.kodejarwo-sitemap-list ul ul li a strong {float:right}
</style>
<script async='async' src='https://cdn.rawgit.com/BangJarwo/Kode-Jarwo/ba6b6cf5/Sitemap.js'></script>

Simpan template dan lanjut ke langkah berikutnya.

Penempatan Widget


Sekarang, anda dapat memilih dimana anda ingin menempatkan widget ini. Bisa lewat tata letak widget HTML/JavaScript, bisa juga pada halaman statis.

Memasang Sitemap / Daftar Isi di Halaman Statis


Masuk ke dashboard kiri blogger, pilih bagian Halaman, lalu buat halaman baru.

Membuat Halaman Baru

Setelah itu, masuk ke mode HTML. Lihat gambar dibawah ini untuk lebih jelasnya.

Memilih Mode HTML

Lalu, masukkan kode berikut ini kedalam halaman mode HTML tadi:

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

Setelah itu, publikasikan halaman anda dan lihat hasilnya.

Memasang Sitemap / Daftar Isi di Widget


Masuk ke blogger.com, lalu pilih Tata Letak, tekan tambahkan widget. Setelah itu, pilih widget yang bernama HTML/JavaScript, dan masukkan kode berikut kedalamnya:

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

Simpan dan lihat hasilnya.

Bagaimana? Mudah saja bukan? Sitemap sudah bisa saya pastikan akan work 100% bila cara memasangnya benar dan anda mengikuti langkah demi langkah diatas tanpa ada yang dilewati.
Silakan pilih sistem komentar anda ⇛   

Silakan berkomentar dengan sopan. Jangan buang-buang waktu anda hanya untuk melakukan SPAM, Fake Account, dan Flamming disini.

SEO SAHABATDOMINOQQ.TK Kode Jarwo
SEO SAHABATDOMINOQQ.TK
# 10 September 2018 12.14

Terima kasih Tutorial nya kak, sudah saya Coba, Berhasil!!

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 22 Juli 2018 10.55

Kirim linknya gan, mau saya cek...

Balas
Lucky Ramisap Kode Jarwo
Lucky Ramisap
# 22 Juli 2018 09.06

maaf bang Jarwo, ditemplate saya, tampilannya tidak responsive. Keluar dari badan postingan. Padahal saya lihat width nya sudah 100%, apakah ada yang salah pada penempatan kode saya?

Balas
Ayano Awang Kode Jarwo
Ayano Awang
# 28 Februari 2018 20.50

Belum saya save & publikasikan, nanti ane coba

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 28 Februari 2018 20.47

Kadang saya juga ilang muncul pas di pratinjau. Tapi pas sudah di save & publikasikan, muncul nda?

Balas
Ayano Awang Kode Jarwo
Ayano Awang
# 28 Februari 2018 20.21

Thanks tutorialnya gan, Saya mengikuti tutorial diatas tapi mengapa hasilnya blank saat dipratinjau?

Balas