Memasang Jumplink Post Tanpa Javascript - Pengganti Readmore di Blog

Saat ini, mayoritas Blog yang ada sudah memakai script readmore, entah readmore secara manual atau secara otomatis. Memang manfaat memasang readmore ini sangatlah banyak, salah satunya yaitu meningkatkan pageviews Blog dan mempermudah pengunjung dalam mencari artikel.

Nah, kali ini penulis tidak akan membahas readmore yang terpasang secara manual(sudah banyak ditinggalkan karena kurang praktis) tetapi membahas readmore yang terpasang secara otomatis. Tapi taukah Anda? bahwa readmore yang terpasang secara otomatis itu memanfaatkan javascript? padahal, pemasangan javascript itu sendiri sangat tidak direkomendasikan karena dapat memperlambat loading Blog.

Tapi, sekarang sudah ada solusinya, yaitu readmore yang terpasang otomatis tapi tanpa menggunakan javascript. Sangat bagus bukan? hasilnya pun sama persis dengan readmore yang menggunakan javascript. Contohnya ya seperti Readmore(Baca: Baca Selengkapnya) yang terpasang pada Ide Pelajar ini.

Berikut langkah - langkah pemasangannya :

1. Silakan login ke Akun Blogger Anda.
2. Pilih bagian Template > Edit HTML > Lanjutkan
3.Back Up dulu template Anda, hanya untuk berjaga - jaga bila terjadi kesalahan yang tidak diinginkan
4. Jangan lupa, beri centang pada Expand Template Widget

5. Cari Kode <data:post.body/> , Biasanya dalam template terdapat banyak kode <data:post.body/> , pastikan Anda sudah menemukan kode <data:post.body/> yang kira - kira tempatnya berada didekat kode:

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

Setelah ketemu, silakan Anda ganti kode <data:post.body/> tadi dengan kode dibawah ini:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</b:if>
<data:post.snippet/>
<b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
<div class='jump-link' style='float:right'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
</b:if>

6. Selanjutnya, tinggal menambahkan kode CSS untuk thumbnail gambar, silakan cari kode ]]></b:skin> , Copy dan paste kode berikut tepat diatasnya :

.thumb img {
float: left;
margin: 0 10px 10px 0;
}

7. Sebelum Anda Save/Simpan , pilih pratinjau dulu, untuk memastikan apakah Readmore otomatis tanpa javascript ini sudah bekerja dengan baik ataukah belum. Bila Sudah bekerja, tinggal klik Save/Simpan.

Nah, bila Anda belum berhasil memasangnya, silakan teliti lagi atau coba ulangi langkah diatas dan apabila masih saja belum dapat bekerja, Anda dapat meninggalkan pertanyaan pada form komentar dibawah Artikel berikut. Penulis berharap Artikel Memasang readmore otomatis atau jumplink tanpa javascript ini dapat bermanfaat.
Selamat mencoba!

Script Source :
Donor Ilmu

Memasang Jumplink Post Tanpa Javascript - Pengganti Readmore di Blog
Ditulis Oleh:
Doedja
Rating: 5 Terima kasih telah membaca! Bila Anda ingin copy paste artikel ini, silakan izin terlebih dahulu pada penulis, serta jangan lupa untuk menyertakan link sumbernya. Blogger Indonesia punya etika kan? Salam Blogger Indonesia!. <a href='http://idepelajar.blogspot.com/2012/04/memasang-jumplink-post-tanpa-javascript.html'>Memasang Jumplink Post Tanpa Javascript - Pengganti Readmore di Blog</a>