Membuat Daftar Isi Blog (2)


Pada kesempatan tedahulu saya pernah mengulas bagaimana cara membuat daftar isi
pada blog saya posting di sini,
namun karena daftar isi tersebut menggunakan javascript, sehingga agak sedikit membebani loading
blog sehingga yang saya sendiri tidak memasangnya di blog ini dengan alasan tidak mau blog ini terlalu berat
ketika di akses oleh para pengunjung. Untuk mencari alternatif lain, kita bisa menggunakan engine pencari
blogger sendiri. Namun untuk melakukan ini, tentu saja harus sedikit memodifikasi kode template.
Sudah tidak sabar untuk membuat daftar isi di blog? caranya seperti ini :



Langkah #1

  1. Sign in di blogger dengan ID anda




  2. Bilsa sudah berada di halaman dashboard, klik Layout.




  3. Klik tab Edit HTML




  4. Klik link bertuliskan Download Template Lengkap. Silahkan di save dulu untuk backup (penting).




  5. Beri tanda tik/cek pada kotak kecil di samping tulisan Expand Widget Template. Tunggu beberapa saat.





  6. expand widget template




  7. Lihat ke bagian body template, lalu cari kode seperti ini :









  8. <b:include data='post' name='post'/>






  9. Delete / hapus kode tersebut, lalu ganti dengan kode berikut ini :













  10. Klik tombol Simpan Template.




  11. Selesai. Langkah pertama sudah selesai.






Langkah #2




  1. Klik tab Elemen Halaman.




  2. Klik tulisan Tambahkan sebuah Elemen Halaman.





  3. Setelah muncul window baru, klik tombol TAMBAHKAN KE BLOG untuk yang HTML/JavaScript.




  4. Copy lalu paste kode berikut :







  5. <a href="http://NamaBlogAnda.blogspot.com/search?max-results=200">Daftar isi&raquo;</a>






  6. Ganti NamaBlogAnda nama blog anda sendiri.
    Contoh : nama blog saya adalah kolom-tutorial. ganti angka 200 dengan nomor
    yang lainnya (kalau mau). Nomor ini adalah jumlah posting yang ingin di munculkan ketika link daftar isi di klik.




  7. Klik tombol Simpan Perubahan.




  8. Selesai.





Keterangan tambahan :



Jika anda sedikit mengerti tentang CSS, anda bisa memodifikasi bentuk dari daftar isi ini,
apakah mau di kasih backround gambar, bentuk huruf yang berbeda atau apa saja dengan mengubah
kode yang di sini (ini adalah kode yg ada pada Langkah #1 di atas) :








<div style="padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#EAE9E9;color:#406A0E;">







Untuk melihat contoh seperti apa daftar isi ini? silahkan klik → Daftar isi »



Artikel ini dapat juga di jumpai pada blog teman saya OOM (sorry om ga ngelink ke artikelnya, saya
cari-cari ga ketemu, apa dah di hapus ya?)



Selamat berkreasi !
Share on Google Plus

About Admin

    Blogger Comment
    Facebook Comment

6 komentar:

  1. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  2. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  3. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  4. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  5. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  6. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus

Labels

blogspot tutorial ( 112 ) blog tutorial ( 110 ) blogging tutorial ( 34 ) download gratis ( 27 ) guest post ( 26 ) free tool ( 24 ) free template ( 23 ) SEO ( 17 ) wordpress ( 17 ) blogger tutorial ( 9 ) the mez template ( 9 ) Belajar SEO Blogger ( 8 ) freeware ( 8 ) Blogging relax Tips ( 7 ) Dokumentasi The Mez template ( 7 ) download template ( 7 ) website info ( 7 ) google adsense ( 6 ) google service ( 6 ) modifikasi blog ( 6 ) aksesori blog ( 5 ) asal posting ( 5 ) blogger isu ( 5 ) browser ( 5 ) free icons ( 5 ) menu navigasi css ( 5 ) sahabat ( 5 ) software gratis ( 5 ) Blog ( 4 ) SEO khusus blogger ( 4 ) cool website ( 4 ) edit template ( 4 ) komputer ( 4 ) Blogspot ( 3 ) Firefox ( 3 ) Kampanye Damai Pemilu Indonesia 2009 ( 3 ) Riset Keyword ( 3 ) SEO Contest ( 3 ) Tanya Saja ( 3 ) anti virus ( 3 ) google docs ( 3 ) kotak komentar ( 3 ) navigasi dengan css ( 3 ) opera ( 3 ) template 3 kolom ( 3 ) Bisnis Online ( 2 ) Iklan anda ( 2 ) PhotoShop ( 2 ) SEO Khusus blogspot ( 2 ) Template support ( 2 ) Yahoo ( 2 ) add-on ( 2 ) alexa rank ( 2 ) backup widget ( 2 ) blog tools ( 2 ) drop down menu ( 2 ) fitur blogger ( 2 ) hosting ( 2 ) read more ( 2 ) tutor wordpress ( 2 ) uang gratis ( 2 ) unek-unek ( 2 ) virus ( 2 ) weatern union ( 2 ) wordpress tutorial ( 2 ) yahoo icon ( 2 ) Biisnis Internet ( 1 ) English ( 1 ) Google chrome ( 1 ) HUT RI ( 1 ) I'm is back ( 1 ) Info Browser ( 1 ) Jasa Pembuatan Blog ( 1 ) Link Building ( 1 ) avatar ( 1 ) banner ( 1 ) bisnis ( 1 ) cari duit di internet ( 1 ) domain ( 1 ) ebook ( 1 ) favicon ( 1 ) free ebook ( 1 ) google talk ( 1 ) hiasan blog ( 1 ) internet business-RM ( 1 ) kasus ( 1 ) kontes ( 1 ) langka tapi nyata ( 1 ) membuat navbar ( 1 ) membuat readmore ( 1 ) mencari uang di internet ( 1 ) menu dropdown ( 1 ) panduan bisnis online ( 1 ) panduan blogger ( 1 ) pasang iklan ( 1 ) plugin wordpress ( 1 ) rss button ( 1 ) search engine ( 1 ) shoutbox ( 1 ) sosok favorit ( 1 ) table of content ( 1 ) uang kopi ( 1 ) video ( 1 ) video comedy ( 1 ) wallpapers ( 1 ) wordpress plugin ( 1 )