Sitemap Blogspot Seperti Wordpress Self Hosting

Artikel ini copas dari Blog/Web Warung Bebas semoga bermanfaat...

Cara memasang sitemap blog yang menggunakan blogger.com namun memiliki fitur layaknya blog wordpress self hosting. Sangat bermanfaat jika postingan Anda sudah sangat banyak, karena terbagi menjadi halaman-halaman sehingga tidak harus meload data terlalu banyak dan tentu saja menjadi ringan aksesnya, namun tidak membuang kesempatan daftar artikel akan dibuka oleh pengunjung blog.
Kalau ingin tahu seperti apa, lihat saja di halaman Sitemap Warung Bebas. Dan widget dibawah ini akan membuat Anda memiliki halaman sitemap seperti itu. Sitemap ini juga dilengkapi fungsi filter kategori, tanggal dan lainnya, coba saja deh di klik yang ada untuk tahu lebih jelas.

Update (10 Desember 2011)

Script ini telah diupdate dan kompatible dengan browser firefox baru, dan update browser lainnya, kecuali IE versi lawas.

Info Update

Untuk melihat tampilan contoh yang langsung diterapkan pada blog Anda, silahkan gunakan form dibawah ini, lebar mengunakan 600 pixel, namun tampilan nanti saat dipasang di blog akan mengikuti lebar area dimana scriptnya ini diletakkan. Dengan form dibawah ini, nanti halaman yang muncul, bisa Anda coba-coba navigasi sitemapnya untuk blog Anda sendiri.
Ada dua opsi percobaan, yaitu menggunakan tooltip atau tidak, ini selain masalah selera, juga menguji apakan isi postingan Anda bermasalah dangan tooltip, jika dengan tooltip tampilannya ternyata tidak berantakan alias rapi maka menggunakan fitur tooltip lebih direkomendasikan. Script sitemap ini didesign menyatu secara otomatis dengan script tooltip ini. Jika tidak ditemukan fitur tooltip, maka deskripsi dan gambar diganti title.

Form Percobaan Sitemap

Form design by WarungBebas.Com

Masukkan URL blog Anda pada form diatas, misal:
"http://www.warungbebas.com", "http://namablog.blogspot.com"

