Anda sedang menggunakan mode :

Blogger jQuery Read More [a new readmore]

0

Written on 03.24 by Muharrom, Muhammad Aji

     Alhamdulillah, setelah mengutak-atik script selama beberapa bulan minggu hari, akhirnya ketemu juga kombinasi read more yang tepat dan sesuai keinginan saya. Fungsi dari read more ini, seperti yang telah diketahui adalah menyingkat isi blog yang dianggap terlalu panjang, kemudian menampilkan link "Read more!" sebagai gantinya. Ketika link ini di-klik, maka "biasanya" akan terbuka halaman baru yang menampilkan konten blog secara lengkap. Dulu, blogger nggak punya yang kayak gini, jadi orang pada gembar-gembor mengembangkan read more, deh!

     Kelebihan dari read more yang saya kembangin ini ialah,
  1. Gak perlu reload
  2. Ada animasinya!
  3. Jika gak diperlukan, link read more akan 'bersembunyi'
    Adapun read more ini menggunakan jQuery javascript library  sebagai kode dasar. Yang perlu Anda lakukan untuk menggunakan read more ini ialah :

1. Pergi ke halaman "Tata Letak" atau "Layout", lalu klik Edit HTML. Jangan lupa, centang pilihan Expand Template Widget
2. Cari (menggunakan metode Ctrl + F) tulisan <data:post.body/> . Ganti tulisan tersebut dengan

<b:if cond='data:blog.pageType != "item"'>
<data:post.body/>
<span style="float: right;"><a class="rmlink" expr:href="data:post.url" href="http://www.blogger.com/post-create.g?blogID=8812668637785755448">Baca selengkapnya!</a></span>
<b:else/>
<data:post.body/>

<b:else/>
<data:post.body/></b:if>

3. Cari lagi tulisan </head>  Letakkan kode berikut ini sebelum tag </head> tersebut.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<b:if cond='data:blog.pageType != "item"'>
 <script>
// Don't remove credits!!!
// Script created by ajim
// Visit hallofnotes.blogspot.com for more info!

  $(document).ready(function () {
   $('a.rmlink').each(function() {
var link = $(this);
var full = link.parent().prev('span.fullpost');
if(full.length) {
link.show();
full.hide();
link.click(function(event) {
var teks = link.text();
var asli = 'Baca selengkapnya!';
full.slideToggle('normal');
 if(teks == asli) {
link.text('Baca ringkasan!');
} else {
link.text(asli);
}
event.preventDefault();
 });
} else {
link.hide();
}
});
</script>
</b:if>
Okeh, selesailah sudah kode ini. Mungkin sudah agak kadaluarsa, tapi tetep aja lebih indah. Oh ya, untuk menggunakan kode ini, Anda harus menambahkan kode <span class="fullpost"> sebelum tulisan yang ingin Anda persingkat, kemudian kode </span> di akhir post Anda. Sekian!

If you enjoyed this post Subscribe to our feed

No Comment

Posting Komentar