Membuat Read More dengan Page Break

Cara Mudah Membuat Read More >> Dengan Page Break

Kemarin sempat mampir di blog teman yang sudah mengaplikasikan read more>> pada blognya, tertarik banget untuk mengaplikasikannya di blog sendiri, setelah bertanya, ternyata si mpunya blog masih memakai content html yg ngejlimet (hadehh langsung pusing *tepok jidat), setelah penasaran untuk cari yg lebih mudah karna untuk ukuran saya adalah kebutuhan bloging pemula, sampai akhirnya saya Googling kemudian mampir sana sini di blog tetangga baca baca baca dan...baca..."AHA!! i found it!", ternyata Kini pihak Blogger sudah memberikan fitur khusus yang berfungsi seperti “read more” bahkan cukup mudah tanpa utak atik template dan penambahan script yang ngejlimet, yaitu "Page break" (senangnya... >.<) mungkin sudah pada tahu fungsi "Page Break" ini. Memang seiring perkembangan jaman, pihak blogger terus memberikan fitur-fitur tambahan yang memudahkan kita dalam membuat blog. Dulu sewaktu belum ada fitur “page break” ini, seorang blogger harus susah payah mencari info tentang membuat “read more”, (termasuk saya, hahaha :D). 


Untuk menggunakan fitur ini, pengguna harus menulis pada mode “compose” bukan pada mode “edit html” (lebih gampang lagi fikirku... :D) Dan memang fitur ini dibuat untuk kemudahan bagi blogger yang tidak menguasai bahasa HTML ( Hyper Text Markup Language ). Ikon fitur ini ditampilkan pada mode “compose” dengan simbol “kertas sobek”. Jika penulis hendak menerapkannya, cukup tentukan pada baris mana tulisan akan dipotong dan meletakkan kursor pada baris tersebut dan klik ikon “page break” tadi. Maka pada kolom postingan akan ditampilkan garis yang memotong tulisan seperti tampilan Microsoft Word yang menyatukan halaman atas dan bawahnya. 

Sebelum ke  "Page break" pastikan Basic Setting blog kamu seperti dibawah ini :

Berikut contoh tampilan penggunaan fitur “page break” :

Gambar simbol "page break" pada toolbar postingan

Garis pada gambar adalah hasil "page break" pada penulisan mode "compose"

Penggunaan "page break" secara manual pada mode "edit html"

Untuk yang ingin tetap menulis dalam mode "Edit HTML" dan ingin menggunakan fitur page break, bisa dengan menambahkan kode seperti berikut :

<!--more-->

Tempatkan kode tersebut diantara kata untuk memulai penyingkatan artikel atau untuk memulai pemotongan. Jadi tinggal pilih, menulis pada mode "Compose" atau "Edit HTML" menggunakan fitur "page break" atau membuat "read more" dengan cara yang mudah dan sederhana. Dengan penulisan kode yang sangat sederhana tersebut, pengguna blogger sekarang tidak perlu lagi repot menambahkan kode khusus lewat “Edit HTML” atau menambahkan kode tambahan pada template serta tidak perlu menulis post template seperti <span class="fullpost"> dan </span>sehingga lebih simple dan praktis. dimana setiap artikel Tulisan "Baca Selengkapnya>>" atau "Read More>>" bisa anda edit sesuka kamu pada menu "Tata Letak", klik tulisan "Edit" pada "Posting Blog". 

Pada jendela yang ditampilkan, anda bisa mengganti tulisan tersebut termasuk menambah fitur "reaksi pembaca" untuk setiap postingan. Contoh hasilnya nanti akan ditampilkan seperti berikut :

 "Contoh gambar"

versi HTMLnya : Untuk membaca kelanjutannya, klik tulisan berikut<!--more--> untuk membaca lanjutan artikel disini.

Jadinya akan seperti berikut :

Untuk membaca kelanjutannya, klik tulisan berikut Baca selengkapnya>> atau Read more>>

Jika penggunaan fitur page break tidak berfungsi atau tidak muncul tulisan “Read More” atau “Baca selengkapnya>>” maka dipastikan template yang anda gunakan tidak memiliki kode untuk pagebreak. Berikut kodenya :

<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>

Untuk menambahkan kode diatas, silahkan buka dashboard blog dan pilih “Tata Letak” lalu pilih “Edit HTML”. Beri tanda centang pada “Expand Template Widget” kemudian cari kode berikut :

<div class='post-footer'>

Jika anda ingin mudah mencarinya, cukup copy kode diatas lalu letakkan kursor pada kode template dan tekan “Ctrl + F”. Selanjutnya paste-kan pada kolom yang muncul, biasanya ada pada bagian bawah jendela browser. Jika ketemu kodenya, biasanya kode ditampilkan dengan blok warna hijau. Langkah selanjutnya, copy kode “page break” tadi dan paste kan tepat diatas kode <div class='post-footer'> , contohnya nanti seperti berikut :

<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>

<div class='post-footer'>

Jika sudah ditambahkan, klik “Simpan Template” dan lihat hasilnya. TADAAAAA jadi deh, kalau gak jadi juga berarti "HUMAN ERROR" di kamu, di cek lagi yaa... ^o^

Sekian info singkat cara “membuat read more” menggunakan “page break”, Semoga info ini bermanfaat yaaa... (^_^)

see you in my next post ^o^

~d'vinch~