Cara Membuat Sitemap Otomatis di Blog - Sitemap atau biasa dikatakan sebagai daftar isi sangatlah penting bagi sebuah blog. Ibarat sebuah buku yang mempunyai isi di setiap halamannya pasti memiliki daftar isi untuk memudahkan mencari bagian-bagian yang ingin dibaca. Begitu juga sitemap di blog. Ketika seorang pengunjung akan melihat keseluruhan artikel di blog maka Dia akan pergi ke halaman sitemap. Jangan salah dengan adanya widget ini bisa memperbesar peluang pengunjung untuk berlama-lama membaca artikel karena penasaran dengan artikel lain yang terdapat di sitemap.
Banyak sekali tutorial cara membuat sitemap untuk blog di internet. Tetapi alangkah baiknya jika Kita memasang widget sitemap yang responsive dan tentunya SEO Friendly. Kali ini Saya akan membagikan bagiamana membuat sitemap otomatis di blog tutorial dari Arlina Design. Karena tutorialnya menurut Saya simpel tetapi juga sangat SEO Friendly. Kamu bisa membuat sitemap ini yang otomatis artikelnya akan masuk daftar sesuai dengan label. Selain label, dilengkapi juga dengan tanggal rilis blog, judul blog, dan ditambah lagi dibuat seperti tabel yang tingginya bisa diatur sesuai selera. Sehingga visitor akan melihat dengan jelas sitemap Kita.
Berikut langkah memasang sitemap otomatis di blog
1. Buka blogger > halaman >halaman baru > copy paste kode di bawah ini pada tab HTML dan publikasikan
<div id="bp_toc">
</div>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/sitemap-content.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=loadtoc" type="text/javascript"></script>
<style scoped="" type="text/css">
#comments {display:none;}
</style>2. Klik template > edit HTML > copy paste kode di bawah ini tepat di atas "</style>" > simpan template
/* CSS Full Sitemap */
#bp_toc {background:#536659;color:#666;margin:0 auto;padding:5px;}
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#536659;font-family:'Open Sans';font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}
.toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;}
.toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;}
.toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px;
text-decoration:none;color:#aaa;font-family:'Open Sans';font-weight:700;letter-spacing: 0.5px;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:none;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#e76e66;}
#bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}
.toc-entry-col1 {counter-increment:rowNumber;}
#bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;}
td.toc-entry-col2 {background:#fafafa;}Keterangan
Kamu bisa mengganti warna background dan tulisan sesuai keinginanmu.
Demikian script untuk membuat sitemap secara otomatis di blog tutorial dari Arlina Design
EmoticonEmoticon