Selasa, 29 Desember 2009

Cara Membuat Homepage Menjadi Daftar Isi


Apaan tuh maksudnya judul diatas? Maksudnya cara membuat homepage menjadi daftar isi adalah membuat homepage hanya berisi daftar dari judul konten saja. Contohnya seperti gambar diatas.

Nah, apabila pengunjung mengklik tulisan (Read ») (lihat contoh diatas), maka pengunjung akan dibawa menuju postingan aslinya. Seperti gambar dibawah ini.

Yuk, langsung saja kita buat...

Pertama-tama yang harus dilakukan adalah login ke Blogger, lalu klik Tata Letak, lalu klik submenu Edit HTML. Oh, ya. Sebelum kita memulainya, backup dulu templatenya. Caranya, klik Download Template Lengkap. Selanjutnya, ikutilah langkah-langkah dibawah ini.

1. Beri tanda centang pada kotak Expand Template Widget.

2. Lalu cari kode berikut ini.
</head>
3. Lalu taruh kode berikut ini diatasnya.
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post-timestamp, .reaction-buttons, .star-ratings, .post-backlinks, .post-icons, .post-labels, .datebar, .datebarleft, .datebarright, .post-footer{
display:none;
}
</style>
</b:if>
4. Cari kode seperti berikut ini.
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
5. Lalu hapus dan ganti dengan kode berikut ini.
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<data:post.title/> <a expr:href='data:post.url'>(Read &#187;)</a>
<b:else/>
<h3 class='post-title entry-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
</b:if>
Tulisan (Read &#187;) bisa anda ganti dengan yang lainnya. Misalnya (Baca...), dan sebagainya.

6. Lalu cari kode berikut ini.
<data:post.body/>
7. Lalu hapus dan ganti dengan kode berikut ini.
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
#daftar{display:none;}
</style>
<b:else/>
<style>
#daftar{display:inline;}
</style>
</b:if>

<div id='daftar'>
<data:post.body/>
</div>

8. Lalu simpan.

Capek ya? Nah, kalau cape ngopi dulu...

Udah selesai ngopinya? Nah, sekarang kita lanjut.

Nah, sekarang kita beralih ke submenu Elemen Halaman. Cari tulisan Posting Blog dan klik tulisan Edit di pojok kanan bawahnya.

Lalu, pada bagian Jumlah posting di halaman utama, isikan 100. Anda bisa mengisinya dengan angka berapa saja.

Kalau sudah klik Simpan.

Nah, kalau masih ada tanggalnya, kita masih harus memodifikasinya lagi supaya yang tampil hanya judulnya. Caranya, pastikan anda masih berada di submenu Elemen Halaman. Lalu klik Edit di pojok kanan bawah Posting Blog.

Lalu hilangkan tanda centang di kotak dibawah tulisan Opsi Laman Entri.

Udah belom? Kalau udah klik Simpan.

Nah, apabila ada pertanyaan atau komplain, silakan komen. Semoga bermanfaat!

2 komentar:

  1. bagaimana cara yang praktis aja..kayaknya agak bertele-tele malah bingung

    BalasHapus
  2. makasih tutorialnya...cuma pertanyaan saya bagaimana membuat judul postingan nya menjadi lebih besar ukurannya

    BalasHapus

Apa pandapat anda terhadap artikel ini? Berkomentarlah tanpa rasa malu, ragu dan takut.

Komentar diluar tanggung jawab pemilik blog. Jika anda berkomentar yang berbau pornografi atau sara, maka itu risiko anda sendiri.

Jika anda mengirimkan komentar spam, maka akan saya hapus.

Jika anda tidak ingin komentar anda ditampilkan, silakan kirimkan e-mail di halaman email me.

Jika anda ingin berceloteh bebas, silakan tuju halaman ini.

Anda dapat menggunakan beberapa tag HTML seperti <b>, <i>, <u>, <a>, <strike>, <sub>, <sup>, dan lain-lain. Anda juga dapat menggunakan emoticon Plurk seperti (lmao) (taser) (haha).

Untuk link exchange bisa dilakukan dihalaman ini, sedangkan banner exchange dihalaman ini. Permintaan link exchange dan banner exchange selain dihalaman tersebut tidak akan dilayani.