Daftar Isi Otomatis Yang Keren Untuk Blogger

Ketika kita berbicara tentang Daftar Isi blog (Table of Content), maka kita akan langsung teringat dengan sebuah nama yaitu "Abu Farhan". Siapakan dia? Abu Farhan adalah salah satu Webmaster kebanggaan Indonesia yang telah menciptakan banyak Daftar Isi Blog yang memiliki tampilan indah, cantik dan keren. Nama Abu Farhan tidak hanya sering disebut di Indonesia, tapi sering juga disebut di luar negeri. Setiap Daftar isi yang dibuat oleh Abu Farhan, selalu saja mendatangkan pujian dari setiap webmaster yang melihatnya. Hal ini dapat dibuktikan dengan komentar-komentar yang ditinggalkan oleh pengunjung Website yang dikelolanya.

Salah satu Table of Content yang di buat oleh Abu Farhan adalah Table of Content yang berbasis Accordion. Daftar isi Accordion memiliki tampilan yang sangat menakjubkan yang disusun berdasarkan Label Posting. Ketika judul Label di klik oleh pengunjung, maka posting yang terkait dengan label akan terbuka.

Cara memasang daftar isi blogger ini tidak sulit. Kita hanya memasukkan kode berikut di tempat kita biasa menulis artikel/posting. Tapi perlu di ingat, kode di masukkan pada mode HTML bukan Compose.

<link href="http://muhammad-septi-rosidi.googlecode.com/svn/branches/TOC/toc.css" rel="stylesheet" type="text/css"></link> <script src="https://muhammad-septi-rosidi.googlecode.com/svn/branches/TOC/toc.js">
</script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=1000&amp;callback=loadtoc" type="text/javascript">
</script> <script type="text/javascript">
var accToc=true;
</script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> <script src="http://muhammad-septi-rosidi.googlecode.com/svn/gadgets/extras/toc.js" type="text/javascript"></script>

Kode di atas sudah saya modifikasi sedimikian rupa, sehingga sobat blogger tidak perlu edit kode di atas.

Daftar Isi Tutorial Blogspot Bagian Satu

Di dalam salah satu posting yang diterbitkan oleh Matt Cutts tertanggal 9 Maret 2009 di rekomendasikan pada setiap pemilik blog untuk tidak meletakkan link lebih dari 100 pada setiap Page atau laman (Penjelasan tersebut bisa di lihat atau di baca pada akhir posting). Hal inilah yang membuat saya harus membagi daftar isi di tutorialblogspot.com dalam beberapa bagian. Berikut ini daftar isi Tutorial Blogspot di bagian pertama.

