Catetan

MEMBUAT DAFTAR ISI DI BLOG SECARA MANUAL DAN OTOMATIS 30

Untuk membuat daftar isi di blog ada dua cara, yaitu secara manual dan otomatis, untuk setiap pilihan cara sudah pasti ada keuntungan dan kerugian, untuk cara manual mungkin lebih ribet, dikarenakan harus selalu update link post, setiap ada penambahan post baru, sedangkan untuk cara otomatis memang tidak terlalu ribet, tetapi hal tersebut bisa berpengaruh terhadap crawl web kita, tetapi menurut google gak ngaruh si, crawl tersebut cuman informasi aja sebelum membuat daftar isi alangkah lebih baik jika kita melakukan back up terhadap file kita
1. Membuat Daftar Isi secara Manual

Pembuatan Daftar Isi secara Manual sistemnya hampir sama dengan cara pembuatan Scroll Box, yang ditambahkan link dari postingan didalamnya, yang pertama harus dilakukan adalah membuat kode CSS-nya
#daftar-isi-manual{ background:#C0C0C0; overflow: scroll; height:150px; font:10pt/15pt Arial, serif; color: blue }
sedikit penjelasan untuk kode diatas, tinggi scroll box adalah 150px, dengan ukuran font adalah Arial 10 dan berwarna biru, langkah selanjutnya adalah masuk ke blogger --> Edit HTML, lalu copy kode css diatas tepat diatasnya kode ]]></b:skin>, lalu simpan, dan masuk ke Page Element, dan klik Add Gadget, pilih HTML/Script, dan masukkan kode dibawah ini
<div id="daftar-isi-manual">
<ol>
<li><a href="http://www.karsono.co.cc/2009/03/copy-data-dari-multiple-file.html">Macro Excel : Copy Data dari multiple file</a></li>
<li><a href="http://www.karsono.co.cc/2009/03/angka-menjadi-bilangan.html">Macro Excel : Angka menjadi bilangan</a></li>
<li><a href="http://www.karsono.co.cc/2009/03/macro-excel-command-button-true-or.html">Macro Excel : Satu tombol 2 fungsi</a></li>
<li><a href="http://www.karsono.co.cc/2009/01/domain-gratis-di-cocc.html">Domain Gratis CO.CC</a></li>
<li><a href="http://www.karsono.co.cc/2009/02/set-up-cocc-dengan-host-gratis.html">Host Gratis</a></li>
<li><a href="http://www.karsono.co.cc/2009/03/kisah-kehamilan-isteriku.html">Kisah Kehamilan Isteriku</a></li>
<li><a href="http://www.karsono.co.cc/2009/01/kabar-gembira.html">Kabar Kembira</a></li>
<li><a href="http://www.karsono.co.cc/2008/11/history-personal-data.html">History Personal Data</a></li>
<li><a href="http://www.karsono.co.cc/2009/04/menggabungkan-teks-dengan-tanggal.html">Rumus Excel: Menggabungkan Tanggal dengan Teks</a></li>
<li><a href="http://www.karsono.co.cc/2008/12/kabar-gembira.html">Pernikahanku</a></li>
<li><a href="http://www.karsono.co.cc/2009/02/menghilangkan-navbar-blogger.html">Menghilangkan Navbar Blogger</a></li>
<li><a href="http://www.karsono.co.cc/2009/03/mengganti-icon-blogger.html">Mengganti Icon Blogger</a></li>
<li><a href="http://www.karsono.co.cc/2009/04/text-area-biasanya-difungsikan-untuk.html">Membuat Text Area</a></li>
<li><a href="http://www.karsono.co.cc/2009/04/menulis-kode-html-di-postingan.html">Menulis Kode HTML di postingan Blogger</a></li>
<li><a href="http://www.karsono.co.cc/2009/04/lookup-dengan-mengambil-data-di-sebelah.html">Lookup untuk mengabil data di sebelah kiri</a></li>
<li><a href="http://www.karsono.co.cc/2009/04/membuat-scroll-box.html">Membuat Scroll Box</a></li>
<li><a href="http://www.karsono.co.cc/2009/04/kode-html-warna-di-blog.html">Kode Warna HTML</a></li>
<li><a href="http://www.karsono.co.cc/2009/04/teks-berjalan-atau-biasa-di-sebut.html">Teks Berjalan atau Marquee</a></li>
<li><a href="http://www.karsono.co.cc/2009/04/border-biasa-digunakan-untuk-menandai.html">Membuat border di Blogger</a></li>
<li><a href="http://www.karsono.co.cc/2009/04/membuat-read-more-di-blogger.html">Membuat Read More di Blogger</a></li>
<li><a href="http://www.karsono.co.cc/2009/05/mempercepat-loading-page.html">Mempercepat Loading Page</a></li>
<li><a href="http://www.karsono.co.cc/2009/05/membuat-menu.html">Membuat Menu di blogger</a></li>
<li><a href="http://www.karsono.co.cc/2009/05/menghilangkan-icon-edit.html">Menghilangkan Icon Edit di Blogger</a></li>
<li><a href="http://www.karsono.co.cc/2009/06/table-html.html">Table HTML</a></li>
<li><a href="http://www.karsono.co.cc/2009/06/udah-lama-ga-nengok-facebook.html">Jam Berdetak setiap Detik di Excel</a></li>
<li><a href="http://www.karsono.co.cc/2009/06/postingan-ini-aku-buat-berdasarkan.html">Melampiran File Excel, Word, Powerpoint, di Blog</a></li>
<li><a href="http://www.karsono.co.cc/2009/07/membuat-iklan-di-tengah-postingan-blog.html">Membuat Iklan di tengah post blog</a></li>
<li><a href="http://www.karsono.co.cc/2009/07/menyembunyikan-navbar-blogger.html">Menyembunyikan Navbar Blogger</a></li>
<li><a href="http://www.karsono.co.cc/2009/08/free-animasi-template-blog-sun-of-day.html">Free Animasi Blog Template</a></li>
</ol>
</div>
gantilah link yang berwarna merah sesuai dengan link anda, sedangkan yang berwarana biru merupakan kalimat yang akan muncul sebagai link dan apabila ada penambahan postingan baru, berarti anda harus selalu melakukan update penambahan link baru pada kode diatas... hmm repot ya... hasil dari kode diatas adalah seperti dibawah ini
  1. Macro Excel : Copy Data dari multiple file
  2. Macro Excel : Angka menjadi bilangan
  3. Macro Excel : Satu tombol 2 fungsi
  4. Domain Gratis CO.CC
  5. Host Gratis
  6. Kisah Kehamilan Isteriku
  7. Kabar Kembira
  8. History Personal Data
  9. Rumus Excel: Menggabungkan Tanggal dengan Teks
  10. Pernikahanku
  11. Menghilangkan Navbar Blogger
  12. Mengganti Icon Blogger
  13. Membuat Text Area
  14. Menulis Kode HTML di postingan Blogger
  15. Lookup untuk mengabil data di sebelah kiri
  16. Membuat Scroll Box
  17. Kode Warna HTML
  18. Teks Berjalan atau Marquee
  19. Membuat border di Blogger
  20. Membuat Read More di Blogger
  21. Mempercepat Loading Page
  22. Membuat Menu di blogger
  23. Menghilangkan Icon Edit di Blogger
  24. Table HTML
  25. Jam Berdetak setiap Detik di Excel
  26. Melampiran File Excel, Word, Powerpoint, di Blog
  27. Membuat Iklan di tengah post blog
  28. Menyembunyikan Navbar Blogger
  29. Free Animasi Blog Template
