FfbrH7Hd32dBIzJfRUFjQOMyo355V6UzX2vYTtb5
Cara Membuat Sitemap (Daftar Isi) Blogger Dengan Tampilan Yang Menarik

Iklan Billboard 970x250

Cara Membuat Sitemap (Daftar Isi) Blogger Dengan Tampilan Yang Menarik

Cara membuat sitemap blogger
Halo sobat blogger, di artikel kali ini saya akan membuatkan tutorial Cara membuat sitemap untuk blog dengan tampilan yang lebih menarik dan ciamik.

Sitemap atau peta situs adalah daftar isi dari blog kita sendiri, yaitu berisi kumpulan artikel yang kita buat. mulai dari artikel lama hingga yang terbaru akan tampil di sitemap ini dan tertata dengan rapi, sehingga bisa memudahkan pengunjung blog untuk mencari artikel yang sesuai dengan keinginan mereka.

Ada 2 jenis sitemap, yaitu Sitemap Xml dan Sitemap Html. Keduanya mempunyai peran masing-masing.

Apa Fungsi dan Manfaat Sitemap Untuk Blog?


Ada 2 fungsi dan manfaat utama penggunaan sitemap pada blog, yaitu:
  • Membantu mempercepat perayapan dan pengindeksan situs atau halaman blog (sitemap xml)
  • Berfungsi sebagai darfar isi pada blog itu sendiri (sitemap html)
Sebelum anda membuat sitemap pada halaman blog (sitemap html), anda perlu meng-submit sitemap xml anda terlebih dahulu di Google Webmaster Tools.

Caranya :

  1. silahkan masuk ke dasbor Google Webmaster Tools 
  2. lalu pilih Perayapan > Sitemap/ Peta Situs 
  3. Kemudian klik pada tombol Tambahkan/ Uji Peta Situs 
  4. lalu tambahkan sitemap.xml dibelakang URL blog anda, jadinya seperti ini http://www.namabloganda.com/sitemap.xml


Jika sudah, kita lanjut membuat sitemap di blog.

Baca Juga : Cara Membuat Table Responsive Di Blog

Sebelum kita mulai ke cara membuatnya, saya ingin menunjukan kepada anda terlebih dahulu tampilan sitemapnya, silahkan klik tombol berikut ini :


Nah bagaimana? apakah anda berminat untuk membuatnya?
Jika iya, sekarang kita lanjut ke tutorial cara membuatnya.

Berikut Tutorial Cara Membuat Sitemap di Blog :


1. Masuk ke Blogger
2. Pada dasbor pilih Halaman > Halaman Baru
3. Beri judul Sitemap dan letakan kode script berikut ini pada mode HTML bukan Compose
4. Lalu Save

Jika anda sudah mempunyai halaman sitemap, anda tinggal di edit saja.

<style type="text/css">
#toc{width:99%;margin:5px auto;border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);}
.labl{color:#FF5F00;font-weight:bold;margin:0 -5px;
padding:1px 0 2px 11px;background: #3498DB;
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;}
.labl a{color:#fff;}
.labl:first-letter{text-transform:uppercase;}
.new{color:#FF5F00;font-weight:bold;font-style:italic;}
.postname{font-weight:normal;background:#fff;margin-left: 35px;}
.postname li{border-bottom: #ddd 1px dotted;margin-right:5px}
</style>

<br />
<div id="toc">
<script src="https://cdn.jsdelivr.net/gh/penaindigo/Pena-Indigo-Code@a134f9def601a6f77332eccc35d3d20e0d3c7e49/sitemappenaindigo.js" type="text/javascript"></script>
<script src="https://www.aditimes.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

Silahkan ganti tulisan url https://www.aditimes.com dengan URL blog anda, jika ingin merubah warna tampilannya anda bisa ganti kode warna yang sudah saya beri tanda merah dengan kode warna yang anda inginkan, dan jangan lupa klik simpan.


Nah itulah tutorial cara membuat sitemap di blog yang bisa saya share kali ini, silahkan dicoba dan semoga bermanfaat buat sobat blogger.

Sekian dulu artikel kali ini, dan sampai jumpa di artikel berikutnya :D

Baca Juga
SHARE
Ady Kusanto
Blogger pemula yang masih belajar

Related Posts

Subscribe to get free updates

5 comments

  1. Nice info, sdh diterapkan dan hasil bagus

    ReplyDelete
  2. Sangat bermanfaat sekali artikelnya mas ady. Saya akan menerapkannya berdasar artikel ini. Joss

    ReplyDelete
  3. Mantap min. Ini yang di cari nih

    ReplyDelete
    Replies
    1. Siap, terimakasih sdh mampir di blog aditimes :D

      Delete

Post a Comment

Iklan Tengah Post