Tips cara membuat readmore karya O-om.com

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?

Untuk membuat readmore ikuti langkah dibawah ini :

Langkah Pertama:
Klik menu tata letak lalu klik Edit HTML - Berikan tanda centang pada "Expand widget template"

Langkah Kedua:
Jangan Lupa backup dulu template blog anda dengan mengklik "download 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  lainnya)

Cara lainnya lebih mudah yaitu pada waktu Edit Html kita cukup menekan Ctrl+F.maka dibawah akan tampak menu find lalu kita paste kode ini <div class='post-header-line-1'/> tapi jangan lupa beri tanda centang dulu pada "Expand widget template". setelah kode tersebut kita temukan kita paste kode  yang  saya  beri warna merah dibawah ini tepat dibawah kode <div class='post-header-line-1'/> yg kita cari tersebut.

<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 yang saya warnai merah diatas kita akan menemukan kode:

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

Lakukan Copy-Paste kode dibawah ini tepat dibawah code diatas tersebut.

<a expr:href='data:post.url'>Readmore »»</a>
</b:if>

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

Kode selengkapnya setelah kita lakukan copy paste dengan benar 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 ini :

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 :). (Dinsini 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 anda lihat 2 kode pemenggalan kalimat dibawah

ini. sebagian postingan yang akan kita tampilkan, kita masukan sebelum kode <div class="fullpost"> dan sisa  postingan kita, kita  masukan  setelah kode tersebut

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, Salam Blogger mania