Selanjutnya masuk ke cara pembuatan daftar isi secara otomatis

2. Membuat Daftar Isi secara Otomatis
Untuk membuat daftar isi secara otomatis, masuk ke Edit HTML, dan jangan lupa centang Expand Widget Template, Seperti halnya pembuatan daftar isi blog secara manual, buatlah kode css seperti dibawah,dan letakkan di atas kode ]]></b:skin>,
#daftar-isi-otomatis{ border:2px outset blue; padding:5px 0 5px; background:#EAE9E9 }
Langkah selanjutnya cari kode di bawah ini
<b:include data='post' name='post'/>
Untuk di template minima kode diatas ada dua, carilah kode yang pertama, bila sudah ketemu, ganti kode di atas dengan kode di bawah ini
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<div id='daftar-isi-otomatis'>
<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>
lalu simpan, kemudian Masuk ke Page Element, dan klik Add Gadget, posisinya terserah mau di bagian menu atau di sidebar, contohnya bisa dilihat pada menu daftar isi blog ini
<a href="http://Alamatbloganda.blogspot.com/search?max-results=100">Daftar isi</a>
pilih HTML/Script, dan masukkan kode diatas kedalamnya, tetapi sebelumnya ganti dulu alamat link-nya sesuai dengan alamat blog anda
Simpan... dan lihat hasilnya.

30 comments:

ariyoso

24 Nov 2009, 13.18.00
thenkyou bro...inpo yang berguna banget
Unknown

31 Jan 2010, 18.19.00
thanks ya brow...atas infonya,
Weblog ask

15 Mar 2010, 15.30.00
god info, makasih ya bro...
Alief

11 Apr 2010, 08.32.00
Makasih yaw Broo ....
gecok