1. Daftar Nama Situs Untuk Download Template Secara Gratis
2. Cara Memasang Yahoo Web Player Di Blog
3. Kebijakan Konten Blogger Untuk Pemilik Blog
4. Cara Menghias Judul Posting Dengan CSS
5. Cara Membuat Halaman Privacy Policy Untuk Blog
6. Cara Membuat Widget Animasi Doraemon
7. Cara Menghilangkan Navbar Terbaru Tanpa Edit Template
8. Cara Menghilangkan Tulisan Tampilkan Posting Dengan Label
9. Cara Buat Kotak Pencarian Pinterest
10. Alexa Pro
11. Cara Membuat Label Untuk Posting Atau Artikel Blog
12. Cara Membuat Dan Memasang Widget SMS Gratis di Blog
13. Cara Menambahkan Elemen Baru Di Atas Header Blog
14. Free Download Notepad Full Version
15. Cara Menghilangkan Link Posting Lama, Posting Baru Dan Beranda Pada Blog
16. Cara Memasang Syntax Highlighter Di Blog
17. Cara Memasang Fitur Semut Mondar-Mandir Di Dalam Blog
18. Cara Membuat Teks Area Cantik
19. Membuat Efek Bayangan Pada Teks
20. Cara Buat Spoiler di Blogspot
21. Apa itu SyntaxHighlighter?
22. Rubah Jumlah Posting di Home Page
23. Blogger Dan Kompatibilitas Browser
24. Cara Backup Template Blog
25. Membuat Link Berkedip Seperti Pelangi
26. Kotak Berlangganan FeedBurner Keren
27. Cara Menghilangkan Tulisan Powered by Blogger
28. Contoh Email Penolakan Google Adsense
29. Contact Us
30. Cara Membuat Atau Memasang Widget Populer Post Di Blog
31. Cara Berbagi Posting Ke Google Plus Melalui Blogger.com
32. Cara Mengganti Setting Bahasa Di Akun Blogger.com
33. Cara Merubah Atau Membuat Posisi Kolom Komentar Di Tengah
34. Privacy Policy For www.tutorialblogspot.com
35. Cara Mengetahui URL Feed Atom Atau RSS Blog
36. Cara Hapus Posting Atau Artikel Yang Sudah Dipublikasikan Di Blogger.com
37. Cara Memproteksi Laman Blog Dengan Password
38. Cara Melindungi Artikel Dari Copy Paste (Disable Highlight)
39. Cara Membuat Bunga Berguguran Atau Bertaburan Di Blog
40. Structured Data Google Webmaster Tools
41. Cara Membuat Widget Burung Twitter Di Atas Ranting Pohon
42. Cara Mencuri Background Blog Orang Lain
43. Cara Memasang Energy Saver Di Blogger
44. Index Status Google Webmaster Tools
45. Cara Membuat Kotak SEO Permalink Di Blog Blogger
46. Cara Membuat Jadwal Posting Di Blogger.com
47. Cara Submit Blog Ke Ribuan Directory Web Secara Gratis
48. Cara Mengganti Favicon Blog Blogger
49. Cara Menghilangkan Diposkan Oleh Atau Posted By di Blogger
50. Cara Memasang Widget Top Komentar di Blog
51. Cara Membuat Link Di Blogger.com
52. Cara Membuat Widget Random Post Di Blogger
53. Cara Menghilangkan / Menghapus Quick Edit (Ikon Obeng) Pada Blog
54. Free Download EditPlus Full Version
55. Cara Membuat Blog Versi Seluler, HP Atau Mobile
56. Rich Snippets Testing Tool Di Google Webmaster Tools
57. Cara Membuat Widget Recent Post
58. Cara Memasukkan Video Ke Dalam Postingan Blog
59. System Requirenment Google Chrome
60. Cara Memasang TV Online di Blogger
61. Cara Install Alexa Toolbar Di FireFox
62. Google Adsense dan Blogger.com
63. Cara Membuat Widget Google Translate Bendera Bergerak
64. Cara Buat Tombol Berbagi Melayang
65. Cara Daftar dan Install Kode Tynt
66. Cara Pasang Jam Digital di Blogger
67. Cara Hapus Gambar Blog di Picasa
68. Cara Membuat Kode Tukar Link Di Blog Dengan Mudah
69. Fitur Dari Peramban Google Chrome
70. Membuat Halaman Bernomor Di Blog
71. Cara Menghilangkan Bayang Pada Template Blog
72. Memamfaatkan Layanan Ping Blog Gratis
73. Memamfaatkan Penyedia Validation Tool
74. Membuat Widget Penerjemah di Blog
75. Cara Buat Email Subscription Box
76. Membuat Pesan Atas Kolom Komentar
77. Tidak Bisa Klik Kanan pada Blog
78. Mengurangi Berat CSS Dengan CSS Compresor
79. Tools Parse HTML Untuk Blogger Blog
80. Cara Pasang Kode Warna Di Blog
81. Daftar Blog di Google Blog Search
82. Cara Buat Navbar Buka Tutup
83. Cara Buat Garis Horizontal Pada Postingan
84. Postingan Otomatis Rata Kiri Kanan
85. Cara Menyembunyikan Tombol Berbagi
86. Cara Disable Blogger LightBox
87. Cara Mengganti Template Blog
88. Cara Buat Cursor Bertabur Bintang
89. Hapus Langganan Poskan Komentar Atom Atau Subscribe to: Post Comments (Atom)
90. Cara Memasukkan Gambar ke Blog
91. Cara Buat Peringatan Kalau Blog Dalam Perbaikan
92. Meta Tag Generator
93. Membuat Kotak Pencarian Dengan CSS3
94. Hex Color Code Generator
95. Apa Itu Sitemap?
96. Cara Buat Widget Daftar Isi Blog
97. Cara Menghilangkan Navbar Blogspot
98. Cara Pasang I Power Blogger
99. Cara Cek Kecepatan Loading Blog
100. Cara Buat dan Cara Pasang Widget Alexa

