Cara Membuat Sitemap Simple Dan Keren Pada Blog

antoncabon 1 comment Blogger featured Tutorial

Cara membuat sitemap simple dan keren. Sitemap disini yang saya maksudkan adalah sebuah peta pada blog dimana di dalamnya terdapat konten yang telah kita tulis dan dipublikasikan pada blog atau website milik kita. Secara umum sebenarnya hampir sebagian besar orang tahu bahwa manfaat dari sitemap itu sendiri, seperti memudahkan para pengunjung dalam bernavigasi di blog kita, dan yang paling penting adalah peta situs dapat mempermudah sebuah mesin pencari untuk menemukan konten dari blog kita, sehingga akan sangat berpengaruh terhadap SERP (search engine result page), kira-kira begitulah menurut saya, jika anda ingin menambah artinya silahkan kita diskusikan di kolom komentar, dengan senang hati saya bisa bertukar pikiran sama sobat sekalian.

Adapun yang akan kita bahas kali ini adalah bagaimana cara memasangnya di blog atau website, yang nantinya akan berfungsi mempermudah para pengunjung blog dalam mencari konten atau artikel yang dibutuhkan, sebenarnya sih ada cara yang lebih mudah dalam mencari konten atau artikel di dalam sebuah blog atau website!, tetapi itu nanti akan kita bahas dilain waktu, baiklah masuk ke cara memasang sitemap di blog agar mesin pencari dapat mendeteksi  konten yang sudah kita publikasikan. 

Bagaimana tertarik? yuk kita ikuti langkah-langkahnya pemasangan sitemap dengan tabel beserta tanggal postingan dan labelnya di blog berikut ini.

Sitemap Dengan Table

Cara membuat sitemap simple dan keren pada Blogger.com

1. Masuk ke Dashboard Blogger > Laman > Buat Laman Baru >

pilih mode HTML

2. Kemudian masukan kode berikut.

<style type="text/css">
#bp_toc{padding:10px}
.toc-header-col1{padding:10px;background-color:#000;width:60%}
.toc-header-col2{padding:10px;background-color:#000;width:20%}
.toc-header-col3{padding:10px;background-color:#000;width:20%}
.toc-header-col1:hover,.toc-header-col2:hover,.toc-header-col3:hover{background-color:#df3f2a;box-shadow:inset 0 0 2px rgba(0,0,0,0.1)}
.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:96%;text-decoration:none;color:white}
.toc-header-col1 a:hover,.toc-header-col2 a:hover,.toc-header-col3 a:hover{font-size:96%;text-decoration:none}
.toc-entry-col1,.toc-entry-col2,.toc-entry-col3{background:transparent;padding:5px;padding-left:5px;font-size:89%; text-align:left;}
.toc-note{text-align:center;margin-bottom:10px;font-size:1.6em;display:block;clear:both}
</style>
<div id="bp_toc" style="text-align: center;">
<img alt="Loading" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDi6FwYn43k2fQXgn_xH2Nwd5iHoSWyB1bWRWw21Obz6R6l7du2L1wSdSuH03JcaveXo0_9_JI9Ab27iqb8KxyR2WvLk7ETYYUFRhyFF4GedZ23dJxSjrM6Njd5YfYSkIDKGQHXdQZHCM/s1600/pleasewaite.gif" title="Loading" /></div>
<script src="http://non-blog.googlecode.com/svn/table%20of%20content" type="text/javascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=500&amp;callback=loadtoc" type="text/javascript"></script>

3. Lalu publikasikan dan lihat hasilnya.
4. Selesai.

• DEMO LIVE

Bagaimana mudah bukan? selamat mencoba ya  dan semoga berhasil. Source: disini