Membuat Sitemap di Blogger

Membuat Sitemap di Blogger - Bagi anda pengguna web/blog pasti pernah dengar yang namanya sitemap atau peta situs,  apa itu sitemap? Sitemap adalah salah satu alat bantu untuk para webmaster yang mempermudah dalam pengenalan peta situs di dalam website. Dengan begitu, mesin google dengan mudah menjelajah dan meraih halaman-halaman yang ada di dalamnya. Sama halnya dengan webiste pada umumnya, blog juga memerlukan sitemap agar mesin pencari dengan mudah mendeteksi konten di dalamnya.. Dalam sistem sitemap ini pengguna dapat melakukan submit peta web berbasis XML langsung ke Google yang akan membantu Google mengindeks halaman web dengan mudah.

sitemap

Tidak hanya itu dalam pembuatan sitemap atau peta situs web\blog ini pengunjung akan lebih mudah mencari artikel yang dicarinya dan dengan tampilan yang bagus juga akan membuat nilai lebih dari pengunjung, terus seperti apa peta situs didalam web\blog itu, anda bisa lihat conatoh dalam blog ini SITEMAP.

Untuk tutorialnya bisa anda ikuti berikut ini:
1. Login blogger
2. Buat halaman static, jika belum tahu bagaimana membuatnya anda bisa baca artikel Membuat Halaman Static
3. Masukan kode berikut kedalam HTML, ingat HTML bukan Compose
compose

<style scoped="scoped" type="text/css">
/* CSS Sitemap */
#bp_toc {background:transparent;width:100%;color:#999;margin-top:10px;margin:0 auto;padding:5px;}
.toc-header-col1 {padding:10px!important;line-height:15px;background-color:#01c0f4;width:250px;transition:all 0.3s ease-in-out;}
.toc-header-col2 {padding:10px!important;line-height:15px;background-color:#6cd9dd;width:75px;transition:all 0.3s ease-in-out;}
.toc-header-col3 {padding:10px!important;line-height:15px;background-color:#44cc9a;width:125px;transition:all 0.3s ease-in-out;}
.toc-header-col1:hover, .toc-header-col2:hover, .toc-header-col3:hover {opacity:0.9;}
.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:15px;text-transform: lowercase;text-decoration:none;color:#fff;font-family:'Roboto Slab';font-weight:400;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 {padding:10px;font-size:89%;;transition:all 0.3s ease-in-out;}
.toc-entry-col1:hover, .toc-entry-col2:hover, .toc-entry-col3:hover {background:#fff;}
.toc-entry-col1:nth-child(odd), .toc-entry-col2:nth-child(odd), .toc-entry-col3:nth-child(odd) {
padding:10px;font-size:89%;}
.toc-entry-col1:nth-child(even), .toc-entry-col2:nth-child(even), .toc-entry-col3:nth-child(even) {padding:10px;font-size:89%;}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{text-decoration:none;color:#666;transition:all 0.3s ease-in-out;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#f6af54;}
span.toc-note {padding:10px;margin:10px 0;display:inline-block;background:#fff;
color:#666;}
#bp_toc table {width:100%;margin:0 auto;border-collapse:collapse;border-spacing:0;border-color: transparent;}
#bp_toc tr:nth-child(even) {background:#fafafa}
#bp_toc tr:nth-child(odd) {background:#eee}
</style>
<div id="bp_toc">
Loading Sitemap. Please wait....</div>
<script src="https://googledrive.com/host/0B395DCTZ7t5KU2JPUjlMdmdmMVk" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script> 
<div style="clear: both;">
</div>
4. Simpan Halaman (publish)

Bagaimana keren tidak, tutorial ini adalah salah satu model sitemap, jika anda ingin membuat dengan model yang berbeda anda bisa cari di google banyak model sitemap yang dibagikan source codenya. Semoga membantu Membuat Sitemap di Blogger.

18 Responses to Membuat Sitemap di Blogger

  1. Saya sudah pasang apa perlu diganti ya bos? wah ini caranya lebih komplit dan mantebs... makasih sharenya...

    Salam dari pulau Dollar

    ReplyDelete
    Replies
    1. salam kembali :D bagaimana mas saja kalau mau digani :D

      Delete
  2. langsung praktek dech, soalnya jatuh cinta pada pandangan pertama, hehe..

    success always.

    ReplyDelete
    Replies
    1. amin.. :) hehe ada2 saja nih sista Devy :D

      Delete
  3. Tadi liat demonya, bagus juga dan simple ya sitemapnya..

    ReplyDelete
    Replies
    1. keren mas site map nya :-bd udah saya terapkan juga di blog saya :D

      Delete
  4. Neng udah punya kox... kapan2 aza mampir ambil yang ini...

    ReplyDelete
  5. keren sekali sitemapnya, lebih rapi dan sejuk dimata, terimakasih atas infonya,,

    ReplyDelete
  6. wah bagus juga ni gan, jadi bingung ni mau tetap pake yang lama atau yang ini

    ReplyDelete
    Replies
    1. pakai yang udah ada saja dulu, jika bosan bisa diganti :D

      Delete
  7. bagus mas, sitemapnya... tapi apa gk kepanjangan ya??

    ReplyDelete
    Replies
    1. iya c tapi bisa gunakan open/close pada sitemapnya kok jadi lebih rapi :

      Delete
  8. sudah pasang meskipun sederhana kang.hehe

    ReplyDelete
    Replies
    1. yang sederhanalah yang luar biasa :)

      Delete
  9. keren sob, kalo nnti ada wktu mermak ijin d obrak abrik ya :)

    ReplyDelete
    Replies
    1. monggo silahkan di desain ulang biar lebih bagus lagi :D

      Delete

Note:
► Silahkan Berkomentar Sesuai Tema.✔
► No LINK. SPAM & PROMOSI ✘
► Segala Komentar Yang Masuk tidak Saya Moderasi ✔
► Dilarang Promosi (kecuali Ijin Admin ) ✔
► Link Hidup = Hapus.✔