OK langsung saja ke cara pasangnya bagi yang suka:
Berikut ini adalah kode lengkapnya, lalu ikuti penjelasan lanjutannya untuk opsi yang bisa Anda pilih.
<style type='text/css'>
/*style tabel sitemap*/
.tabel{border-collapse:collapse;border-color:#ccc}.tabel tr{border:1px solid #ccc}.tabel tr.terang{background:#fff}.tabel tr.gelap{background:#f9f9f9}.tabel tr:hover{background:#f0f0f0}.tabel td{border:1px solid #ccc;padding:2px 5px}.tabel th{border:1px solid #ccc;padding:2px 7px;background:#f0f0f0}.float-left-albri-over{margin:3px 10px 2px 0;padding:5px;border:1px solid #ccc;background:#f0f0f0}
/*style navigation sitemap*/
.fs_navi{clear:both;border-bottom:1px solid #ccc;margin-bottom:3px;padding-bottom:5px;line-height:2.2em}.fs_navi a,.fs_navi span{text-decoration:none;border:1px solid #BFBFBF;padding:2px 5px;margin:2px}.fs_navi a:hover,.fs_navi span.current{background:#f0f0f0}.fs_navi span.current{font-weight:bold}#cl_option{border-bottom:1px solid #ccc;font-weight:bold;padding-bottom:3px}#cl_option a{padding:2px 5px;border:1px solid #bfbfbf;text-decoration:none}#cl_option a:hover{background:#f0f0f0}.tabel .tiny a{font-size:95%}
</style>

<script src='http://javascript-share.googlecode.com/files/wb.js'></script>

<a id='wb_ttauth' href='http://www.warungbebas.com'>Warung Internet</a>
<script type='text/javascript'>//<![CDATA[
wb.tooltip_setting = {
func : "Tooltip",
top : 5,
left : 5,
maxw : 300,
speed : 20,
timer : 40,
endalpha : 95,
alpha : 0,
style_plus : "#tt{border:1px solid #677FC2;background:#eceff5}#ttcont{background:#677FC2;color:#fff}"
};
//]]></script>
<script src='http://javascript-share.googlecode.com/files/wb_tooltips.js'></script>

<div id='fsmenustmp'><noscript><u>Saat ini setting javascript browser Anda tidak aktif</u><br/><small>Halaman Sitemap ini hanya bisa diakses dengan mengaktifkan javascript browser.</small></noscript></div><div id='cl_option'><center><br/><br/><br/><img class='fsnott' src='http://static.ak.connect.facebook.com/images/loaders/indicator_white_large.gif' /><br/><br/><br/><br/><style>#cl_option{border-bottom:0}</style></center></div><div id='cl_content_list'></div><a href='http://www.warungbebas.com' target='_blank' id='wb_stmpauth'>Free Blogger Sitemap</a><script id='fs_sitemap'></script>
<!--parameter sitemap start-->
<script type='text/javascript'>//<![CDATA[
wb.stmp = {
/*PEGATURAN SITEMAP*/
c : {
blog : "http://www.warungbebas.com", //<= URL blog, tanpa diakhiri tanda "/"
name : "Warung Bebas &#8482;", //<= Title blog
count : 50, //<= Jumlah posting per halaman sitemap
sum : 200 //<= Panjang huruf deskripsi (jika tooltip diaktifkan)
},
/*PEGATURAN BAHASA SITEMAP*/
l : {
a : "Urutkan:",
b : "By Tanggal Posting",
c : "By Judul Artikel",
d : "Filter:",
e : "Tampilkan Semua",
f : "Reset",
g : "Untuk menampilkan semua daftar setelah difilter",
h : "<b>Sitemap Halaman %1%</b> (menampilkan %2% posts, dimulai posting ke %3% s.d %4% dari total %5% posting)",
i : "No",
j : "Judul Posting",
k : "Tanggal",
l : "Filter posting yang dipublikasikan pada",
m : "Sitemap: Halaman %1%"
},
/*PEGATURAN BAHASA DAN SETTING NAVIGATION*/
p : {
a : "/p/sitemap.html", //<= URL sitemap (edit setelah post)
A : "page", //<= parameter page (?page=1)
b : ["Page", "Previous", "Next", "First", "Last"],
B : "Page %1% of %2%",
c : "&laquo; First",
C : "Last &raquo;",
d : "&laquo;",
D : "&raquo;",
e : "<span class='extend'>...</span>",
E : 4, //<= Jumlah tombol page ditampilkan
f : 2, //<= Jumlah tombol lompatan ditampilkan (jika halaman banyak akan muncul)
F : 5 //<= Kelipatan halamam lompatan yang ditampilkan
}
};
//]]></script>
<!--parameter sitemap end-->
<script src='http://javascript-share.googlecode.com/files/wb_sitemap_v2.js'></script>
Kode warna hijau itu adalah style atau css, bagi Anda yang mahir CSS bisa mengeditnya sendiri sesuai selere, sengaja diletakkan opsional agar sesuai selera Anda.

Kode warna merah adalah kode tooltip, jika Anda tidak ingin menggunakan tooltip dalam sitemap, maka Anda hapus kode warna merah itu semua. Bagi kawan yang sudah mengaktifkan script tooltip yang ada di posting Cara Pasang Tooltip, maka hapus juga kode warna merah diatas, karena tooltip sudah aktif sebelumnya.
Bagian <!--parameter sitemap start--> sampai dengan <!--parameter sitemap start--> itu adalah parameter-parameter pangaturan, Anda bebas mengeditnya sesuai keinginan, dan bagian yang dirasa kurang jelas sudah diberi penjelasan pada kode diatas. Namun ada beberapa yang diberi warna biru, itu adalah bagian yang penting dan perlu diganti sesuai blog Anda. Untuk bahasa bisa Anda edit atau bisa juga diganti bahasa inggris untuk blog bahasa inggris. Oya ada yang mungkin bingung dengan maksud kode yang seperti ini:
a : "/p/sitemap.html", //<= URL sitemap (edit setelah post)
Itu adalah URL dimana kode ini diposting, jadi biasanya diedit setelah posting di publish. Bisa menggunakan alamat relatif seperti diatas atau bisa Anda tulis penuh seperti:
a : "http://www.warungbebas.com/p/sitemap.html",
Bagian tersebut adalah induk dari URL untuk halaman sitemap, jadi nanti akan ada URL seperti berikut:
http://www.warungbebas.com/p/sitemap.html?page=1
http://www.warungbebas.com/p/sitemap.html?page=2
http://www.warungbebas.com/p/sitemap.html?page=3
http://www.warungbebas.com/p/sitemap.html?page=4
Untuk tombol navigation (page navigation) itu bisa Anda coba-coba deh mengatur angka-angkanya kalau mau, tapi setting standarnya seperti diatas itu, dan akan muncul seperti di halaman percobaan tadi, namun jika halaman Anda lebih lebar ukurannya seperti di sitemap Warung Bebas yang full page, mungkin perlu juga ditambah tombolnya. Sedangkan bahasanya juga bisa Anda edit.

Jika Anda merasa penjelasan ini membingungkan, maka pokoknya posting saja semua (dalam MODE HTML) dan hanya edit saja kode yang warna biru, dan lainnya ikut pengaturan standar diatas.

Nah semua kode sudah dijelaskan setelah kode sudah siap sesuai selera silahkan Anda posting di halaman statis, atau di postingan (dalam MODE HTML). Dan selesailah, pemasangan sitemap ini. Asalkan Anda mengikuti petunjuk diatas, mengganti yang dijelaskan agar diganti, maka pasti sitemap akan muncul dan berfungsi dengan baik.

Info untuk pengguna script:
Anda yang menggunakan script yang ada di Warung Bebas mohon memberi vote (starred bawah Project Information) di halaman:
http://code.google.com/p/javascript-share/
Semua script widget yang di share buatan Warung Bebas semua diletakkan disitu. Ini bukan untuk kepentingan Warung Bebas sendiri, karena kalau yang digunakan sendiri disimpan di hosting berbayar, namun demi berlangsungnya keberadaan file hosting gratis di googlecode tanpa batasan bandwidth tersebut.
Karena dulu Warung Bebas punya halaman seperti itu namun karena digunakan sendiri dalam jumlah load tinggi dan tidak ada starred dari user lain, dihapus oleh google dan dibanned untuk menggunakan layanan itu lagi, makanya halaman diatas itu menggunakan akun baru. Kalau sampai dihapus lagi, maka banyak dari widget blog kawan-kawan lain juga tidak akan berfungsi. Dan Warung Bebas tidak bertanggung jawab, atas kerusakan karena dihapusnya akun javascript-share di googlecode.
Jika Anda tidak ingin memberi vote sebaiknya download filenya dan gunakan hosting Anda sendiri, jangan langsung memanggil ke URL:
http://javascript-share.googlecode.com/files/nama_file.js
Dengan begitu maka lebih aman jika file terhapus, namun risikonya Anda tidak akan menikmati update (karena jika ada bug dan diperbaiki, file selalu diperbarui).
Terima Kasih.

Semoga bermanfaat.