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!


Apabila anda menyukai postingan ini, anda bisa men-sharenya ke yang lain. Semisal ke Facebook atau Twitter. Silakan klik salah satu pilihan dibawah.

Buzz It

Artikel Menarik Lainnya



2 komentar:

Mr.PA MUJIE mengatakan...

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

r_oges mengatakan...

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

Posting Komentar

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.



Emoticon yang dapat digunakan [Tampilkan] [Sembunyikan]



:-))
:-)
:-D
(lol)
:-p
(woot)
;-)
:-o
X-(
:-(
:'-(
:-&
(K)
(angry)
(annoyed)
(wave) | (bye)
B-)
(cozy)
(sick)
(:
(goodluck)
(griltongue)
(mmm)
(hungry)
(music)
(tears)
(tongue)
(unsure)
(highfive)
(dance)
(blush)
(bigeyes)
(funkydance)
(idiot)
(lonely)
(scenic)
(hassle)
(panic)
(okok)
(yahoo)
(cry)
(doh)
(brokenheart)
(drinking)
(girlkiss)
(rofl)
(money)
(rock)
(nottalking)
(party)
(sleeping)
(thinking)
(bringit)
(worship)
(applause)
8-)
(gym)
(heart)
(devil)
(lmao)
(banana_cool)
(banana_rock)
(evilgrin)
(headspin)
(heart_beat)
(ninja)
(haha)
(evilsmirk)
(eyeroll)
(muhaha)
(taser) | (rammi)
(banana_ninja)
(beer)
(coffee)
(fish_hit)
(muscle)
(smileydance)
(fireworks)
(goal)
(bzzz)
(dance_bzz)
(Русский)
(code)
(morning)

Cara menggunakan: ketikkan emoticon yang diinginkan. Untuk yang ada pemisah berupa "|" maka itu adalah alternatif. Seperti (wave) | (bye) maka bisa (wave) bisa (bye)


Pengikut

Follow via NetworkedBlogs



Jangan lupa jadi fans Muhammad Rizki Fadillah's Blog di Facebook. Klik link di bawah ini.

http://www.facebook.com/pages/Tips-Trik-Matematika-Tutorial-Blogging-Muhammad-Rizki-Fadillahs-Blog/277782561876

Setelah mengklik link diatas, klik tombol Become A Fan untuk menjadi fans Muhammad Rizki Fadillah's Blog.