Monday, August 22, 2011

Membuat Daftar Isi/Sitemap Blog Otomatis dengan Tampilan CSS


Assalamu’alaikum wr. wb.
Kali ini blog Horier akan membahas trik Blogger tentang Cara Membuat Daftar Isi/Sitemap Blog Otomatis dengan Tampilan CSS. Membuat Daftar Isi sangatlah penting bagi para pengunjung blog kita, sebab dengan adanya daftar isi maka semua artikel yang ada di blog kita akan terpampang layaknya kita pergi ke restoran dan melihat menu-menu yang disajikan. Nah, bila masih penasaran cara membuat daftar isi sangatlah gampang koq. Untuk live demo-nya ada di daftar isi blog ini. Trik ini aku peroleh dari web-nya Om Abu Farhan.

Cara Membuat Daftar Isi/Sitemap Blog Otomatis dengan Tampilan CSS :
1.     Login ke Blogger – New Post.
2.     Pilih opsi Edit HTML dan masukkan kode berikut.

<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
<script src="http://horier.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>

3.     Ganti “horier.blogspot.com” dengan alamat temen-temen blogger.
4.     Setelah selesai, tinggal di Post deh.


Mudahkan untuk Membuat Daftar Isi/Sitemap Blog dengan Tampilan CSS, jika teman-teman suka dengan artikel  Cara Membuat Daftar Isi/Sitemap Blog Otomatis dengan Tampilan CSS. Mohon  untuk klik tombol Share ya yang ada dibawah artikel ini.

Blog ini sedang mengukuti Kontes SEO, jadi bila teman-teman tidak keberatan mari kunjungi artikel’ku Top 1 Oli Sintetik Mobil-Motor Indonesia dan mohon dukungannya ya dengan meng-klik tombol Share dibawah artikel tersebut. Terima kasih kepada teman-teman yang mau untuk berpartisipasi, Salam Blogger . . . ^^

Selamat menikmati dan semoga berhasil . . . Alhamdulillah ^^


