Cara Membuat Sitemap Pada Blog

Menghadirkan sitemap pada blog punya keuntungan tersendiri, karena akan memudahkan pengunjung mencari artikel lainnya dalam blog. 

Namun karena blogspot tidak menyediakan layanan ini secara default, maka sebagai pemilik kita diberi kesempatan membuatnya. Dalam tulisan ini kita akan buat sitemap di blogger dengan mudah. 

Selanjutnya mari kita buat. 

• Seperti biasa, pertama-tama login ke blogger Anda. Pilih 'Laman'.
• Lalu klik 'Laman Baru' pilih 'Laman Kosong' 
• Jika telah terbuka. Isikan 'Judul laman' sesuai dengan keinginan Anda. Sebagai contoh dalam blog ini kita gunakan kata 'Sitemap'. Setelah itu klik 'HTML'. 
• Masukkan script HTML berikut, copy paste saja.

<script src="https://sites.google.com/site/script4shared/sitemap.js"></script><script src="http://molalito.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Tulisan berwarna merah pada script diatas Anda rubah menjadi alamat blog Anda. Jika sudah, silahkan publikasikan. Tapi jika tak merasa yakin, silahkan klik 'Pratinjau' dulu. Jika sudah oke, 'Publikasikan'.

Dengan menggunakan script diatas, maka tampilannya akan terus memanjang kebawah mengikuti banyaknya jumlah postingan.

Untuk menggunakan sitemap berbeda, kita juga bisa menggunakan skrip ini, (ganti kode yang berwarnah merah dengan blog Anda)

<div style="background-color: #dde1e3; border: 1px solid #999999; height: 500px; overflow: auto; padding: 10px; width: 100%px;">
<script src="https://sites.google.com/site/script4shared/sitemap.js"></script><script src="http://molalito.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
</div>

Untuk yang kedua ini lebih dinamis dengan kolom, dan scroll. Ini memungkinkan bagi pemilik blog yang telah memiliki banyak postingan, yang hasilnya akan seperti gambar ini.

Untuk yang ketiga ini masih sama seperti yang pertama, akan terus memanjang kebawah mengikuti jumlah postingan, namun tampilannya lebih bagus dan memiliki gradasi warna seperti gambar ini.

Jika menginginkan tampilan seperti diatas, gunakan script berikut ini.

<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:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);

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

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

ext-transform:uppercase;

}

.new{

color:#FF5F00;

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://makingdifferent.github.io/blogger-widgets/sitemappage.js" type="text/javascript"></script>

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

</script></div>

Silahkan dipilih, mana yang cocok dengan keinginan.

Share this post