Membuat "Elegant" Read More

Di postingan yang baru ini, kita akan membuat link Read more yang jika kita meng-klik link tersebut, maka keseluruhan artikel akan terpampang dibawahnya alias langsung "full-post", jadi tidak perlu meload ke halaman yang lain. Lebih praktis kan..??!

Berbeda dengan Read more yang disini, karena bila kita meng-klik link tersebut, maka keseluruhan artikel akan diload ke halaman yang lain. Nach, semua memiliki keunggulannya masing-masing, tergantung kita mau milih yang mana. Ok, sekarang kita praktekin.. lanjutt...

Langkah Pertama:
Buka menu Layout kemudian pilih Edit HTML. Kasih tanda cek (centang) pada cekbox "Expand Widget Template". Jangan lupa backup blogger dengan mengklik "Dowlnoad Template Lengkap".

Langkah Kedua:
Copy-Paste kode dari BloggerBuster dibawah, kemudian letakan kode tersebut sebelum kode </head>.

<script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery-1.2.3.pack.js' type='text/javascript'/>
<script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery.extractor.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function() {

$('.excerpt').expander({
slicePoint: 280, // change this to the length in characters you would like to display.
// HTML tags included in this count.
// the folllowing functions apply when choosing the expanding post version
expandEffect: 'fadeIn', // the effect used for displaying expanded text.
expandText: '[...]', // Change this from an ellipsis to "Read More" for example
userCollapseText: '[^]' // This is the icon used for truncating the post after it has been expanded.
});

});
</script>

Kode yang warna Biru dapat kita ganti, misalnya "Selengkapnya..." dan satunya "Ringkasan..." atau dengan yang lainnya sesuai keinginan kita.

Langkah Ketiga:
Selanjutnya cari kode <data:post.body/>, k'lo sudah ketemu keseluruhannya akan tampak seperti berikut:

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Nach, keseluruhan kode diatas kemudian kita Replace dengan kode berikut:

<b:if cond='data:blog.pageType != "item"'>
<div class='excerpt post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<a expr:href="data:post.url">Continue Reading<;/a>
<b:else/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>

Tulisan warna Biru juga boleh diganti, dan jangan lupa Save perubahannya. Semoga nggak ada yang bingung, aminn...