Cara Membuat Daftar Isi (Sitemap) Keren di Blog

Sitemap atau Daftar Isi adalah sebuah halaman yang menampilkan seluruh atau sebagian dari isi blog tsb, yang memudahkan agar para pengunjung tidak repot untuk mencari apa yang dicarinya dalam blog tsb, jadi ini sangat membantu untuk menaikan trafic rank kita agar pengunjung bertambah.

Cara Membuat Daftar Isi Blog

1. Pastikan sobat sudah Masuk, jika belum y masuk dulu y,

2. Pada Dashbor >> Klik Laman >> Laman Baru > > Pilih HTML , Ingat bukan Compose,

3. Copas salah satu kode kode HTML daftar isi di bawah ini, kedalam Halaman tadi. (ganti dulu kode yang berwarna merah dengan URL blog sobat).

4. Klik Publikasikan, atau lakukan Pratinjau dulu untuk memastikan.

Setidaknya ada dua macam daftar isi blog, yaitu Berdasarkan Label/Kategori dan Berdasarkan Tanggal Publikasi.

1. Kode HTML untuk Daftar Isi Berdasarkan Kategori/Label

<script src="http://me-sitemap.googlecode.com/files/mysitemap.js" type="text/javascript">
</script>
<script src="http://belajar-dasar-seo.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script>

Untuk Tampilan daftar Isi lebih menarik, Copas HTML dibawah 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://googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" type="text/javascript"></script>
<script src="http://belajar-dasar-seo.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script></div>

2. Kode HTML untuk Daftar Isi Berdasarkan Tanggal Publikasi

<script src=" http://mastergomaster.googlecode.com/files/daftar%20isi%20blog.js "></script>
<script src=" http://belajar-dasar-seo.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

3. Kode HTML untuk Daftar Isi Berdasarkan Tanggal Publikasi Plus Kotak

<div style="background-color: none; border: 1px solid #000000; height: 400px; margin: auto; overflow: auto; padding: 3px; text-align: left; width: 100%;">
<script src=" http://mastergomaster.googlecode.com/files/daftar%20isi%20blog.js "></script>
<script src=" http://belajar-dasar-seo.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script></div>

4. Kode HTML untuk Daftar Isi seperti Blog saya

<style type="text/css">
#dafis-acc{ font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:14px; color:#333; background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAWJugl3I/AAAAAAAAEBg/bY_3UzrECSg/d/bg5.gif) repeat-y scroll left center #E7F7FB; padding:2px 0; border:1px solid #339DC6; } .dafis-label{ background:url(http://lh6.ggpht.com/_xcD4JK_dIjU/S-KAVk09KSI/AAAAAAAAEBc/Tqfaca2nwmo/d/bg4.gif) repeat-x scroll 0 0 #E1F4FB; font-weight:bold; line-height:1.4em; overflow:hidden; white-space:nowrap; vertical-align: baseline; margin: 1px 3px; outline: none; cursor: pointer; text-decoration: none; padding: 2px 10px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.3); border:1px solid #2F94BA; } .dafis-label:hover{ background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAVlLiuVI/AAAAAAAAEBU/Hd-n_8N7qak/d/bg2.gif) repeat-x scroll 0 0 #E1F4FB; color:#003366; } .dafis-daf ol{ margin:0 0 0 30px !important; padding:0 !important; } .dafis-daf ol li{ background-color:#C9E9F4; line-height:1.5em; margin:1px 3px !important; white-space:nowrap; text-align:left; border:1px solid #339DC6; } .dafis-daf ol li a{ text-decoration: none !important; color:#333 !important; display:block; padding-left:10px; } .dafis-daf ol li a:hover{ background: #7BC4DF; border-left: 5px #333 solid; padding-left: 5px; text-shadow: 0 1px 1px rgba(0,0,0,.3); }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ilmu-blog.googlecode.com/files/sitemap.js" type="text/javascript"></script><script src="http://belajar-dasar-seo.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>

About IBNU MUBAROK

Terima Kasih Sudah Membaca Artikel Yang Berjudul Cara Membuat Daftar Isi (Sitemap) Keren di Blog . Jika Ingin Copas, Mohon Sertakan Link Sebagai Sumbernya. Semoga Bermanfaat.