Cara Membuat Sitemap Otomatis pada Blog - Hobi Ngoding

hobingoding.com - Sitemap atau yang biasanya disebut sebagai daftar isi pada blog merupakan sebuah halaman blog yang berisi seluruh postingan-postingan yang ada di blog tersebut yang dikelompokkan sesuai label.

Dengan adanya sitemap ini maka para pengunjung akan lebih mudah dalam mencari postingan yang ingin dibaca karena setiap postingan telah dikelompokkan sesuai labelnya masing-masing.

Adapun embel-embel "Keren" pada judul postingan saya kali ini dimaksudkan karena sitemap yang akan saya buat telah ditambahi bumbu-bumbu CSS sehingga membuat tampilannya semakin menarik.

Selanjutnya caranya yaitu:
1. Silahkan masuk ke blogger.com, lalu pilih menu Halaman, kemudian klik Halaman Baru.

2. Ganti pilihan dari tab Compose menjadi tab HTML.

3. Isi judul halaman semisal Sitemap, kemudian copy kode dibawah ini lalu tempelkan pada kolom HTML, lalu klik Publikasikan.

<style type="text/css">
#HobiNgoding.com {
 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
 }
p {
 margin-top: 0px;
 margin-bottom: 0px
 }
h1 {
 text-align: center;
 }
</style>

<div id="HobiNgoding.com">
<script src="https://makingdifferent.github.io/blogger-widgets/sitemappage.js"></script>
<script src="/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

Sitemapnya telah selesai kita buat. Kamu dapat melihat preview tampilan sitemapnya di bawah ini:

Bagi kamu yang paham mengenai CSS, kamu dapat melakukan pengeditan pada bagian CSS yang ada di kode di atas untuk menyesuaikan tampilan dari sitemap yang telah kita buat agar sesuai dengan tampilan blog yang kamu miliki.

Sekian postingan saya kali ini dengan topik pembahasan Cara Membuat Daftar Isi Blog. Semoga bermanfaat dan dapat kamu praktekkan sendiri ya.

Related Posts