Sunday, August 10, 2008

Collapse Posting with Readmore 1

Posted by dav On 8:18 PM
Sering kita menemukan artikel dari para master blooger yang pada halaman utamanya terdapat beberapa posting yang terpenggal [Collapse], jika kita ingin membacanya secara lengkap [Expand] kita harus meng-klik Readmore.. | Selengkapnya... atau kita harus meng-klik judul posting tersebut. Ada beberapa teknik pemenggalan posting [Collapse], tapi yang baru diketahui oleh penulis saat ini baru ada 2 (dua) jenis teknik pemenggalan posting [Collapse] yaitu ; Full Expanded dan Peekaboo Expanded. Pada artikel kali ini penulis akan mencoba menjelaskan pemenggalan posting [Collapse] yang jenis Full Expanded, karena teknik ini termasuk teknik yang paling mudah dan sederhana dalam pemasangan kode didalam script XML template blogger.

Memasang Read More Versi 1.0

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML" dan Check "Expand Template Widget"
Langkah 3 :
Carilah code dibawah (Gunakan fasilitas pada browser anda, biasanya "Find"):
<data:post.body/>
Langkah 4
Gantilah (Replace) code diatas dengan kode dibawah ini (Copy Paste) :
<!-- Begin Read More Code -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>#fullpost{display:inline;}</style>
<data:post.body/>
<b:else/>
<style>#fullpost{display:none;}</style>
<data:post.body/>
<a expr:href='data:post.url'>Readmore...</a>
</b:if>
<!-- End Read More Code -->
Sehingga secara keseluruhan kode menjadi seperti dibawah ini:
<div class='post-header-line-1'/>
<div class='post-body'>
<!-- Begin Read More Code -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>#fullpost{display:inline;}</style>
<data:post.body/>
<b:else/>
<style>#fullpost{display:none;}</style>
<data:post.body/>
<a expr:href='data:post.url'>Readmore...</a>
</b:if>
<!-- End Read More Code -->
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Langkah 5
Kata Readmore... bisa anda ganti dengan kalimat apa saja (misal : Baca Selengkapnya...)
Langkah 6
Kode diatas tidak akan berjalan baik jika pada posting tidak disisipkan code dibawah:
Isi posting anda
<span id="fullpost">
Isi posting yang terpenggal dan akan tampil jika kita klik Readmore...
</span>
Perhatian!
Sisipkan kode diatas (Langkah 7 yang diblok) disetiap kita membuat posting dan sisipkan kode tersebut pada post editor mode "Edit HTML" JANGAN pada mode "Compose"
Mudah-mudahan berhasil....
Salam hangat dari Banjarsari - Ciamis - Jawa Barat