Cara Menciptakan Sitemap Otomatis Di Blog

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 niscaya mempunyai 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 sanggup memperbesar peluang pengunjung untuk berlama-lama membaca artikel sebab ingin tau dengan artikel lain yang terdapat di sitemap.

Banyak sekali tutorial cara menciptakan sitemap untuk blog di internet. Tetapi alangkah baiknya jikalau 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 berdasarkan Saya simpel tetapi juga sangat SEO Friendly. Kamu sanggup menciptakan sitemap ini yang otomatis artikelnya akan masuk daftar sesuai dengan label. Selain label, dilengkapi juga dengan tanggal rilis blog, judul blog, dan ditambah lagi dibentuk menyerupai tabel yang tingginya sanggup diatur sesuai selera. Sehingga visitor akan melihat dengan terperinci sitemap Kita.

Berikut langkah memasang sitemap otomatis di blog

1. Buka blogger > halaman >halaman gres > copy paste aba-aba 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&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>  <style scoped="" type="text/css"> #comments {display:none;} </style>

2. Klik template > edit HTML > copy paste aba-aba di bawah ini sempurna 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;}

Demo

Keterangan
Kamu sanggup mengganti warna background dan goresan pena sesuai keinginanmu.

Demikian script untuk menciptakan sitemap secara otomatis di blog tutorial dari Arlina Design