Cara Membuat Daftar Isi Blog Versi 1

Membuat Daftar Isi (1)

Daftar isi blog pada website/blog tidak jauh berbeda dengan daftar isi pada halaman buku pada umumnya. Tujuannya tentu untuk memudahkan pembaca mencari halaman yang ingin mereka baca. Sobat tertarik mencobanya, ikuti langkah-langkah berikut,

Langkah pertama :

1. Masuk ke blogger
2. Klik menu Layout
3. Klik menu Edit HTML
4. Klik link Download full template, save untuk backup data
5. Copy paste kode CSS berikut di atas kode ]]></b:skin>
   #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;}
6. Save

Langkah kedua :

1. Klik menu Elemen Halaman
2. Klik tulisan Tambah sebuah Elemen Halaman 
3. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan JavaScript/HTML 
4. Copy paste kode berikut ke dalam elemen yang muncul
   <div id="toc"></div>
5. Simpan
    
6. Pindahkan elemen yang baru di buat tepat di atas elemen Post
    
7. Klik tombol Simpan yang berada di sebelah atas
    
8. Klik tulisan Tambah sebuah Elemen Halaman kembali
    
9. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan JavaScript/HTML
    
10. Beri judul elemen tersebut dengan yang kata yang sobat ke hendaki. Contoh : DAFTAR ISI
    kemudian copy paste kode berikut ke dalam kotak elemen
    <div id="toclink"><a href="javascript:showToc();"&gt;Daftar Isi Blog</a><br/><br/></div> <script style="text/javascript" src="http://home.planet.nl/~hansoosting/downloads/blogtoc.js"></script> <script src="http://namaBlog.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>
    Keterangan
    • Ganti tulisan tebal dengan nama blog Sobat, yang merah adalah tittle Daftar Isi Sobat
    • Simpan
      Tulisan yang muncul pada 'Widet Daftar Isi' di atas adalah berbahasa Inggris, untuk menggantinya menjadi Bahasa Indonesia, lakukan langkah berikut, Pasang dengan kode di bawah ini saja, :
      
       
      <div id="toclink"><a href="javascript:showToc();"><img src="http://amen24.googlepages.com/folder.gif"/> &nbsp;&nbsp;Lihat Daftar Isi !</a><br/><br/></div> <script style="text/javascript" src="http://amen24.googlepages.com/daftarisi.js"> </script><script src="http://NamaBlog.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>
    Selamat Mencoba

Posted in: tips,trik,tutorial