Blog Belliy: Cara Membuat "Read More" dengan Fitur Jump Break

20/07/10

Cara Membuat "Read More" dengan Fitur Jump Break

22:55 |

Diposting oleh Belliy_R |

Selamat berjumpa kembali dengan posting artikel saya pada kali ini. Pada kesempatan ini saya ingin membagikan sebuah teknik mempersingkat sebuah postingan artikel di blog, yaitu dengan menggunakan "read more/baca selengkapnya" dengan menggunakan fasilitas "Jump Break" yang tersedia di dalam editor blogspot.com.

Cara ini sebenarnya sudah banyak yang mengetahuinya, terlebih-lebih para maestro blog pada umumnya. Akan tetapi teknik variasi cara pembuatannya-pun juga berbeda-beda. Kenapa demikian saya terangkan, karena dilihat dari basic individu blogger masing-masing dalam pemahaman mengenai teknik kode HTML tersebut.

Jadi pada postingan saya kali ini saya hanya memposting cara yang menurut saya "mudah". Kenapa dibilang mudah? ya karena saya mempraktekkannya terlebih dahulu. Hee...

Baiklah langsung saja kita praktekkan caranya seperti di bawah ini :

Silahkan anda Loggin dulu dengan akun anda ke Blogger.com
Ini sangat penting menurut saya, pastikan ada artikel di blog anda untuk diterapkan "read more"-nya.
Klik Tab "Posting" , lalu klik sub Tab Posting, yaitu : "Edit Entri".
Pilihlah terlebih dahulu daftar artikel anda yang dirasa perlu untuk menerapkan "read more"-nya tadi.
Langsung ke posting editor blogspot untuk menerapkannya.
Arahkan kursor editor anda dimana anda akan menempatkan "read more" anda terlebih dahulu.
Jika sudah anda tentukan, silahkan klik tombol toolbar anda di atas kotak editor anda. seperti di bawah ini:

Sebagai catatan penggunaan "jump break" untuk mode editing "Compose".
Jika anda berada pada mode editing "HTML" anda hanya tinggal menambahkan kode di bawah ini:

Jika anda sudah merasa sudah pas mengenai pengaturan "jump break" anda. Silahkan Save.

Catatan :

Perlu diketahui bahwa tidak semuah penerapan "read more" ini bagi semua orang berhasil menerapkannya, hal ini dikarenakan oleh faktor jenis template anda sendiri, apakah masih menggunakan tempalate classic atau tidak. Hal ini juga di alami oleh saya sendiri, yang masih berjenis template classic (third-party template). Pengalaman saya waktu mau menerapkan "read more" ini, saya menemukan permasalahan dimana tampilan "read more"-nya terdapat ada 2 tulisan, waktu di display, mulanya saya sempat bingung, kok bisa 2 begitu tampilan tulisan "read morenya"??. Setelah otak-atik dan mencari tahu sendiri pada pengeditan template saya, ternyata terdapat 2 kode HTML yang sejenis untuk penerapan "read more"-nya. Hee. Silahkan anda lihat perbedaannya :

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if>

Keterangan : Kode HTML di atas adalah bagian template saya sebelumnya (bawaan tempalete secara default) yang belum dihapus sehingga menimbulkan tulisan "read more" ganda. Saran saya sebelum anda mempaste kode di bawah ini, sebaiknya anda cek dulu apakah sudah ada kode di atas atau belum, ini untuk mengantisipasi dari permasalahan saya tadi.

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >

Keterangan : Kode HTML di atas adalah bagian template yang saya masukkan ke template saya.

Jadi di sini diperlukan beberapa bedah template pada Source HTML anda terlebih dahulu seperti berikut :

Silahkan anda masuk ke Tab Rancangan (Tata Letak)
Klik Edit HTML. Sebaiknya anda download terlebih dahulu Template lengkap anda untuk jaga-jaga.
Jangan lupa mencentang kotak "Expand Template Widget"-nya.
Silahkan anda cari kode berikut di bawah ini dengan mem-paste di kotak pencarian (Ctr+F) :
<data:post.body/>
Jika sudah ketemu, coba anda taruh kode di bawah ini tepat di bawah kode di atas barusan:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >
Jangan lupa Save Template anda tadi. Selesai.

Sampai di sini dulu artikel saya kali ini. Sebelumnya saya mengucapkan mohon maaf jika ada kesalahan baik dalam penulisan, maupun gaya bahasa yang saya lantunkan sehingga tidak berkenan dihati para pembaca sekalian. Wassalaam....