TopBottom

Blog Tutorial

About Me

Add your donation here for a better of our service. Thanks!

Berlangganan

Anda Suka Tips Blogger Zacky?
Temukan Kami Di:
Ingin Dapat Artikel Terbaru?
rss Klik disini untuk berlangganan melalui RSS atau terima artikel di email anda dengan cara mengisi form berikut:

Cara Membuat Daftar Isi Blog

Original by IFX Adrian | 01 Desember 2009 4 Comments

Tidak hanya pada buku, tapi blog juga bisa mempunyai sebuah daftar isi. Hmm,, dengan daftar isi pengunjung blog akan mudah menemukan artikel yang akan mereka baca. Sebagai contoh, di bagian sidebar blog ini telah saya pasang daftar isinya sehingga anda bisa menjelajahi blog ini tanpa keraguan akan tersesat, hehehe… Daftar isi tersebut saya buat secara manual (klik disini untuk cara membuat daftar isi manual). Tapi untuk anda yang baru di dunia Blogger dan malas ngetik, maka di tips kali ini akan saya jelaskan cara membuat daftar isi secara otomatis. Kenapa otomatis? Karena di setiap kali kita membuat artikel maka daftar isinya akan langsung bertambah dengan sendirinya. Mau tau caranya?

Berikut Cara Membuat Daftar Isi Blog:

1. Login ke akun Blogger anda

2. Pilih Layout > Edit HTML

3. Backup dulu template anda.

4. Cari kode ]]></b:skin>, lalu paste kode berikut tepat di atasnya:

#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;}



5. Klik Save Template

6. Selanjutnya, pilih menu Page Elements

7. Tambahkan Page Elements dengan HTML/Javascript

8. Paste kode <div id="toc"></div> ke dalam kotak content, lalu klik Save

9. Pindahkan element tersebut ke atas element post

10. Tambahkan Page Elements dengan HTML/Javascript. Beri judul yang anda inginkan, lalu paste kode berikut ke dalam kotak content:

Kode untuk tampilan berbahasa Inggris:

<div id="toclink"><a href="javascript:showToc();">Daftar Isi</a><br/><br/></div><script style="text/javascript" src="http://tipsbloggerzacky.googlecode.com/files/blogtoc.js"></script><script src="http://NAMABLOGANDA.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>



Kode untuk tampilan berbahasa Indonesia:

<div id="toclink"><a href="javascript:showToc();">Daftar Isi</a><br/><br/></div><script style="text/javascript" src="http://tipsbloggerzacky.googlecode.com/files/daftarisi.js"></script><script src="http://NAMABLOGANDA.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>



Ganti tulisan NAMABLOGANDA dengan alamat blog anda.

11. Terakhir, klik Save untuk menyimpan element baru tersebut.

Selamat mencoba..

Jangan lupa kasih komentar ya…

Label:

Bagikan Artikel Ini!

<a href="http://instaforex.com/forexcopy_system.php?x=DVXF">InstaForex</a>
Facebook Delicious Digg! Twitter Linkedin StumbleUpon Lintas Berita
Technorati Google Bookmarks Mixx Yahoo! Newsvine Reddit

Artikel Lain Yang Mungkin Anda Baca

4 komentar:

rachel 14 Desember 2009 00.32  

mantap,. kog sama ma tutorial nya kang rohman ya,. hehe,.

Zacky Adrishayuni 14 Desember 2009 18.47  

wow, ane gak tau tuh.. mungkin kebetulan aja sama...

ardi al-maqassary 6 Maret 2010 07.03  

Mamakasih ya sobat..slam kenal..saya ardi..tapi mo tanya nih..gimana caranya bikin daftar isi scroll

Calvin 23 September 2010 06.23  

mas,makasih tutorialnya..
boleh nanya gak mas? gimana buat daftar isi blog yang kayak blog ini? maksudnya semua isi blog ada di dalam scroll bar?

Poskan Komentar