Selasa, 03 Februari 2009

thumbnail

CARA BUAT READMORE DI BLOGSPOT

Mungkin sudah banyak tutorial yang membahas cara pembuatan Readmore di blogspot
; 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 (saya juga sih) 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? Oke:)Readmore.. >>>


Untuk membuat readmore ikuti langkah dibawah ini :

Langkah Pertama:

Login ke blogspot anda - Buka Template - Edit HTML - Berikan tanda centang pada "Expand widget template"


Langkah Kedua:

Jangan Lupa backup template blog anda dengan mengklik "download template lengkap" atau � download full template� (bagi yang bahasa inggris)


Langkah Ketiga:

Cari kode dibawah ini:



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

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 Copy/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:

Google.com adalah search engine ternama di dunia saingan Yahoo.com. Sudah begitu terkenalnya nama kedua penyedia portal dan search engine tersebut, yang berarti mereka berkualitas, (Dini rencana text yang akan dipenggal) dapat diandalkan, terpercaya dan pasti mereka juga akan menjaga kualitas pelayanan mereka.


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

Google.com adalah search engine ternama di dunia saingan Yahoo.com. Sudah begitu terkenalnya nama kedua penyedia portal dan search engine tersebut, yang berarti mereka berkualitas, <div class="fullpost"> dapat diandalkan, terpercaya dan pasti mereka juga akan menjaga kualitas pelayanan mereka. </div>

Jadi hasil posting pada halaman browser akan tampak sebagai berikut:

Google.com adalah search engine ternama di dunia saingan Yahoo.com. Sudah begitu terkenalnya nama kedua penyedia portal dan search engine tersebut, yang berarti mereka berkualitas, Readmore >>>

Selamat mencoba :) happy blogging

Subscribe by Email

Follow Updates Articles from This Blog via Email

5 Comments

avatar

makasih gan infonya...setalah sekian lama..akhirnya bisa pake readmore..pdhl udah brp kali mencoba gagal terus.
salam sukses

Reply Delete
avatar

wah, manteb gan..? aku yang tau itu readmore di wordpress doank :D makasih yah ;)

Reply Delete
avatar

makasiii infonya~
awalnya saya bingung banget soalnya kalo gak pake "Read more" jadi panjang banget kayak ular ... :3

Reply Delete