Dua Kalkulator Kehamilan Puisi Lucu & Romantis Kalimat/Ungkapan Indah Ucapan Selamat Malam Romantis Kata-2 GalauKoleksi Kata-Kata Gombal Mukio
Download Ringtone Lucu Gokil
Curhat Cewek Tentang Cowok
Punya Pacar vs LDR vs Jomblo
Alat Membuat Tulisan Gaul Alay
Alat Membuat Tulisan Terbalik
Daftar Semua Kategori:X
X
Ramalan Zodiak Hari Ini Kata Mutiara Cinta Kompilasi Lagu Nostalgia Cara Download Video Youtube Status Facebook LucuKumpulan SMS Cinta Romantis

Sitemap for blogger multi page 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 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 end--> 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.

Untuk penjelasan postingnya dalam mode HTML atau jika ada masalah dalam posting karena ada convert ganti baris oleh blogger, perhatikan pengaturan posting gambar dibawah ini (dashboard blogger baru sesuaikan saja):

cara posting sitemap 1

cara posting sitemap 2

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.

Komentar FacebookSembunyikanSelalu TampilkanJangan Pernah TampilkanStatus:
 

46 komentar terhadap "Sitemap Blogspot Seperti Wordpress Self Hosting"

  1. Siippppp,
    ijin copas gan......!
    semoga berhasil....!

    BalasHapus
  2. sudah dipasang dan benar2 berjalan bagusss...

    makasih warung bebas... ;)

    BalasHapus
  3. kawan... saya masih belum faham untu yang berwarna merah musti diganti. kalau untuk blogspot taruhnya dimana. mohon penejalsannya

    BalasHapus
  4. @INSICO: Pakai jasa gratisan situs penyedia penyimpanan file-file, bisa pakai google code dll.

    Kalau kesulitan pakai terus yang diatas gpp kok. Tapi sebaiknya kalau sudah bisa / punya penyimpanan file javascript online, silahkan diubah.

    Dalam pengalaman ngeblog nanti Agan pasti akan bisa kok...

    BalasHapus
  5. heeee... ternyata masih bingung juga neh, tapi sekarang sudah berhasil koq dipasang hanya saja yang merah belum diganti habis masih bingung. makasih kawan buat tipsnya

    BalasHapus
  6. sangat amat bagus......terima kasih.....

    BalasHapus
  7. Ijin copas Gan, mudah-mudahan berhasil. Terima kasih :):):)

    BalasHapus
  8. Lama dicari ketemu juga sitemapnya di sini, mantap banget....

    BalasHapus
  9. gagal ni kenapa yak! apa ada script yg sudah nda jln!

    BalasHapus
  10. @alimunandar: cara memasang di dalam blog harus rapat setiap codenya jangan sampai ada spasi

    BalasHapus
  11. error katanya disini

    undefinedfeeds/posts/default

    itu jadi undefined bukannya url seperti warungbebas.com/posts/default!

    BalasHapus
  12. aneeh.. kok tdk bisa.. ya sudahlah cari yg lain aja. pasrah...

    BalasHapus
  13. Wihh dah bisa mas, Thanks banget mas!!!

    BalasHapus
  14. @Warung Bebas Gratis Online: maksudnya itu di kasih dimana postingannya gan,,
    eh,,ini agan apa sista sih??

    BalasHapus
  15. @Anen DOS DIOSAS: Bisa di static page, ataupun di postingan.

    BalasHapus
  16. @Warung Bebas: apa saya bisa berkonsul dengan anda secara online?

    https://www.facebook.com/anen.bolo.bolo

    BalasHapus
  17. keren banget nih. makasih dah share

    BalasHapus
  18. Terimakasihhh,, walau rada ribet, tapi hasilnya kereeennn,,

    BalasHapus
    Balasan
    1. Sebenarnya tidak ribet, :) yang dianggap ribet sebenarnya biasanya karena ada beberapa pilihan (opsi), iya kan? jadi masih harus memahami, tidak langsung copas jadi...

      Hapus
  19. Tooltipnya keren Gan :) biso nampilin cuplikan konten
    Q mau nanya tooltip yang kayak gitu gmn y caranya? soalnya tooltip yang kemarin agan share cm bisa nampilin title post saja beda sama yang ini.

    BalasHapus
    Balasan
    1. Sama saja inti scriptnya ada di:

      /2010/10/cara-pasang-tooltip-keren-di-blog.html

      Disitu kan ada cara membentuk sebuah tooltip.

      Nah yang Anda bilang hanya judul saja adalah:

      /2011/02/otomatisasi-tooltip-link-gambar-akronim.html

      Padahal ini juga merujuk pada yang pertama diatas. Jadi script kedua itu hanya membantuk HTML lewat javascript, tapi tetap merujuk pada core (inti) tooltipnya.

      Nah pada sitemap ini juga begitu, membentuk HTML dari data feed tapi tetap menggunakan Core sama. Untuk melihat cara membentuk tetap merujuk pada link pertama diatas. Disana ada contoh-contohnya. Nah kalau mau bikin sendiri, ya harus membuat HTML, baik manual maupun pakai javascript, nah kalau harus membuat yang general untuk semua template kan susah? so yang otomatisasi diatas itu sudah maksimal yang saya bisa.

      Hapus
    2. Wah mantab penjelasannya, makasih y Gan :)
      Penasaran saja misal tooltip yang ada di index blog ataupun yang di /category/ bisa sama kayak yang di sitemap ini gimana caranya.
      Dengan asumsi gini, ni cuma contoh blog saia :
      <TD WIDTH='483px'>
      <b:if cond='data:post.link'>
      <A expr:href='data:post.link'><data:post.title/></A>
      <b:else/>
      <b:if cond='data:post.url'>
      <A expr:href='data:post.url' title='xxxx'><data:post.title/></A> // Ini Gan yang nanti saia kasih tooltip yang bisa load content secara summary //
      <b:else/>
      <data:post.title/>
      </b:if>
      </b:if>
      </TD>
      Tapi saia masih bingung gimana caranya, penjelasan Agan sudah membantu dalam hal prosesnya gimana.
      Yang jelas saia bener2 salut dengan karya Sampean :-bd maju terus :)

      Hapus
    3. Wah maaf Gan tu yang di atas data: post.xxx kena str replace jd emoticon, maaf ^:)^

      Hapus
    4. Gpp meskipun jadi emoticon, saya ngerti maksudnya.

      Begini, kalau cara saya biasanya adalah dengan memasang lengkap default dulu. Misal untuk popular post. Nah disitu nanti kan ada kode-kode pemanggil default blogger.com. Itu yang kita gunakan dalam model kita sendiri. Perlu dipahami begini untuk kasus sederhana.

      Bentuk penulisan langsung formatnya:

      <data:post.title/>

      Tapi saat diinsert agar menjadi attribute sebuah tag HTML, misal untuk dijadikan title, maka akan menjadi:

      expr:title='data:post.title'

      Nah misalnya lengkapnya gini:

      <a expr:title='data:post.title' expr:href='data:post.link'><data:post.title/></a>

      ===

      Lalu bagaimana agar menjadi tooltip otomatis? Caranya sama dengan title diatas namun karena ada tambahan karakter maka perlu kombinasi, begini misalnya:

      <a expr:href='data:post.link' expr:onmouseover='&quot;tooltip.show(\&quot;Permanent link to: &quot; + data:post.title + &quot;\&quot;)&quot;' onmouseout='tooltip.hide()' rel='bookmark'><data:post.title/></a>

      Cara ini berlaku untuk semua bentuk pemanggilan data apapun di template blogger.com, jadi pertama harus melihat defaultnya saat menambah widget.

      Kode-kode diatas akan terconvert menjadi emoticon, tapi kalau ingin diubah kan tinggal lihat di daftar lengkap kode dibawah, lalu balik dah. Dan akan jadi.

      Hapus
    5. Wah mantab dah :-bd
      Coba tak praktekan dulu Gan :)
      Kalau ada error kan bisa nanya lagi
      heuheuheu

      Lagian saia mah sukanya cuma posting gambar doang :d hehehe

      Hapus
  20. aku coba berhail tapi img ga keluar

    BalasHapus
    Balasan
    1. Beberapa sebab image tidak keluar:

      1. Memang tidak ada gambar dalam sebuah posting.

      2. Feed blog disetting ke Short.

      3. Feed blog disetting ke Until Jump Break, namun potongan artikel bagian atas tidak ada gambar. Blog ini menggunakan setting ini, dan agar keluar gambar semua postnya, maka tiap awal posting selalu diberi gambar meski kecil saja.

      Untuk masalah pertama, jangan dibahas lagi, lha darimana datangnya gambar?

      Sedangkan posint 2 dan 3, paling mudah setting saja ke Full

      Lihat pengaturan blog Anda di dashboard blog. Diatas itu kalau setting bahasa dashboard blogger pake bhs inggris, kalau Indo sesuaikan saja.

      Hapus
  21. wah script sitemapnya mantap bro lain dari pada yang lain.....!!!
    kalau membuat sitemap dari script diatas menjadi urut abjad gmna...??

    BalasHapus
    Balasan
    1. Kan ada opsi urutkan pakai judul, itu adalah urut abjad huruf awal judul. Tentu hanya diterapkan pada data terpanggil. atau halaman yg muncul.

      Kalau ingin urut abjad dalam parameter seluruh total posting jelas berat, karena harus membuka seluruh posting, gimana kalau postingnya ribuan? Kalau mau google suruh ngurutkan database tidak bisa, karena tidak ada perintah di feed google memanggil data dalam urutan huruf, yang ada by published, by updated, yg intinya pada tanggal.

      Hapus
  22. MSIH BINGUNG NIH GAN.. UDAH SAYA COBA TAPI LUM BISA NIH. BTW, KODE DI ATAS DI TARUH DIMANA?? ANE TARUH DI BAWAH "BODY" TAPI KOK LUM BISA YAH??

    BalasHapus
    Balasan
    1. Hihihi... ;)) ;)) kok sampe ke body segala, coba baca bagian akhir dari post diatas:

      {block}... setelah kode sudah siap sesuai selera silahkan Anda posting di halaman statis, atau di postingan (dalam MODE HTML)...{/block}

      Nah mana ada pemasangan di template? jadi tinggal posting saja kodenya, masukkan dalam page statis atau posting biasa.

      Hapus
    2. Komentar ini telah dihapus oleh pengarang.

      Hapus
  23. eeeeellllllllllllllllllluuuuuuuuuuuuuuar biasaaaaaaaaaaaaaaaa...!!

    BalasHapus
  24. project selanjutnya...
    bookmark dlu... !!

    BalasHapus
  25. bacaan 'Free Blogger Sitemap' nya bisa di hapus...?

    BalasHapus
    Balasan
    1. Bisa, yang script untuk "NOT FREE BLOGGER SITEMAP" :)) bisa pake ajax dan muncul dihalaman manapun seperti di blog ini. :), coba klik Daftar Isi diatas, akan terbuka langsung dihalaman ini.

      Hapus
  26. Trima kasih mas bro,, script nya bekerja di blog ane

    http://makalahkitasemua.blogspot.com/2012/07/sitemap.html

    BalasHapus
  27. agak bingung nih gan,,maklum masih newbie nih mas..

    BalasHapus
  28. sitemap sudah jalan sob tapi klik ke halaman 2nya kok tidak bisa ya, terima kasih sebelumnya

    BalasHapus
  29. wah eror mulu gan, pdhl udah pas prosedurnya :(

    BalasHapus
  30. Keren dan bagus juga ini mas dipasang diblog untuk halaman sitemapnya soalnya lain daripada yang lain.

    BalasHapus

Links
About | Contact Us | Info Iklan | Privacy Statement | Disclaimer | Link to Us | Help | Whois | Ping  Sitemap
Copyright © 2009  Warung Bebas. Hosted on Blogger.Com Top
Warung Bebas