Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di die-silver.blogspot.com

Cara Membuat Daftar Isi Pada Blog

Kali ini saya akan coba bahas tentang pembuatan sebuah Daftar Isi pada Blog. Fungsinya ya seperti di buku-buku yang pernah Anda baca, menampilkan seluruh judul artikel yang ada pada buku. Dan tentunya kalo sekarang ya menampilkan seluruh judul pada blog. Cara ini bisa memudahkan kita dalam penulisan link ke postingan-postingan kita yang lalu. Tidak seperti saya yang membuat kumpulan link dengan manual. Tapi dengan adanya daftar isi ini, setiap postingan yang masuk akan secara otomatis tampil pada widget Daftar Isi ini. Tertarik untuk mencoba membuatnya? Check it out!

Langkah Pertama:

  1. Login ke Blogger kemudian ke Layout/Tata Letak
  2. Pilih Edit HTML
  3. Copy kode berikut ini:
    #toc { border: 0px solid #000000; background: #ffffff; padding:2px; width:495px; margin-top:10px;}

    .toc-header-col1, .toc-header-col2,

    .toc-header-col3 { background: #B5CBFA; color: #000000; padding-left: 5px; width:250px;}

    .toc-header-col2 { width:75px;}

    .toc-header-col3 { width:125px;}

    .toc-header-col1 a:link, .toc-header-col1 a:visited,

    .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link,

    .toc-header-col3 a:visited { font-size:100%; text-decoration:none;}

    .toc-header-col1 a:hover,

    .toc-header-col2 a:hover,

    .toc-header-col3 a:hover { font-size:100%; text-decoration:underline; color:#3D3F44;}

    .toc-entry-col1, .toc-entry-col2, .toc-entry-col3 { padding-left: 5px; font-size:100%; background:#f0f0f0;}
  4. Taruh kode tadi di atas kode ]]></b:skin>
  5. Simpan pengeditan yang sudah dilakukan


Langkah Kedua:
  1. Pilih Layout/tata letak pada blogger
  2. Pada menu Elemen Halaman, tambah gadget di sebelah atas elemen Post
  3. Pilih HTML/Javascript dan paste kode di bawah ini ke dalamnya:
    <div id="toc"></div>
  4. Simpan tanpa judul
  5. Jika sudah klik Tambah Gadget lagi dan posisinya bisa Anda tentukan
  6. Paste kode berikut pada konten HTML/Javascript
    <div id="toclink"><a href="javascript:showToc();">Lihat
    Daftar Isi</a><br/><br/></div>
    <script style="text/javascript"
    src="http://home.planet.nl/~hansoosting/downloads/blogtoc.js"></script>
    <script
    src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>
    Ganti kalimat berwarna merah dengan alamat blog Anda
  7. Beri judul gadget dengan Daftar Isi atau bisa dengan kalimat Anda sendiri
  8. Klik tombol Simpan dan lihatlah hasilnya


Eits, dalam pembuatan daftar isi ini, ada dua macam versi. Versi keduanya adalah sebagai berikut...
    Dasbor--->Layout--->Edit HTML
  1. Klik Expand Template Widget terus cari kode berikut ini:
    <b:include data='post' name='post'/>
  2. Ganti kode tadi dengan kode di bawah ini:
    <b:if cond='data:blog.homepageUrl != data:blog.url'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <a expr:href='data:post.url'>
    <div style='padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#EAE9E9;color:#406A0E;'>
    <data:post.title/></div></a>
    <b:else/>
    <b:include data='post' name='post'/>
    </b:if>
    <b:else/>
    <b:include data='post' name='post'/>
    </b:if>
  3. Simpan Template dan pergi ke Elemen Halaman pada menu Layout
  4. Add sebuah Gadget dan pilih HTML/Javascript
  5. Paste kode berikut ke dalam content:
    <a href="http://NamaBlogAnda.blogspot.com/search?max-results=200">Daftar isi&raquo;</a>
  6. Ganti kode berwarna merah dengan URL Blog anda
  7. Klik Simpan
  8. Anda juga bisa menempatkannya pada Navbar atau manapun, tinggal copy URL berikut ke dalamnya:
    http://NamaBlogAnda.blogspot.com/search?max-results=200

Berhasilkah trik yang saya berikan? Nah, selamat mencoba! Have Fun!!!

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di die-silver.blogspot.com
Gunakan Tombol berikut untuk menyimpan halaman :
Cara Membuat Daftar Isi Pada Blog
menjadi format PDF dan lebih maksimal jika terdapat kesalahan koneksi atau yang lainnya.

..::Artikel Menarik Lainnya::..

6 comments:

Viruscinta18 July 21, 2009 at 8:10 PM  

ah,...mo coba duyu ah...weks, muantaf bro...PR-nya dag 4....salam dan tetap semangat

Bachabe July 21, 2009 at 9:31 PM  

wach makasih boss infonya tak cobain sukses selalu
http://abbegrt.blogspot.com

kang-dwi August 6, 2009 at 11:32 AM  

makasih banyak browww. pencerahannya

Saung Web August 11, 2009 at 12:25 AM  

Hai sob.. gimana ya.. agar pada daftar isi ini ada nomor urut artikelnya... nyerah deh.. tolong ya...

Tomi Utomo August 28, 2009 at 9:49 PM  

Emang bener² mantapbb!!!

mulyanto July 27, 2010 at 10:49 AM  

saya coba dulu aah ya mass terim kasih

Post a Comment

Silahkan menuliskan komentar anda pada opsi Google/Blogger untuk anda yang memiliki akun Google/Blogger.

Silahkan pilih account yang sesuai dengan blog/website anda (LiveJournal, WordPress, TypePad, AIM).

Pada opsi OpenID silahkan masukkan URL blog/website anda pada kotak yang tersedia.

Atau anda bisa memilih opsi Nama/URL, lalu tulis nama anda dan URL blog/website anda pada kotak yang tersedia.

Jika anda tidak punya blog/website, kolom URL boleh dikosongi atau dapat juga diganti dengan email anda.

Gunakan opsi 'Anonim' jika anda tidak ingin mempublikasikan data anda. (sangat tidak disarankan). Jika komentar anda berupa pertanyaan, maka jika anda menggunakan opsi ini tidak akan ditanggapi. Lebih baik anda gunakan pilihan dibawah ini:

Jika ingin komentar anda tidak dipublikasi, silahkan klik disini.

Terima kasih, komentar anda sangat berarti untuk die-silver.blogspot.com
:a: :b: :c: :d: :e: :f: :g:
:h: :i: :j: :k: :l: :m: :n:

newer post older post home

About Me

My Photo
ardi33
Sangat bercita-cita menjadi seorang webmaster yang selalu dapat memberikan yang terbaik dan bermanfaat kepada semua orang, dan sekarang sedang dalam tahap pembelajaran yang tak kenal lelah!!!
View my complete profile

Stats

Blog Rank:Powered by  MyPagerank.Net
Traffic Rank:Alexa Certified Site Stats for http://die-silver.blogspot.com
Online Visitor:
Blogger Template by Ardi33.Web.id.
Originally Die Silver Template Edited by TemplateZone