Sunday, December 6, 2009

Membuat Daftar Isi Otomatis Pada Blog

Membuat daftar isi secara otomatis pada blog kita adalah sesuatu hal yang seharusnya dilakukan, tujuannya adalah mempermudah pengunjung untuk menemukan artikel yang mereka cari, serta membuat blog kita terlihat lebih menyenagkan dan profesional. Daftar ini yang mau aku bahas ini cara kerjanya : bisa menampilkan seluruh postingan yang ada di blog dan nama nya urut berdasarkan abjad ( julul posting ) sehingga lebih mudah digunakan oleh pengunjung, caranya tidak begiru susah, nah untuk membuat nya ikuti langkah langkah berikut ini :












1. Login ke Blogger
2. Pilih menu "Layout-->Edit HTML"
3. Beri tanda centang pada kotak "Expand Widgets Template".
4. Lalu Cari kode ini   ]]></b:skin> 

5. Setelah kode no 4 ditemukan, lalu copy kode di bawah ini ... ( di atas kode no 4 )


#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. Lalu Save Template nya.

Lalu 



 1.Pilih Layout ( Tata Letak ) >> Page Element ( Elemen Halaman )
 2.Add a Gadget ( Tambah Gadget )
 3.Pilih HTML/JavaScript dan copy paste aja kode ini di dalamnya:

      <div id="toc"></div>  

Lalu simpan dan letakkan elemen halaman yang telah dibuat tersebut tepat diatas elemen post ( posting ) biar nanti daftar isinya ada di atas postingan seperti blog ini) jika ingin meletakkannya di tempat lain juga boleh.

Lalu langkah terakhir  


1.Pilih Layout ( Tata Letak ) >> Page Element ( Elemen Halaman ) lagi
2.Add a Gadget ( Tambah Gadget )
3.Pilih HTML/JavaScript dan copy paste aja kode ini di dalamnya:

<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://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script> 

Lalu save dan letakkan elemen halaman tersebut ditempat yang kamu kehendaki dan nama YOURBLOG ( gantilah dengan url alamat blog kamu )

Selamat mencoba semoga berhasil sob. 



Buat teman teman yang menemukan broken link alias link rusak tolong kasih tahu ya,admin mengucapkan terimakasih atas laporannya.Mohon laporannya tulis di kolom komentar. Aku usahakan untuk segera diperbaiki.

4 comments:

Adit on February 4, 2010 at 7:08 PM said...

kalau isi dalam label di buat urut bisa apa tidak sob, bukan labelnya lho ya tapi isi labelnya, misal labelnya tips dan trik nah label tsb kalau di klik isinya urut abjad gitu. Trim's, salam kenal n tolong dibalas ke emailku ad1_t@ymail.com

Yuda on February 16, 2010 at 11:00 PM said...

Terimaksih Tutorialnya, Saya sudah mencobanya pada blog saya dan berhasil.

odonk's on April 23, 2010 at 9:06 AM said...

mangstab om...
thanks
dah sukses...

f31313y on October 19, 2010 at 2:00 AM said...

Mantap Gan!
http://kuasbasah.blogspot.com

Post a Comment

Silahkan tulis komentar tentang blog ini, usulan, saran dan kritik serta ide ide yang membangun.

Related Posts Plugin for WordPress, Blogger...

Hobi Unduh Fans

Berlangganan

Masukkan Emailmu Untuk Berlangganan Tutorial Terbaru Via Email:

Delivered by FeedBurner

 

Banner

Site Info

Powered by  MyPagerank.Net

widget
Postingan
Komentar

100 Blog Indonesia Terbaik

Pop Up

Tutorial Tip Trik Copyright © 2009 WoodMag is Designed by Ipietoon for Free Blogger Template