Cara Membuat SiteMap Pada Blogger Kamu

Assalamu'alaikum Warahmatullahi Wabarakatuh

Hai gan! Anda seorang admin blogger? Sedang mencari gaya sitemap atau daftar isi untuk laman diblog anda? Nah kali ini saya sudah memposting 2 buah gaya sitemap yang mungkin kamu suka dari keduanya. Baca dibawah ini

Sitemap (Daftar isi/Peta Situs)

Adalah sebuah artikel yang di program khusus untuk membuat daftar isi secara otomatis dan tidak diupdate. Peta situs ini cukup penting juga dalam suatu website untuk meningkatkan pengetahuan pengunjung terhadap situs yang dikunjunginya.

Cara Memasang SiteMap
Untuk versi silahkan dipilih dari kedua dibawah ini

Versi 1

1. Masuk ke Blogger anda.

2. Pergi ke menu Template.

3. Lalu pilih Edit HTML.

4. Lalu temukan kata dengan cara tekan tombol CTRL+F secara serempak,
dan cari kata ]]></b:skin>.

5. Setelah ketemu kode tersebut tempatkan kode dibawah ini tepat diatas ]]></b:skin> tadi.

<style type="text/css">
/*--------MyBloggerLab TOC-----*/
.judul-label{
background-color:#E5ECF9;
font-weight:bold;
line-height:1.4em;
margin-bottom:5px;
overflow:hidden;
white-space:nowrap;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 1px 1px 4px #AAAAAA;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
color: #e9e9e9;
border: 2px solid white !important;
background: #6e6e6e;
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
background: -moz-linear-gradient(top, #888, #575757);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
}
.data-list{
line-height:1.5em;
margin-left:5px;
margin-right:5px;
padding-left:15px;
padding-right:5px;
white-space:nowrap;
text-align:left;
font-family:"Arial",sans-serif;
font-size:12px;
}
.list-ganjil{
background-color:#F6F6F6;
}
.headactive{
color: #fef4e9;
border: 2px solid white !important;
background: #1C8DFF;
background: -webkit-gradient(linear, left top, left bottom, from(#9dc2e7), to(#438cd2));
background: -moz-linear-gradient(top, #9dc2e7, #438cd2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc2e7', endColorstr='#438cd2');
}

6. Ganti kode merah menjadi link website/blog anda. Jika sudah maka klik "Simpan Template".

7. Lalu pergi ke menu Laman dan buat laman baru.

8. Setelah terbuka laman kosong pilih mode dari Compose ke HTML.

9. Lalu masukan kode di bawah ini kedalam mode HTML tadi.

<script src="http://nurulimaminfo.googlecode.com/files/daftarisiv2-pack.js">
</script>
<script src="http://indo-galaxy.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc">
</script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://deroc.googlecode.com/files/accordion-pack.js" type="text/javascript">
</script>

10. Ganti kode merah menjadi alamat link website/blog milik anda.

11. Setelah selesai semua tinggal kasih Judul Laman sama Publikasikan saja, kalau ingin lihat berhasil atau tidak. klik Pratinjau.

Versi 2
1. Masuk ke Blogger anda.

2. Buat Laman baru pada tab laman.

3. Setelah dibuat akan tampil layaknya menulis artikel, masuk ke mode HTML.

4. Setelah masuk ke mode HTML penulisan artikel laman, masukkan kode 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="http://makingdifferent.github.io/blogger-widgets/sitemappage.js" type="text/javascript"></script>
<script src="http://indo-galaxy.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script></div>

5. Ganti kode warna merah menjadi alamat link website/blog milik anda.

6. Buatlah judul laman dan jika ingin lihat berhasil atau tidaknya klik "Pratinjau".

7. Lalu Publikasikan laman sitemap milik anda.

Nah gimana sobat berhasil tidak cara diatas tersebut? memang tampilan dari sitemap yang saya sediakan ini tidak terlalu keren tapi intinya ada sitemap diblog kita dan memenuhi syarat dari google adsense saja.

Demikianlah artikel yang membahas mengenai Cara Membuat SiteMap Pada Blogger Kamu yang saya tulis dari saya kepada anda. Semoga berhasil.