Auto Readmore Menggunakan Fitur Jump Break

Assalamu'alaikum...

Kali ini saya akan sedikit memberikan tutorial penggunaan jump break sebagai auto readmore, tutorial ini as request from Adnal Fiaddin Baesando a.k.a Then Must Nando dan Rian Setyo Adi a.k.a Hanya Rian

Jadi intinya mereka ingin artikel dalam blog dapat di customize bagian yang akan termuat di "homepage" dan lengkapnya ada di dalam halaman artikel itu sendiri  sesukanya. Maksud dari hal ini adalah, kita sebagai author bebas menentukan bagian artikel mana yang akan dipotong dan dapat dibaca lengkap setelah pembaca menekan tombol readmore (baca selanjutnya). Misal artikel akan dipotong pada baris ke-n, maka yang dibutuhkan hanyalah kita sebagai author menambahkan jumpbreak setelah baris ke-n. Jadi, jika kita ingin memotong artikel setelah baris ke-10, kita cukup menambahkan jumpbreak setelah baris ke-10 artikel.

Kenapa panduan ini diberikan :

• Sebenarnya sudah ada banyak tutorial semacam ini di dunia maya, cuman ya kebanyakan tutorial tersebut membatasi jumlah kata-kata dan gambar yang dapat muncul di tiap artikel yang dipotong dan sifatnya menyeluruh. Jadi, misal max kata yang selanjutnya akan dipotong ada  200 kata dan max gambar adalah 1 buah, keseluruhan artikel akan dipotong sebanyak 200 kata dan max gambar yang tampil di perpotongan artikel hanya 1 buah.  Nah, dengan panduan di bawah ini, anda dapat leluasa memotong artikel tanpa dibatasi jumlah kata dan gambar yang dapat muncul di perpotongan artikel. Ddengan kata lain, masing-masing artikel perpotongannya dapat berbeda dari segi jumlah maksimal kata dan jumlah maksimal gambar yang tampil.

Panduan dengan gambar :

Saat ingin memotong artikel, author cukup menambahkan jumpbreak 

yang ada di depan tanda panah dibawah ini. Titik jumpbreak akan muncul

sesuai dengan lokasi pointer mouse anda.

Jumpbreak akan muncul setelah langkah 1 dilakukan.

Lanjutan artikel yang akan muncul di halaman artikel dapat ditulis

di bawah garis jumpbreak.

Menerapkannya pada blogspot (menggunakan tampilan blogger statis / terbaru):

• Masuk ke menu "Template Tab"  dan tekan tombol "Edit HTML"

• Setelah itu akan muncul box seperti pada gambar di bawah ini, tekan tombol "Lanjutkan"

• Setelah itu, anda akan diarahkan pada tab "HTML" template yang anda kenakan. Berilah centang pada bagian "Expand Template Widget".

Nah, untuk membuat auto readmore dengan menggunakan jumpbreak. Kita harus memodif bagian jumpbreak pada kolom HTML yang kira-kira bentuk utuhnya seperti dibawah ini :

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

Hapuslah bagian ini :

+ "#more"

Biar ga pusing nyari manual, gunakanlah fitur search pada web browser kamu.

• Caranya, tekan  CTRL+F  secara bersamaan untuk  membuka fitur search pada web browser yang anda gunakan.

Nah masukkanlah kode di bawah ini ke dalam "search box"

+ "#more"

Kalo udah beres dihapus, kode awal tadi akan menjadi seperti ini:

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

#2 Menambahkan text "Readmore" di perpotongan artikel.

#Dalam bentuk kata-kata

• Carilah kode di bawah ini:

<data:post.jumpText/>

• Ganti dengan kode di bawah ini.

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'>Continue reading!</a>
</div>
</b:if>

• Anda bisa memodifikasi kata-kata yang muncul di perpotongan artikel dengan mengganti kata-kata berwarna merah dengan kata-kata sesuka anda.

#Dalam bentuk gambar

• Carilah kode di bawah ini:

<data:post.jumpText/>

• Ganti dengan kode di bawah ini. [Perhatikan kata berwarna merah ato (lokasi gambarmu) ]

<b:if cond='data:post.hasJumpLink'> 
<div class='jump-link'> 
<a expr:href='data:post.url' expr:title='data:post.title'><img src="
lokasi gambarmu"/></a> 
</div> 
</b:if >

Biar gak pusing-pusing amat, buat aja logo "Readmore" sendiri menggunakan paint kemudian upload di new entry dengan catatan entry/artikel tersebut disimpan di draft.

Contoh logo buatan saya menggunakan paint :

Kalo berminat pake logo itu, anda cukup mengganti  lokasi gambarmu  dengan link di bawah ini.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK0ObgqYGmAFZJErvGPnSWjyea7mHIK-8731ZCMIgFqLoXz4bWzC-w6F-u5_y_GGMu7Re4zCiElsUWs8_Rh0ICn_y1mjHxL6JW_EpiN3LfAtmiotTNCjrg_g7aglkdH3ZUFO5gk0mB1Yme/s1600/readmore.png

Memodifikasi style "Readmore" tulisan

Nah, misal tadi di langkah #2 Menambahkan text "Readmore" di perpotongan artikel anda memilih #dalam bentuk kata-kata dan ingin memodifikasi warna teks/menambahkan efek stabilo. Anda cukup menambahkan CSS code di bawah ini :

.jump-link a {
 padding: 5px;
 background: #87CEEB; /* Efek stabilo */
 color: #444; /* Warna kata-kata */
}
.jump-link a:hover {
 background: #666; /* Efek stabilo. */
 color: #fff; /* warna kata-kata*/
}

di atas kode

]]></b:skin>

Kode warna-nya (#angka berwarna merah) dapat anda cari di colour generator di 

link berikut ini

  

SELESAI.

Ya mungkin hanya itu yang dapat saya jelaskan,maaf kalo bahasanya sulit dipahami. Misal kurang paham ato ada pertanyaan lain silahkan tinggalkan di kolom komentar. Thanks....