Cara simpel membuat halaman daftar isi per label keren pada blog

Membuat halaman daftar isi pada blog itu merupakan hal yang sangat penting dilakukan oleh para pemilik blog. Karena daftar isi merupakan sebuah peta situs yang akan memudahkan pengunjung kita mencari artikel yang diinginkan.

Jika sobat adalah seorang blogger, maka pemasangan daftar isi/sitemap adalah langkah awal untuk menciptakan sebuah blog yang terlihat lebih profesional.

Daftar isi biasanya lebih mudah lagi jika dibagi ke berbagai label per label, karena bisa mempermudah untuk menemukan sesuatu artikel yang berkaitan dengan artikel yang lainnya.

Pentingnya memasang sitemap pada blog kita, menjadikan kita harus tau juga bagaimana cara membuat sitemap yang terlihat bagus dan rapi.

Nah, mungkin sobat tertarik untuk membuat sitemap simpel ini.

Seperti diatas adalah contoh dari tampilan sitemap tersebut, atau jika sobat ingin tau langsung, sobat bisa langsung klik DEMO dibawah ini untuk melihatnya secara live.

DEMO

Jika sobat suka dengan model sitemap tersebut, dan ingin tau bagaimana cara membuatnya, sobat pastikan ikuti tutorialnya dibawah ini dengan baik dan benar.

Cara membuat sitemap per label di blog

#1 Sobat langsung saja login ke blogger.com.

#2 Buka menu Laman.

#3 Lalu buat laman baru.

#4 Beri judul laman terserah dengan apa yang sobat inginkan.

#5 Ganti tab mode Compose ke mode HTML untuk menambahkan kode sitemap.

#6 Salin kode dibawah ini, lalu tempelkan ke laman yang sobat buat tadi.

<style type="text/css">

#toc{

width:97%;

margin:5px auto;

border:1px solid #00a3c1;

-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:#ff0000;

font-weight:bold;

margin:0 -5px;

padding:1px 0 2px 11px;

background:-moz-linear-gradient(right,#C2EAFE 0%,#00a3c1 40%);

background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#00a3c1),color-stop(1,#C2EAFE));

border:1px solid #00a3c1;

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{t

ext-transform:uppercase;

}

.new{

color:#ff0000;

font-weight:bold;

font-style:italic;

}

.postname{

font-weight:normal;

background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);

background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));

}

.postname li{

border-bottom: #ddd 1px dotted;

margin-right:5px

}

</style>




<div id="toc">
<script src="https://cdn.rawgit.com/aramdan/share/master/sitemap.js" type="text/javascript"></script>

<script src="http://www.blog-far.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">

</script></div>

Ganti url www.blog-far.com dengan url blog sobat.

#7 Nah, jika sobat sudah yakin melakukannya dengan benar, sobat tinggal publikasikan laman tersebut dan lihat hasilnya.

taraa!!! Sekarang blog sobat sudah memiliki daftar isi/sitemap yang keren dan pastinya ringan.

Oiya sob, kelebihan dari sitemap ini ialah selalu memperbarui secara otomatis. Jadi, jika sobat misalnya update artikel baru, sitemap ini akan langsung menambahkan artikel tersebut secara otomatis di blog sobat.

Intinya sitemap ini keren deh buat blog sobat.

Demikian dulu artikel kali ini sobat, silahkan dicoba dan semoga berhasil diterapkan di blog sobat. Sekian dulu artikel kali ini yang bisa saya bagikan.