Cara buat "Readmore" pada Blogger

Banyaknya permintaan mengenai cara buat readmore membuat saya tetap
mengharuskan artikel ini ditulis. walaupun tutorial cara buat readmore sudah
banyak ditulis oleh rekan blogger, sayangnya penjelasan yang diberikan kadang
tidak mudah dimengerti dan malah membuat bingung, untuk itu tidak ada salahnya saya juga menulis
artikel ini sebagai pelengkap agar mempermudah blogger baru bisa lebih mengerti
cara membuat readmore serta cara penggunanan kode readmore pada
posting.

Mungkin rekan blogger yang baru mulai membuat blog masih bingung apa itu readmore?
Readmore adalah pemenggalan kalimat pada posting suatu halaman, Pemenggalan
halaman posting biasanya ditandai dengan "Read More", "Next",
"Baca
Selanjutnya", "Baca berikutnya", "Selengkapnya" atau apalah
namanya :).
Readmore biasanya digunakan untuk menandai bahwa kalimat pada posting
masih mempunyai kelanjutan, dan juga berguna mempersingkat halaman posting yang
panjang. Pengen tau cara buatnya?

Contoh ReadMore :

Pernah menemukan pesan seperti diatas?...jika pernah jangan panik, ini hanya pesan pemberitahuan dari blogger kalau layanan sedang melakukan perbaikan maintenance pada server. pesan ini hanya berlangsung kurang lebih beberapa menit setelah itu akan normal kembali. Semoga informasi ini membantu :)Readmore.. »

Untuk membuat readmore ikuti langkah dibawah ini :

Langkah Pertama:

Buka Template - Edit HTML - Berikan
tanda centang pada "Expand widget template"

Langkah Kedua:

Jangan Lupa backup blogger dengan mengklik "dowlnoad template lengkap"

Langkah Ketiga:

Cari kode dibawah ini:

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

Tips :
Untuk mempermudah pencarian kode diatas sebaiknya ikuti tips berikut
ini. pertama kamu buka program text editor misalnya notepad.exe ( Pada MS
Windows tekan menu Start -> Proggram -> Accessories ->
Notepad) kemudian kopy/paste kode HTML tadi ke notepad. kemudian pada
notepad pilih Menu Edit -> Find. pada box find masukan kode ini <div class='post-header-line-1'/> kemudian
klik tombol Find next. (jika masih gak ketemu terpaksa kita melakukan
pencarian secara manual)

Jika sudah menemukan kode diatas, Copy-Paste kode dibawah ini kemudian
letakan kode tersebut dibawah kode diatas.

 

<b:if cond='data:blog.pageType
== "item"'>

<style>.fullpost{display:inline;}</style>

<p><data:post.body/></p>

<b:else/>

<style>.fullpost{display:none;}</style>

Kemudian dibawah kode diatas kita akan menemukan
kode:

<p><data:post.body/></p>

Lakukan Copy-Paste kode dibawah ini dibawah code
diatas

<a expr:href='data:post.url'>Readmore

»»</a>

</b:if>


 

Tips: Kode
Readmore diatas bisa ganti dengan kalimat sendiri (contoh "Baca
Selanjutnya", "Baca berikutnya", "Selengkapnya")

Kode selengkapnya jika dilihat akan tampak sebagai berikut:

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

<div class='post-body'>

<b:if cond='data:blog.pageType == "item"'>

<style>.fullpost{display:inline;}</style>

<p><data:post.body/></p>

<b:else/>

<style>.fullpost{display:none;}</style>

<p><data:post.body/></p>

<a expr:href='data:post.url'>Readmore

»»</a>

</b:if>

<div style='clear: both;'/>

Jika kita mengedit langsung pada halaman blogger Edit HTML dan semua kode diatas
sudah dilakukan perubahan, jangan lupa disimpan ya :)

Ini jika kita menggunakan Text Editor Notepad : Setelah melakukan pengeditan kode pada notepad, lalu hapus semua kode yang
ada pada halaman edit blogger, kemudian masukan seluruh kode pada notepad tadi
dengan cara copy/paste) Sampai disini pengeditan kode selesai, jangan lupa
disimpan.

Langkah Empat

Setelah kode diatas disimpan kita kembali dan masuk ke tab Pengaturan
-> Format -> cari "Post Template" Kemudian pada kotak masukan kode
dibawah ini

<div class="fullpost">

</div>

Jangan lupa disimpan :)

Langkah Kelima :

Disini saya akan menjelaskan cara penggunaan readmore pada halaman posting.
Ketika kita melakukan posting pertama kali kita akan melihat kode:

<div class="fullpost">

</div>

ingat jangan hapus kode diatas karena kode tersebut merupakan kode yang akan
kita gunakan dalam pemenggalan posting nantinya.

Sebagai contoh lihat cuplikan kalimat dibawah:

Tips of the day merupakan tips singkat yang akan disampaikan kepada pengunjung seriap hari, Tips ini bisa berisi apa saja, bisa berupa Tips Bisnis, Tips memasak, Tips merawat mobil, Tips money online, Tips bercinta atau apalah terserah :), Asal jangan tips blogging karena dah punya om hehehe (emang siapa om ya :). (Dini rencana text yang akan dipenggal) Sebenarnya Tips of the day disini cuma istilah saja...tips yang akan kita buat nanti bukan disampaikan setiap hari melainkan tips ini akan berganti ketika pengunjung melakukan refresh atau reload pada halaman blog.

Bagaimana cara pemenggalan kode diatas? caranya tinggal kamu
lihat 2 kode pemenggalan kalimat dibawah (ingat kode hanya bekerja pada
halaman editor posting)

Tips of the day merupakan tips singkat yang akan disampaikan kepada pengunjung seriap hari, Tips ini bisa berisi apa saja, bisa berupa Tips Bisnis, Tips memasak, Tips merawat mobil, Tips money online, Tips bercinta atau apalah terserah :), Asal jangan tips blogging karena dah punya om hehehe (emang siapa om ya :). <div class="fullpost"> Sebenarnya Tips of the day disini cuma istilah saja...tips yang akan kita buat nanti bukan disampaikan setiap hari melainkan tips ini akan berganti ketika pengunjung melakukan refresh atau reload pada halaman blog.</div>

Jadi hasil posting pada halaman browser akan tampai sebagai
berikut:

Tips of the day merupakan tips singkat yang akan disampaikan kepada pengunjung seriap hari, Tips ini bisa berisi apa saja, bisa berupa Tips Bisnis, Tips memasak, Tips merawat mobil, Tips money online, Tips bercinta atau apalah terserah :), Asal jangan tips blogging karena dah punya om hehehe (emang siapa om ya :). Readmore »»

Selamat mencoba :) happy blogging

Sebagai pelengkap Baca juga artikel dibawah ini :

Rahasia (read more) waktu yang tepat memenggal tulisan halaman posting

Tweet

Postingan terkait:

— Blogger Hack, Tutorial Blogger