141 comments:

  1. uda pernah buat sob, efek jquery kan?
    btw : PERTAMAXXX visitback kwan

    ReplyDelete
  2. mksih bnget gan izin copy kode html nya,,sukses selalu

    ReplyDelete
  3. keren ane cuma sedot Js' nya...
    untuk dihosting sendiri biar ndk lemot..

    ReplyDelete
  4. mksih bnyak scriptnya ..
    kebetulan saya baru mulai pke blog.
    sangat bermanfaat

    ReplyDelete
  5. thnaks mas.. keren bentuknya.. :D

    ReplyDelete
  6. daftar isi memang penting sob biar pengunjung mudah mencari artikel yg di cari apalagi kalo tersusun seperti yg ada digambar, bagus!

    ReplyDelete
  7. Terima Kasih Banyak Mas Atas Tutorial Blognya...
    Sangat Membantu...

    ReplyDelete
  8. ok gan info nya sangat menarik banget,,,
    salam kenal ya,,,,

    ReplyDelete
  9. letak edit htpm di wordpres dimana mohon bantuan di
    agro_buah@yahoo.com

    ReplyDelete
  10. Informasi dari horier, selalu bermanfaat buat blogger lain, salam sukses buat Anda.

    Smoga sukses juga buat kontesnya ya mas....

    ReplyDelete
  11. @cek-info : iya sob pake jquery nih, oke kawan thanks ya ^^

    @baju : oke sob, moga berhasil ya

    @suwardi : siip sob

    ReplyDelete
  12. @xamthone : iya sob sama", selamat bergabung ya ke dunia blogspot ntar

    @boy : lebih siip kan mas aris, klo butuh trik lain ada di om abu farhan itu bagus"

    @peluang : uda dicoba kan sob? lebih hemat bandwith klo seperti itu

    ReplyDelete
  13. @klik : iya sob sama" ya ^^

    @surabaya : iya kawan, salam kenal juga ya

    @agrobuah : aduh klo untuk WP aku tidak sepenuhnya tahu sob coz gag pernah pake WP? maaf ya

    ReplyDelete
  14. @pelita : ahh biasa aja sob aku jadi tersandung nih, hehehehe..makasih banyak ya ^^

    ReplyDelete
  15. siip,, dengan ada'y daftar isi kita bisa mencari artikel ya mungkin kita butuhkan dengan mudah...
    makasih tas informasinya

    ReplyDelete
  16. Udah pernah aku terapin sob,,tapi sekarang ganti lagi..
    thanks infonya.

    ReplyDelete
  17. wah keren ya mas tampilan CSS nya, tapi saya tetep pake yang biasa saja. :)

    ReplyDelete
  18. wong ndeso numpang pinarak BOSS,, hehe

    ReplyDelete
  19. oh iya, kiranya sempet mampir dong ke blog saya. thnks

    ReplyDelete
  20. berkelana mencari singahan-singahan yang kiranya diperkenankan.. salam smuanya :)

    ReplyDelete
  21. Nich yang dari jaksel, nyimak blognya aja ya,,, hee

    ReplyDelete
  22. blog aku bahas tentang tanaman

    ReplyDelete
  23. cara ini biar menghjemat tampilan juga ya mas..
    mksih bnyak scriptnyaa

    ReplyDelete
  24. makasih banyak infonya Bang. keren.

    ReplyDelete
  25. assalamualaikum

    wah keren mas daftar isinya, ini nih yang dicari buat yang lagi belajar ngeblog, langsung dicoba deh

    ReplyDelete
  26. @jelly : oke sama"

    @gamat : iya sob bener banget..oke sama"

    @black : yg dulu gag menarik ya sob, coba yg ini deh dijamin mantebs

    ReplyDelete
  27. @jelly : oke sama"

    @gamat : iya sob bener banget..oke sama"

    @black : yg dulu gag menarik ya sob, coba yg ini deh dijamin mantebs

    ReplyDelete
  28. @xaon : iya sob, moga berhasil ya ^^

    @daw-xp : iya sob gpp itu'kan hak pribadi, hehehe..cuman klo ini lebih hemat bandwith

    @emping : iya sob, tunggu ya ^^

    ReplyDelete
  29. @jabon : monggo silakan wae panjenengan pinarak ^^

    @bibit : insyallah sob, coz ini limit bandwith

    @ekspedisi : silakan aja sobat singgah disini asal tidak melakukan komentar aktif coz SPAM

    ReplyDelete
  30. @jaksel : iya sob gpp, thanks ya uda mampir jauh-jauh, hehehehehe

    @jabon : iya sob

    @tanaman : makasih aja ke om abu farhan coz aku cuma share koq sob ^^

    ReplyDelete
  31. @pawana : iya sama" sob ^^

    @niam : iya sob sama" juga ya, moga berhasil di dunia blogging

    ReplyDelete
  32. Ntar tak coba mas...bagus kayaknya...
    memberatkan loading blog ndak mas itu...?

    ReplyDelete
  33. saya baru2 nie buat blog,, jadi kurang paham masalah nie....
    v saya coba dlu deh...
    makasih y...

    ReplyDelete
  34. nih dia yang kucari ketemu disini makasih ya infonya

    ReplyDelete
  35. @ferry : gag koq mas, klo untuk trik yg ini daftar isinya rapi jadi gag butuh bandwith banyak

    @depok : yoi sob

    @tangerang : moga berhasil ya sob, sukses deh ^^

    ReplyDelete
  36. @amazingers : langsung dicoba dunk sob, sukses yah

    ReplyDelete
  37. @luka : iya sob, salam kenal juga deh

    ReplyDelete
  38. ok juga nih tutorialnya,,
    aku akan langsung coba ke tkp nih

    ReplyDelete
  39. Terimakasih buat om Google, saya nyasar sampai sini. THanks yah infonya

    ReplyDelete
  40. Waduh dapat info baru nih. Saya bikin secara manual pake ilmu kopas. Agak lama sih dan ribet. Tapii efektif buat SEO dan SEF. Thansk

    ReplyDelete
  41. tips yang simple dan bermanfaat untuk para blogger, khususnya saya sendiri :)

    saya juga sudah menerapkan hal semacam ini, dan hasilnya menggembirakan karena selain mudah penerapannya dan maksimal kontribusi atas penerapan daftar isi yang ada di blog kita.

    jadi web kita gampang di crawl oleh search engine.. dan keberadaan web kita semakin jelas.. :)

    thanks atas sharingnya, sukses selalu

    salam sahabat :)

    ReplyDelete
  42. klo untuk di wordpress gimna caranya??/

    ReplyDelete
  43. nah ini yang ane cari" dari dulu gan,
    kirain blogspot gag bisa dikasih sitemap kayak WP :D
    thx gan . . .

    ReplyDelete
  44. buat wordpress yang simple kodenya ada gak bro?
    ada beberapa skrip, dah tak coba ggal mulu

    ReplyDelete
  45. Gan Makasih Banyak yah,. Keep Posting Gan,. Ane Setuju+Sudah dipraktekan sama Ane.,

    ReplyDelete
  46. Waaaahhh, ini say saya cari-cari sudah lama sampai lupa, Terimakasih banyak atas ilmunya, semoga bermanfaat dan mendapat balasan yang setimpal dr YME..

    ReplyDelete
  47. gampang banget gan triknya..
    makasih deh atas sgalanya...

    ReplyDelete
  48. thanks ya , sangat membantu infonya ..

    ReplyDelete
  49. bisa buat platform mana aja ni gan ?blogspot, wordpress?

    ReplyDelete
  50. thanks for the info. Work on it right away

    ReplyDelete
  51. thanks gan. infonya bermanfaat. Ini bisa buat wordpress?

    ReplyDelete
  52. Thanks for the trik. Tapi buat wordpress bisa gak ya? contoh tampilannya mana ya?

    ReplyDelete
  53. o begitu yaa terima kasih banyak ya gan atas infonya

    ReplyDelete
  54. mantabb sekali pertamax
    di tunggu sekali kunjungan baliknya yaa mas brow

    ReplyDelete
  55. wah sip makasih... moga berhsail saya coba

    ReplyDelete
  56. kebetulan saya baru belajar blogspot gan..
    makasih yah..

    ReplyDelete
  57. dengan adanya daftar isi memudahkan pengunjung untuk mencari artikel yang sudah kita tulis

    ReplyDelete
  58. topmarkotop sob
    http://callygraphycenter.blogspot.com/

    ReplyDelete
  59. mksih ya smoga saja bermafaat untuk smua nya

    ReplyDelete
  60. Memang mantap sih menu akordeon ini tapi membuat loading blog menjadi berat.

    ReplyDelete
  61. mmh kayanya mesti dicoba tuuhh diblog saya..makasih infonya gan..ditunggu info2 selanjutnya..

    ReplyDelete
  62. hari ini sya cek dah gak bisa gan
    error..

    Detect malware
    aa yang laen gak?
    makasih

    http://androidappmarkets.blogspot.com/#

    ReplyDelete
  63. langsung jadi gak nih min. . apa perlu setttingan lagi lainnya.

    ReplyDelete
  64. Terima Kasih Banyak Mas Atas Tutorial Blognya...
    Sangat Membantu...

    ReplyDelete
  65. dengan tampilan seperti ini bisa membuat visitor blog betah berlama-lama di blog kita

    ReplyDelete
  66. Mantap sob...
    terimakasih atas infonya gan...
    di tunggu kunjungannya

    ReplyDelete
  67. trimakasih atas ilmunya sob...
    n dalam kenal
    jangan lupa berkunjung sob......

    ReplyDelete
  68. info yang sangat bermanfaat. maju & sukses selalu gan..

    ReplyDelete
  69. Terimakasih gan sharenya,, artikelnya sangat bermanfaat sekali ,menarik ,artikelnya juga sangat bagus
    sukses ya

    ReplyDelete
  70. itu bisa langsung update sendiri gak gan klo ada posting baru?
    makasih infonya semoga bermanfat

    ReplyDelete
  71. Terimakasih bnayak atas informasinya :)

    ReplyDelete
  72. terimakasih atas informasinya sangat bermanfaat

    ReplyDelete
  73. terimakasih informasi dan tutorial lengkapnya,, hampir semua ada di blog sini..

    ReplyDelete
  74. terimakasih atas infonya! mantap dan berguna buat saya!

    ReplyDelete
  75. makasih infonya, saya lagi belar banyak..
    semoga bermanfaat, sukses buat admin..

    ReplyDelete
  76. Fungsi sitemap memang termasuk salah satu yang penting dalam seo,, mantap infonya sob

    ReplyDelete
  77. Sangat inofatif gan infonya.. sukses sllu.

    ReplyDelete
  78. smga brmanfaat sllu gan infonya bagus.

    ReplyDelete
  79. postingnya sangat bagus bermanfaat semoga sukses slalu

    ReplyDelete
  80. Ayo segera bergabung bersama kami di serasiqq Agen Poker & Domino QQ Online TERBAIK dan TERPERCAYA Se-ASIA
    Nikmati promo-promo menarik dari kami ;
    -BONUS CASHBACK TERBESAR mencapai 0.5% TANPA SYARAT
    -BONUS REFERRAL 10% SEUMUR HIDUP
    -EXTRA BONUS REFERRAL 10%
    Kelebihan serasiqq :
    * Minimal Deposit sangat TERJANGKAU, Hanya Rp. 10.000,-
    * Minimal Wd Rp. 20.000,-
    * Tidak ada maksimal Withdraw (menang berapa aja pasti di bayar)
    * Jackpot hingga Ratusan JUTA rupiah
    * Proses Depo dan WD SUPER CEPAT
    * Bisa dimainkan di Android, Iphone dan Ipad
    * CS yang Ramah dan Profesional siap melayani 24jam Online
    * Dalam 1 ID dapat memainkan 7 Games : Aduq, bandarQ, Domino QQ, Poker, capsa, BandarPoker dan sakong
    * Transaksi via BCA, MANDIRI, BRI dan BNI
    * 100% TANPA ROBOT Real Player vs Player
    Mari bergabung dengan kami "serasiqq"
    Agen Poker dan Domino Terbaik dan Terpercaya
    Penasaran mau daftar ?
    Untuk info selengkapnya silahkan hubungi kami di :
    - PIN BB : 22BE23ERD
    - YMail : cs_serasiqq@yahoo.com
    - LINE : serasiqq

    ReplyDelete
  81. Selamat Datang di BandarLotus4D

    Situs Agen Togel Online dan Live Dingdong Terlengkap.
    Mainkan 8 Pasaran Togel & 5 Jenis Live Dingdong Ball Hanya dengan 1 (SATU) USER ID.

    Dapatkan Promo & Bonus BandarLotus4D !!
    - Bonus 10% New Member
    - Bonus 2% Deposit Harian
    - Bonus 1% Cashback Mingguan
    - Bonus Referral 1% Mingguan

    Hadiah Pembayaran TOGEL
    4D X 9.500
    3D X 980
    2D X 98

    agen togel sgp

    Website kami : Bandarlotus4d.net

    ReplyDelete

Mari kita saling voting dan berkomentar. Jika kalian suka dengan artikel ini, ayo kita "Share" untuk membagikan informasi ini kepada teman yang lain agar lebih bermanfaat. Terima kasih banyak saya ucapkan, Salam Blogger teman . . .