[Tutorial] Expandable Post Summary Dengan jQuery

Saya mulai tertarik dengan jQuery ketika membaca satu artikel di PCMEDIA edisi September lalu, iming-iming 'Read More Yang Elegan' membuat saya suka dan akhirnya memakainya di Blog saya. Jika anda menemukan situs dengan 'read more' yang mengarahkan anda ke halaman lain, dengan jQuery anda tidak perlu itu karena full post akan ditampilkan di halaman yang sama dan dengan animasi yang cantik.

Caranya :
  • Layout -> Edit HTML, backup template anda terlebih dahulu.
  • Klik Expand Widget Templates
  • Cari (ctrl+f) kode sebagai berikut : </head>
  • SEBELUM kode tersebut, paste script ini :
<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.expander.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

$('.excerpt').expander({
slicePoint: 280, // default is 100
expandText: '[Read More...]', // default is 'read more...'
});

});
</script>
  • Anda dapat merubah bagian yang di warnai dengan biru, ubah 280 menjadi lebih rendah atau tinggi untuk merubah summary post yang ditampilkan, dan ubah read more menjadi kata yang anda suka untuk menjadi trigger post lengkap yang muncul.
  • Cari lagi kode sebagai berikut :
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/&gt <!-- clear for photos floats -->
</div>
  • Dan replace dengan ini :
<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>
<b:else/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>
  • Preview untuk melihat perubahannya.
Anda juga dapat menggunakan template Minima yang sudah dilengkapi jQuery :
http://4columnblog.blogspot.com/2008/10/4-column-template-expandable-post.html

Source :
http://www.bloggertipsandtricks.com/2008/10/jquery-expandable-post-summary.html

No comments

Powered by Blogger.