Cara Membuat Daftar Isi Keren dan Menarik Berdasarkan Label Blog

Sitemap merupakan hal yang penting didalam blog. Sitema ini memiliki tampilan style yang keren dan menarik. Dengan sitemap maka akan memudahkan pengunjung dalam mencari artikel diblog kita berdasarkan kategori yang ada.

Sitemap yang akan saya bagikan ini merupakan sitemap yang berdasarkan label dalam pengelompokan artikelnya. Karena otomatis jadi anda tidak perlu repot-repot untuk mengupdate artikel didaftar isi karena artikel sudah akan masuk ke sitemap secara otomatis.

Banyaknya hosting gratis yang tutup membuat banyak sitemap yang mungkin anda cari di google tidak berfungsi dengan baik. Daftar isi yang tidak bisa muncul diblog ini disebabkan karena tutupnya hosting gratis dan errornya hosting. Seperti errornya google drive sehingga anda harus hosting script dihosting lain. Ada 2 macam sitemap,yaitu sitemap manual dan otomatis.

Sitemap manual berarti anda harus mengupdate sitemap tersebut jika ada artikel yang baru diblog anda. Sedangkan sitemap/daftar isi yang akan saya bagikan ini akan secara otomatis mengupdate artikel.

Untuk sitemap yang akan saya bagikan pasti akan berfungsi dengan baik diblog anda. Tampilan style dan design sitemap yang akan saya bagikan ini bisa anda ganti dan anda kreasikan sesuka anda. Bagi anda yang ingin memasanng sitemap blog maka ikuti langkah dibawah.

Cara Membuat Sitemap Blog

Langkah 1

Silakan masuk dulu ke blogger

Langkah 2

Silakan buat laman baru,Klik Laman → Laman Baru ( Ganti tab mode Compose menjadi HTML untuk memasukkan kode sitemap )

Langkah 3

Salin dan letakkan kode sitemap dibawah ini dilaman baru yang akan dibuat

 

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


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

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

</script></div>

Ganti kode yang berwarna merah dengan url blog sobat.

Jangan lupa untuk mempublikasikan laman. Ok itulah tutorial cara membuat daftar isi/sitemap blog otomatis. Sitemap tersebut akan muncul dan postingannya akan dikelompokkan berdasarkan label. Cukup sekian tutorial ini dan semoga bermanfaat.