Cara membuat daftar judul postingan atau daftar isi otomatis
7/16/2010
Posted by Unknown
Centro tips blog. Setelah tadi pagi saya posting mengenai cara membuat tabview 3 kolom, sore ini saya akan memberi sedikit informasi cara membuat salah satu isi tabview saya yakni kolom “artikel” yang berisi daftar judul postingan. Daftar judul ini, disusun berdasarkan label yang telah kita berikan di masing-masing postingan. Contoh dapat anda lihat di bawah ini
Daftar judul postingan cukup penting agar pengunjung betah berlama-lama di blog kita. Karena semakin banyak postingan kita maka akan semakin banyak juga pilihan bagi pengunjung untuk membaca artikel yang telah kita buat. Daftar judul kali ini, mirip dengan kategori, namun lebih keren karena ada scroll bar serta memiliki pemberitahuan artikel mana saja yang baru sehingga pengunjung dapat menilik artikel-artikel terbaru kita.
Berikut adalah cara mudahnya untuk ditempel di sidebar :
- Buka design >> klik “page elements”
- Lalu buka “add gadget”
- Pilih “HTML/java script”
- Kemudian paste (ctrl+v) kode berikut ke dalam gadget HTML
<div style="overflow: auto; width: 200px; height: 100px; text-align: left;">
<script src="http://centroind.googlecode.com/files/daftarisiotomatiscentro.js"><br /></script>
<script src=" http://www.centro.web.id/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"><br /></script>
</div>
<script src="http://centroind.googlecode.com/files/daftarisiotomatiscentro.js"><br /></script>
<script src=" http://www.centro.web.id/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"><br /></script>
</div>
- Save dan selesai
Keterangan :
- Tulisan merah merupakan lebar (width) dan tinggi (heigth) kotak daftar judul, silahkan atur sesuai dengan keserasian sidebar anda
- Tulisan hijau, ganti dengan alamat blog anda
Berikut cara memasukkan daftar judul ke dalam tabview :
- Buat tabview seperti postingan saya sebelumnya
- Paste-kan dalam tab misal tab1.1 <br />
- Hapus kode ini width: 200px; height: 100px; karena akan membuat dobel scrol bar yang membingungkan. Sehingga kode akhirnya seperti ini
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 260px;">
<a>tab 1</a>
<a>tab 2</a>
<a>tab 3</a>
</div>
<div class="Pages" style="width: 256px; height: 270px;">
<div class="Page">
<div class="Pad">
<div style="overflow: auto; text-align: left;">
<script src="http://centroind.googlecode.com/files/daftarisiotomatiscentro.js"><br /></script>
<script src=" http://www.centro.web.id/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"><br /></script> <br />
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 260px;">
<a>tab 1</a>
<a>tab 2</a>
<a>tab 3</a>
</div>
<div class="Pages" style="width: 256px; height: 270px;">
<div class="Page">
<div class="Pad">
<div style="overflow: auto; text-align: left;">
<script src="http://centroind.googlecode.com/files/daftarisiotomatiscentro.js"><br /></script>
<script src=" http://www.centro.web.id/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"><br /></script> <br />
- Save dan selesai
- Silahkan anda utak utik sendiri seperti keterangan yang ada diatas
Semoga blog anda lebih dieksplor oleh pengunjung kita. Terima kasih
TAMBAHAN:
Kemaren saya gunakan script js dari http
This entry was posted on October 4, 2009 at 12:14 pm, and is filed under
tips blog
. Follow any responses to this post through RSS. You can leave a response, or trackback from your own site.
Subscribe to:
Post Comments (Atom)
Sunday, July 18, 2010 11:43:00 AM
info yg bagus sob langsung dak praktekin
Sunday, July 18, 2010 5:58:00 PM
sippp...silahkan kang..semoga lancar terkendali hahaha...
Sunday, July 18, 2010 7:05:00 PM
terimakasih buat tutorialnya mas...
Sunday, July 18, 2010 7:37:00 PM
wahahahaha...jangan dibilang turorial ah..aku khan bukan ahlinya..cukup bilang infonya ja hehehe..
sama2 mas..salam kenal ^ ^
Monday, July 26, 2010 6:44:00 PM
Interesting. Boleh dicoba tapi belum bisa sekarang. Masih sibuk Mas. Thks share ilmunya
Amrih Gunawan
Friday, August 06, 2010 2:07:00 PM
Saya jg menggunakan script diatas. Tp 2 hr ini knp error ya, tidak muncul di blog. Knp ya mas, padahal sebelumnya baik2 saja. Thx....
Wednesday, August 25, 2010 7:43:00 AM
wah infonya bagus bro. yang ini juga boleh di coba. BISNIS INTERNET MODALNYA CUMA 20RB, TAPI KALO DI SERIUSIN BISA UNTUNG RATUSAN JUTA.
http://cuma20rb.tk/
Monday, September 06, 2010 3:00:00 PM
thanks buat infonya
Friday, November 26, 2010 10:10:00 AM
Tutorial yang sangat bagus.Tapi ini buat wordpress apa blogger???maaf newbie.
Sunday, December 26, 2010 9:13:00 PM
Info nya bermanfaat gan.. boleh dicoba neh..
Sunday, January 16, 2011 11:03:00 PM
Mantaff gan...
Friday, February 04, 2011 6:01:00 PM
keren ini yang saya cari!
Friday, March 04, 2011 8:37:00 AM
Makasih banget infonya.Sob, kalau gak salah ini theme nya mystique yadari wordpress, gimana caranya bisa dibikin do follow? keren euy...thanks ya
Tuesday, March 08, 2011 2:31:00 PM
mantap banget bro makasih infonya
Wednesday, March 09, 2011 8:52:00 AM
makasih buat komennya ya sob semua...sori baru ane bales hahahaha
Indonesianlaw : iya, itu scriptnya eror, ane juga sempet bingung, tapi dah ane upload yang baru koq..bisa lagi dech hehehe
cinta : itu buat blogger, nek wordpress belum pernah nyoba hehe
baju anak online : iya ini mystique..ini template wordpress yang diconvert buat blogspot gitu, gampang atuh kalo mw jadi dofollow, tinggal ganti di template ajah..banyak tutornya hehehe...
thanks semuanya
Friday, April 08, 2011 10:12:00 AM
nice article,buat nambahin buat ane belajar :)
Wednesday, April 20, 2011 8:12:00 AM
mantap nih infonya, thanks ya udah berbagi.
Tuesday, May 24, 2011 9:20:00 PM
maksih infonya ya, buat tambahan ilmu ane
Sunday, May 29, 2011 9:58:00 AM
thanks gan sharenya. .
Monday, December 26, 2011 9:59:00 AM
Sipp.. Makasih gan share nya.. Salam kenal ya gan. Sukses teruss..
Friday, January 06, 2012 9:19:00 PM
Infonya menambah pengetahuan buat saya heheheh pastinya sudah banyak manfaatnya buat org lain, izin praktek mas tutorialnya semoga abisa saya terapkan di wp baru saya...
Thursday, June 21, 2012 9:04:00 AM
wah,, bgus juga daftar isi tersebut dipasabg di blog sya.
Friday, June 22, 2012 8:52:00 AM
thanks gan informasinya sangat berguna bagi saya dan semoga bermanfaat untuk orang lain.
Tuesday, July 10, 2012 9:19:00 AM
Terima kasih info nya Gan.. Dicoba dulu deh...
Saturday, August 11, 2012 5:59:00 PM
infonya mantab, siap langsung dipraktekkan!
Thursday, September 06, 2012 2:00:00 PM
terimakasih mas untuk infonya, sangat membantu, terutama bagi saya yang masih pemula
Thursday, September 20, 2012 3:33:00 PM
info yg bagus sob langsung ke TKP ah, salam kenal..