4 Sep 2010, 22.23.00
thanks yah sob , salam kenal.
http://gecokk.blogspot.com/
Tentang Komputer

7 Sep 2010, 14.18.00
broo kan kita udah buat daftar isi nehh, nah kalo mau ngisi laman'a begimana???
karsono

8 Sep 2010, 06.26.00
maksudnya ndak ngerti nich laman yang mana ya, cuman kalau gak mo repot mending pake yang otomatis aja
Unknown

19 Okt 2010, 12.32.00
modelnya keren....
www.blogpenyiar.blogspot.com
link anda saya pasang di blogku dengan judul KarsonoBlog, kunjungi balik ya
mexdy

15 Nov 2010, 17.09.00
mkasihh
Admin

19 Nov 2010, 23.38.00
mas...saya baru ngenal internet dan pengen belajar buat blog, maklum kita tinggal di pedalaman aceh...mas...tolong ajarin buat daftar isi seperti daftar isi punya mas karsono ya...atau sejenis nya....
karsono

22 Nov 2010, 16.39.00
Untuk postingan yang diatas, mungkin bisa diinformasikan mengenai apa yang kurang jelas...
Anonim

6 Des 2010, 21.50.00
mas bisa ajarin aku cara membuat blog aku jd lebih bagus tampilanya trimakash
karsono

8 Des 2010, 11.16.00
Membuat blog lebih bagus... hmm... sebenernya bagus itu relatif... tergantung yang melihatnya... tetapi sebagai informasi... sebelum membuat blog ini... aku bikin dulu sketsanya di excel... baru aku aplikasiin di blog... jadi hal pertama yang harus dilakukan adalah bikin sketsa dulu.. untuk penerapannya bisa sambil belajar di google
BLOGNA ABAH REZPECT

17 Des 2010, 01.44.00
hahah GOOD POST, Blognya bagus mas. simpel tapi punya gaya seni. ditambah sidebar yang bikin kepala saya jadi geleng-geleng 0`-15`
Unknown

28 Des 2010, 18.33.00
bagus udh dicoba......
Mas Debby

11 Jan 2011, 20.38.00
Mksih bos atas info_y??
Den Bagus

1 Feb 2011, 12.27.00
mas, sama dengan pertanyaan diatas.
saya udah bikin yang daftar isi yang otomatis cuman udah tertulis daftar isi, nah kalo mengisi link yang bisa diklik itu gimana ?? karena daftar isi saya tidak ada isinya hehehehee...... matur suwun
karsono

1 Feb 2011, 13.01.00
Daftar isi di blog itu sendiri kan pengertiannya... membuat daftar isi berdasarkan postingan blog yang ada... jadi dengan adanya daftar isi otomatis, tinggal di klik link daftar isi... hampir secara keseluruhan postingan yang ada akan muncul....
jadi lagi... bikin postingan yang banyak di blognya.... begituu
Gemby Sportian

11 Feb 2011, 15.14.00
Thanks Ya sob..
Cba kamu liha blog saya
http://www.gembysportian.blogspot.com
Anonim

20 Feb 2011, 13.36.00
newbey mau tanya.
saya berhasi untuk cara yang manual, tapi setelah pake cara otomatis ko nda bisa keluar itu menu, cuma keluar tulisan daftar isi doank,,, padahal seharusnya di archive tu posting saya ada 3.
la ini gimana bro???
nuhun.
Aldy rizaldy

24 Feb 2011, 14.36.00
ada tips lain gk gimana kalau daftar isinya dengan fungsi scroll
Ff

26 Feb 2011, 11.01.00
Terimakasih kk berhasil coba lihat blog saya
http://yudatfort814.blogspot.com
Blog Komputer

13 Mar 2011, 07.53.00
makasi brow ........
tapi ga jadi........
GHANDI MUHAMMAD

8 Apr 2011, 10.37.00
nice info gannn
civil corner

12 Apr 2011, 14.06.00
ga sesuai bos ,,,
piye jal?


http://civilcorner.tk
Amina

8 Jun 2011, 23.46.00
Saya kok gak berhasil ya... buat daftar isi ini (yang otomatis), udah saya cek 2 kali, tetep aja gak ada isinya.

Ada yang sama dengan saya?
excelent

16 Jun 2011, 13.34.00
wow
bagus banget artikel in gan
makasih yeah
pulsa murah

20 Jun 2011, 13.05.00
saya ga bisa menemukan kode <b:include data.solusinya gimana nich?
Tutorial Blogger

16 Feb 2012, 14.24.00
akhirnya bisa juga
andreas

30 Jul 2018, 15.15.00
manteb ini gan, sangat bermanfaat sekali blognya
power supply hp

Posting Komentar