The original reason we provided that recommendation is that Google used to index only about 100 kilobytes of a page. When we thought about how many links a page might reasonably have and still be under 100K, it seemed about right to recommend 100 links or so. If a page started to have more than that many links, there was a chance that the page would be so long that Google would truncate the page and wouldn’t index the entire page.

These days, Google will index more than 100K of a page, but there’s still a good reason to recommend keeping to under a hundred links or so: the user experience. If you’re showing well over 100 links per page, you could be overwhelming your users and giving them a bad experience. A page might look good to you until you put on your “user hat” and see what it looks like to a new visitor.

Source : Matt Cutts

Cara Membuat Daftar Isi Blog Berdasarkan Abjad

Yahoo Pipes adalah sebuah tool yang sangat ampuh atau bagus untuk komposisi agregat, memanipulasi, dan konten Mashup dari seluruh web. Daftar isi yang di buat menggunakan Yahoo Pipes bekerja dengan cara menggabungkan feed yang banyak menjadi satu, kemudian mengurutkannya, menyaringnya dan menerjemahkannya.

Berikut ini keterangan tentang Yahoo Pipes yang saya petik dari Official Site Yahoo Pipes :
Pipes is a powerful composition tool to aggregate, manipulate, and mashup content from around the web.
Like Unix pipes, simple commands can be combined together to create output that meets your needs:

1. combine many feeds into one, then sort, filter and translate it.
2. geocode your favorite feeds and browse the items on an interactive map.
3. power widgets/badges on your web site.
4. grab the output of any Pipes as RSS, JSON, KML, and other formats.

---

Kelebihan Menggunakan Daftar Isi Yahoo Pipes

---

1. Daftar isi di atur berdasarkan Abjad
2. Daftar isi tidak berdasarkan Label Blog
3. Daftar Isi bisa di Susun atau di atur menggunakan angka
4. Daftar isi bisa di susun atau di atur menggunakan Bullet List
5. Daftar isi memiliki tampilan yang simple
6. Daftar isi menampilkan jumlah komentar disamping kanan Post Title (Judul Posting)

---

Cara Membuat Daftar Isi Blog Menggunakan Yahoo Pipes

---

• Sign In di Blogger.com
• Klik tombol Create New Post
• Masukkan kode di bawah ini di tempat sobat blogger biasa menulis posting. Tapi perlu ingat, harus dalam mode HTML bukan Compose

<!-- Alphabetical/chronological Post Title Listing with comment count Start -->
<script type="text/javascript">
function getYpipeTL(feed) {
 document.write('<ul style="font-weight:bold">');
 var i;
 for (i = 0; i < feed.count ; i++)
 {
var href = "'" + feed.value.items[i].link + "'";
var pTitle = feed.value.items[i].title;
var pComment = " \(" + feed.value.items[i].commentcount + " comments\)";
var pList = "<li>" + "<a href="+ href + '" target="_blank">' + pTitle;
 document.write(pList);
 document.write(pComment); //to remove comment count delete this line
 document.write('</a></li>');
 }
 document.write('</ul>');
 }
 </script>
 <script src="http://pipes.yahoo.com/pipes/pipe.run?
 YourBlogUrl=http://URLBLOGANDA.blogspot.com
 &Order=alphabet
 &_id=401e43055731c1a29f1e1d3eb5e8e13f
 &_callback=getYpipeTL
 &_render=json"
type="text/javascript"></script>
<p style="display:none;">TOC by <a href="http://www.tutorialblogspot.com/">Tutorial Blogspot</a></p>
<!-- Alphabetical Post Title Listing End -->

• Klik tombol Preview sebelum di Publish

Perubahan yang bisa dilakukan :

