Sunday, December 18, 2011

Moding | Cara Bikin Daftar Isi Gak Pake Javascript

Assalamu 'alaikum, s0b! Lagi ngapain, lo? Gue lagi bikin postingan, nih! Hasssyaaahh...jadi basa-basi yang gak banget. :p oke! Tanpa BO (*banyak omong -red) di antara sobat blogger yang lagi getol nampilin daftar isi di blognya, gue juga mau ngegosip soal gimana cara bikin daftar isi. Ssss.t....pelan-pelan, entar yang digosipin denger! :r


Daftar isi yang dalam bahasa kunonya table of contents atau sitemap biasanya make javascript (*js), gak tau itu pake json dari RSS Feed blog yang dikolaborasiin ama CSS biar keliatan keren di single page. So, mau gak mau (*terserah elo kok, s0b!) daftar isi harus ada di blog elo daripada gak ada. Manpaatnya? Tau, dong? :p


Assebenernya gue udah punya daftar yang pake js. Bisa elo liat disini! Kali ini gue mau share gimana cara bikin daftar isi tanpa make js. Emang bisa? Kan mending bisa daripada gak bisa! Betul...?! Kalo pake js buat manggil RSS Feed artikel mulai yang jadul ampe yang terbaru, loading page bakalan agak alot. So tanpa js, load jd sdikit ringan karna cuma berupa link. Bisa lo pasang dimana aja, kok! Di navigasi bawah header, di sidebar, dll.



Tinggal 3500-an karakter, kudu segera dikelarin, nih! :p Langsung aja caranya kayak gini:

1. Harus Tau Alamat RSS Feed Blogger dan Sitemap atom.xml Blog Elo
Gue kira elo udah tau pengertian dari kata-kata aneh diatas. So, langsung aja gue kasih contoh alamat feed blogger gue,



Contoh alamat link atom.xml blogger:



milih salah satu aja, mana yang mau elo pake! Trus ganti url blog gue ama url blog elo. Dengan njadiin link ke salah satu alamat tadi, itu dah bisa elo pasang dimana elo mau.

Bakda sungkem ke Pakdhe Alkatro gue dapet pencerahan.
Kalo cuma modal rss feed ama atom doang, jumlah artikel yang nongol max.25. Gimana kalo artikelnya ratusan bahkan ribuan? :D

So, langsung loncat ke jurus berikutnya:

2. Nambahin Kode Query
Kode query yang diarepin adalah nambahin atribut setelah default standar link diatas. Contoh:

http://ex3onfire.blogspot.com/feeds/posts/default?orderby=published&max-700

Kode HTML- nya jadi kayak gini, s0b:

<a href="http://ex3onfire.blogspot.com/feeds/posts/default?orderby=published&max-results=700" title="DAFTAR ISI">Daftar Isi</a>

Gue belom sempet narok di navigasi atau di sidebar, jadi gue pasang disini dulu:
Daftar Isi

Contoh yang pake atom.xml

http://ex3onfire.blogspot.com/atom.xml?max-results=700

<a href="http://ex3onfire.blogspot.com/atom.xml?max-results=700" title="DAFTAR ISI">Daftar Isi</a>

Daftar Isi

Output link yang diakses bakal nampilin 700 judul posting beserta headline-nya. Angka 700 bisa elo ganti suka-suka elo. Mau diganti 2011 atau 2012 juga boleh! :r jangan lupa juga ganti url-nya.

Mungkin itu dulu yang bisa gue sampein. Kurang lebihnya gue minta maap! Kayak di jurus kedua diatas kagak ada textarea-nya, silahkan dikopas ajah! (mumpung ada ijin dari gue :p ) Batre Nokia C1-01 yang gue buat mosting ini ampir abis, s0b! Tinggal 751 dari 5000 karakter yang disediain. :D Gue sok-sokan jadi blogger, tapi gue juga gak lupa mandi. So, gue mau mandi dulu! Moga manpaat! :)

Wassalam...

