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.
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 ™", //<= 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 : "« First",
C : "Last »",
d : "«",
D : "»",
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.
Kecepatan
website atau blog saat diakses menjadi salah satu faktor penting, bukan
saja demi kenyamanan pengunjung, namun juga bagi search engine. Sebab,
itu Google juga memasukkan kecepatan akses website sebagai salah satu faktor dalam ranking di Google.
