15 April 2010

MEMBUAT READMORE DENGAN PAGE BREAK

Mungkin ini adalah teknik biasa, bahkan 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” kemudian mempraktekkan pada blognya dengan cara edit html yang rumit. Kini pihak Blogger sudah memberikan fitur khusus yang berfungsi seperti “read more” bahkan cukup mudah tanpa utak atik template dan penambahan script yang njlimet. Hanya saja, untuk menggunakan fitur ini, pengguna harus menulis pada mode “compose” bukan pada mode “edit html”. 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 hendak
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. Berikut contoh tampilan penggunaan fitur “page break” :

simbol page break

Gambar simbol "page break" pada toolbar postingan

tampilan mode compose

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

penulisan html page break

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. Hasilnya bisa anda lihat pada contoh artikel di halaman beranda (Home) blog saya, dimana setiap artikel saya disingkat dengan tulisan “Baca selengkapnya>>”. Tulisan "Baca Selengkapnya>>" bisa anda edit sesuka anda 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 :

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

Jadinya akan seperti berikut :

Untuk membaca kelanjutannya, klik tulisan berikut Baca selengkapnya>>

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 pastekan 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. Demikian tutorial singkat cara “membuat read more” menggunakan “page break”. Tetapi bagaimanapun juga, menulis postingan pada masing-masing mode memiliki kelebihan dan kekurangan masing-masing. Baik pada mode “compose” maupun pada mode “edit html”. Namun bagi saya pribadi, menulis postingan pada mode “edit html” tidak memiliki kekurangan sedikitpun selama kita tahu semua script html yang digunakan pada postingan. Misalnya untuk menentukan tulisan tebal, tanda baca, tulisan miring, menambah link, menambahkan gambar dan mengganti warna tulisan. Apalagi bagi mereka yang tertarik untuk membuat website professional, belajar bahasa HTML adalah suatu kewajiban. Semoga bisa menambah wawasan bagi mereka yang baru belajar.

2 comments:

axel perdana mengatakan...

wah semakin dibaca semakin menarik aja bro..jadi pengenya buka2 postingan yang lainnya...thank's bro..penjelasannya,jelas dan mudah dipahami,terutama bagi pemula kaya aku...(thumbs up)

Lubis Muzaki mengatakan...

mksh.. bermnfaat.. tp punya sya malah readmore muncul 2.. gmana itu?

 

© 2009 TIPS BLOG DAN SOFTWARE KOMPUTER. Powered by Blogger
Design by eJoee BlogsTricks