27 comments:

  1. mantap kang tipsnya,,, kalo yg pke js emang bikin loding jf lemoott....

    ReplyDelete
  2. wah jadiannya mantap... Saya gak tau ah... :D

    ReplyDelete
  3. nyimak aja kang..bil ngopi:r

    ReplyDelete
  4. @kang Yusup Laskar makasih, kang atas sharingnya! Tengkyu jg dah mampir.... :)

    ReplyDelete
  5. @kang ®obinhut jadian? Siapa yang jadian? Jadian ma siapa, kang? Cie...cie... :r

    ReplyDelete
  6. mantap kang, ane nyimak ae , ane pke scrip daftar isi kang sugeng

    ReplyDelete
  7. mantap kang, ane nyimak ae , ane pke scrip daftar isi kang sugeng

    ReplyDelete
  8. mantap... Harus di cobian ieu mah...!!

    ReplyDelete
  9. @kang SeMut silahkan, kang! Lanjut... :)

    ReplyDelete
  10. @eksak mantap kawan.. tp kalo bole nanyak,, pa ini g sama ma RSS feed yg otomatis ada di bagian atas di opmin 4 kalo di opmin 5 g nongol.. sy msi bingung apa lg kalo HTML sma skl g ngerti,, mohon pencerahannya kawan

    ReplyDelete
  11. @kang Agusductank sama, kang! Sama2 bingung ... :r gak jauh beda kok, kang! Cuma kita kan gk bs bikin link kalo kita gk tau alamatnya. Di rss feed yg biasa buat subscribe/langganan, alamat gk muncul pas kita mau liat.
    Nah dg tau alamat feed atau atom kita sendiri, kita bs bikin link dan meletakanya di mana aja kita suka! :D
    Trik kampungan kok, kang!

    ReplyDelete
  12. @eksak betul sob, waktu sy klik link diatas sy hanya lihat dr tampilannya saja ternya benar sy g tau link atom blog sy kalo g mampir disini,, mksh sob ilmunya,, mf sy mang banyak tanya krn sy ngeblog tanpa ilmu,, mf

    ReplyDelete
  13. @kang Agusductank gk ada orang yg gk berilmu! Kita sama2 dr gk tau, dan mau belajar. :) nanti klo ane gk tau jg tanya kang agus... :D

    ReplyDelete
  14. Telat... Dari pada ga telat...!

    Daftar isinya mantap kang! Lebih mantap lagi kalo dikasih ama om Google..

    ReplyDelete
  15. @Mas Sugeng nah itu kang! Mas punya yg dikasih gugel, ya? :) share, dong! Drpd gak dishare... ! :r

    ReplyDelete
  16. @eksak Lah itu yang di atas kang..! Submit saja ke google webmaster tool..

    ReplyDelete
  17. @Mas Sugeng sbnernya mw ganti ke feedburner, mas! Tp blum nemu tutornya, ada usul, mas? ... :)

    ReplyDelete
  18. Pertamax kang (nah lo), jdinya kayak daftr isi blog sy yg dulu y kang? Ada summary tetep kayak ada readmorenya ya kang (di home)

    ReplyDelete
  19. @kang Ilham Agung nah lo! Kang ilham dah tau... :r gk jd pertamax, dong! :D

    ReplyDelete
  20. wih tutorialnya jelas sekali :D cocok buat newbie seperti ane, makasih gan. Sekalian ijin praktek

    ReplyDelete
  21. Setuju sama di atas, tutorialnya mudah plus enak di baca

    ReplyDelete
  22. @kang Gedek ane jg newbie kok, kang! silahkan dicoba...
    makasih jg dah mampir, kang! :)

    ReplyDelete
  23. @kang Goresan hehehe... makasih dah mampir, kang! paling gk enak buat ane baca sendiri... :)

    ReplyDelete
  24. akhirnya ane ngerti kodenya, gan!

    <span style="background: none repeat scroll 0% 0% rgb(230, 231, 234); border: 1px solid rgb(115, 123, 140); padding: 1px;"><code>tulisan ente...!</code></span>

    sip, dah....! :p

    ReplyDelete