27.9.08

membuat model read more di blog

Banyak temen yang merasa tampilan Home blognya terlalu panjang. Hal itu dikarenakan setiap postingan tampil utuh, sehingga membuat Home jadi memanjang ke bawah. Dengan masing-masing posting tampil penuh, maka dengan 5 postingan aja Home blog kita panjangnya bisa lebih 30 cm. Lalu gimana cara memperpendek postingan blog seperti yang ada di blog ini?

Caranya tak lain adalah memenggal postingan dan membuatnya menjadi bersambung atau read more. Untuk membuat read more, silakan masuk ke Control Panel, lalu klik "Setting", pilih "Formatting", lalu di kolom "Post Template"
paling bawah ketikkan atau copy-paste kode ini:

<span class="fullpost">


</span>


dan lalu save.

Setelah itu pindah klik "Layout", dan lalu klik "Edit HTML". Pastikan beri tanda centang di "Expand Template Widget". Setelah itu, ubah kode HTML-nya dengan cara berikut.

Cari kode:

<div class='post-header-line-1'/>

<div class='post-body'>


Letak kode tersebut di bagian tengah agak ke bawah dikit. Jika susah menemukan kode tersebut silakan cari pake fasilitas "Find" via keyboard anda dengan cara mengklik tombol "Ctrl+F". Setelah ketemu, kopi kode di bawah ini dan tempatkan di bawah kode di atas.

<b:if cond='data:blog.pageType == "item"'>

<style>.fullpost{display:inline;}</style>

<p><data:post.body/></p>

<b:else/>

<style>.fullpost{display:none;}</style>


Lalu turunkan kursor ke bawah dikit, maka akan ketemu kode

<p><data:post.body/></p>

Kopi kode HTML di bawah ini dan tempatkan di bawahnya.

<a expr:href='data:post.url'>Read More......</a>

</b:if>

Dengan demikian susunan kode HTML anda akan seperti di bawah ini, di mana warna oranye adalah kode baru yang anda tambahkan.

<div class='post-header-line-1'/>

<div class='post-body'>

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

<p><data:post.body/></p>

<a expr:href='data:post.url'>Read More......</a>
</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Jika sudah benar seperti di atas, silakan save. Maka template read more sudah teraplikasi di blog anda.

Namun bukan berarti posting akan terpenggal secara otomatis. Anda mesti memenggalnya secara manual, yakni ketika anda menulis posting.

Ketika anda hendak menulis yang berarti mengklik "Create Post", maka di atas kanan kotak posting ada dua tanda: Edit Html dan Compose. Kalo biasanya anda menulis dengan mode "Compose", silakan ganti kebiasaan menulis dengan mode "Edit Html". Begitu anda mengklik mode "Edit Html", maka akan tampil kode:

<span class="fullpost">

</span>

Silakan tulis paragrap awal di atas kode <span class="fullpost"> dan paragrap lanjutan di bawah kode tersebut. Maka nanti posting anda sudah menjadi model read more. Ok? Selamat mencoba.

2 comments:

  1. Mas, saya sudah mencobanya sampai petunjuk paling akhir, tetapi ketika di save, kok belum terpisah juga ya (ada kata more). Mohon pencerahannya Mas, karena saya ingin benar-benar berhasil mempraktekkannya. Salam

    ReplyDelete
  2. saya juga blum bisa mempraktekannya.. eror saat disimpan

    ReplyDelete