1. Ganti http://URLBLOGANDA.blogspot.com dengan URL blog sobat
2. Ganti kata alphabet menjadi chrono kalau sobat blogger menginginkan daftar isi tidak di atur berdasarkan Abjad atau Alphabet
3. Bentuk default dari Daftar Isi ini menggunakan Bullet list. Kalau ingin dirubah menjadi angka, ganti kode ul menjadi ol (ada dua kode ul di dalam kode daftar isi, ganti kedua kode itu).
4. Untuk menghilangkan jumlah komentar yang tampil dalam daftar isi ini, hapus kode document.write(pComment); //to remove comment count delete this line
5. Ganti kata bold menjadi normal kalau sobat blogger ingin judul posting tidak tampil dengan tulisan tebal

Tambahan :

• Publish daftar isi tersebut tetap dalam mode HTML bukan Compose
• Jika daftar isi tetap tidak muncul, rubah pengaturan posting yang terdapat disebelah kanannya sehingga pengaturannya seperti gambar di bawah ini!

Tips yang berkaitan dengan tutorial di atas :

1. Cara membuat widget daftar isi dengan bullet list

Cara Buat Widget Daftar Isi Blog

Hari ini saya akan sharing sebuah widget daftar isi atau widget table of content kepada sobat blogger. Widget daftar isi ini merupakan widget pertama yang saya buat. Widget ini menampilkan title post yang di atur menggunakan bullet list. Mungkin selama ini, sobat blogger sering menemukan widget daftar isi yang menampilkan link yang bertuliskan "Widget By", widget ini tidak menampilkan link yang seperti itu, jadi kesan copy paste kode widget daftar isi tidak terlihat. Tampilan dari widget TOC ini sangat simple, tapi sobat blogger bisa merubah tampilannya dengan menambahkan warna background atau merubah warna bingkainya.

---

Kode Untuk Membuat Widget Daftar Isi Otomatis Untuk Blog

---

Berikut ini kode untuk membuat daftar isi:

<div style="overflow:auto;padding:0px 10px; width:auto; height:260px;border:1px solid #bbbbbb;">
<div>
<ul>
<script style="text/javascript">
var numposts = 9999;
var standardstyling = true;
</script>
<script>
<!--
document.write(unescape("\x3C\x70\x20\x73\x74\x79\x6C\x65\x3D\x22\x64\x69\x73\x70\x6C\x61\x79\x3A\x6E\x6F\x6E\x65\x3B\x22\x3E\x54\x4F\x43\x20\x62\x79\x20\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x74\x75\x74\x6F\x72\x69\x61\x6C\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D\x2F\x32\x30\x31\x32\x2F\x30\x36\x2F\x63\x61\x72\x61\x2D\x62\x75\x61\x74\x2D\x77\x69\x64\x67\x65\x74\x2D\x64\x61\x66\x74\x61\x72\x2D\x69\x73\x69\x2D\x62\x6C\x6F\x67\x2E\x68\x74\x6D\x6C\x22\x3E\x43\x61\x72\x61\x20\x42\x75\x61\x74\x20\x57\x69\x64\x67\x65\x74\x20\x44\x61\x66\x74\x61\x72\x20\x49\x73\x69\x20\x42\x6C\x6F\x67\x3C\x2F\x61\x3E\x3C\x2F\x70\x3E"));
//-->
</script>
<script type='text/javascript' src='http://tutorialblogspot.googlecode.com/files/toc-bulletlist.js'></script>
<ul><script src="http://url-anda.blogspot.com/feeds/posts/default/?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=9999"></script>
</ul></ul></div></div>

Untuk kostumisasi :

1. Ganti tulisan yang berwarna merah dengan URL blog sobat.
2. Kalau sobat blogger memasang widget ini di tempat postingan, hapus kode height:260px; (kita menghapus kode itu supaya tidak menggunakan scroll bar).
3. Kalau sobat blogger ingin mengganti background dari widget ini, sobat blogger tambahkan kode background: #F6CEE3; setelah kode border:1px solid #bbbbbb;
4. Untuk warna bingkainya, silahkan sobat blogger ganti kode #bbbbbb dengan kode warna yang lain.

Kalau sobat blogger memiliki pertanyaan, mamfaatkan kolom komentar di bawah ini untuk bertanya.