Cara Membuat Site Map Blog Otomatis dan Seo Friendly

Loading...
Loading...

Cara Membuat Site Map Blog Otomatis dan Seo Friendly - Berikut ini saya tuliskan cara buat site map blog, Cara Membuat Sitemap Otomatis, membuat sitemap di blogger, membuat sitemap website , membuat daftar isi blog , membuat blog seo friendly.


Cara Membuat Sitemap Otomatis - Blogger

Berikut cara membuat sitemap / daftar isi otomatis di Blogger :

Versi Pertama,

1. Daftar Isi / Sitemap Tanpa Scroll

Masuk ke akun blogger
Pilih menu 'Laman' atau kalau dalam bahasa inggris "page"
Buat laman baru (Klik tombol 'Laman baru' > 'Laman kosong') atau "New Page"



Gambar: Cara Membuat Site Map Blog Otomatis dan Seo Friendly

Setelah halaman terbuka pilih mode 'HTML' (lihat gambar)

Gambar 2. Cara Membuat Site Map Blog Otomatis dan Seo Friendly


Beri judul Daftar Isi atau Sitemap (judul terserah anda bisa juga dengan nama lain)

Setelah memilih judul silahkan copy kode berikut lalu paste-kan di halaman kosong tadi :
<script style="text/javascript" src="https://cdn.rawgit.com/D-dig/js/gh-pages/sitemap1.js"></script><script src="http://www.infokubagus.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Ganti tulisan 'www.infokubagus.com' di atas dengan alamat blog anda

Publikasikan

2. Daftar Isi / Sitemap Ber-scroll


jika anda ingin membuat daftar isi atau sitemap yang memiliki scroll di samping kanan (seperti di gambar),


maka ganti kode pertama tadi dengan kode berikut ini (ingat ! anda harus menghapus kode yang pertama sehingga tidak terjadi doble) :


<div style="background-color: #dde1e3; border: 1px solid #999999; height: 100px; overflow: auto; padding: 10px; width: 100%px;">
<script style="text/javascript" src="https://cdn.rawgit.com/D-dig/js/gh-pages/sitemap1.js"></script><script src="http://www.abi-mc.tk/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
</div>

Klik publikasikan


Nilai '100' pada 'height' bisa dirubah sesuai dari panjang daftar isi yang diinginkan. Jangan lupa ganti kode 'www.abi-mc.tk' di atas dengan alamat blog anda.


3. Versi Ketiga

Ganti Kode diatas dengan 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="https://googledrive.com/host/0B2ww3WS8P1MJM2JkeHlyUVp4dnc/" type="text/javascript"></script>
<script src="http://www.infokubagus.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

Ganti www.infokubagus.com dengan url blog anda

Klik publikasikan 

Lihat hasilnya :

Gambar: site map keren

Demikian pembahasan Cara Membuat Site Map Blog Otomatis dan Seo Friendly. Selamat mencoba, jika ada yang kurang paham silahkan berkomentar.
Loading...