Cara Buat Read More di Blogger Baru

Oleh fatihsyuhud.com
[Update: tutorial ini sudah dilengkapi gambar / screenshot untuk lebih memudahkan) Sudah banyak yg tanya cara buat READ MORE atau Baca Selengkapnya atau Baca Selanjutnya di blogger beta / baru (untuk tutorial buat read more di blogspot / blogger template lama atau classic lihat di sini) dan sudah saya beritahu alamatnya. Tapi tampaknya sebagian agak kesulitan dg tutorial bahasa Inggris. Untuk Anda yg termasuk golongan ini, saya persilahkan mengikuti panduan berikut.

Ada dua cara untuk membuat read more di blogger / blogspot baru (tanda Blogger Baru adalah di admin memakai layout / tata letak dan page element / elemen halaman).

Cara Pertama:

1. Buka template -> Edit HTML -> Kasih tanda tik pada menu “expand widget tempate” (lihat gambar 1)
2. Letakkan kode berikut persis di atasnya kode </head> (lihat gambar 2)

<style>
<b:if cond='data:blog.pageType == "item"'>
  span.fullpost {display:inline;}
<b:else/>
 span.fullpost {display:none;}
</b:if>
</style>

3. Letakkan kode berikut di bawah kode

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

(lihat gambar 3)

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'> Read More..</a>
</b:if>

4. Klik Simpan. Selesai.
5. Klik SETTINGS atau Pengaturan, terus klik FORMATTING atau Format. Di paling bawah ada kotak kosong di samping menu TEMPLATE POSTING. Isi kotak kosong tsb dg kode berikut:

<span class="fullpost">

</span>

Jangan lupa klik SIMPAN PENGATURAN.

Gambar 1:

cara buat read more gambar 1

Gambar 2:

cara buat read more gambar 2

Gambar 3:

cara buat read more gambar 3

Cara Memposting

Ketika memposting, klik EDIT HTML (bukan COMPOSE). Maka, secara otomatis akan tampak kode

<span class="fullpost">
</span>

Letakkan posting yg akan ditampilkan di halaman muka di atas kode sementara sisanya (yakni keseluruhan entry/artikel), letakkan di antara kode

<span class="fullpost">

dan

</span>

Masalah yang Sering Dihadapi

1. Saat mengklik “Simpan Perubahan” kita sering mendapat pesan demikian:

XML error message: The element type “style” must be terminated by the matching end-tag “”.

Jangan panik. Itu artinya tanda petik / kutip buka tutup (quote/unquote) yakni tanda ‘ dalam kode tidak cocok dengan font template. Yang perlu dilakukan adalah buang tanda kutip [‘] itu dan kasih tanda kutip yang baru di tempat yang sama. Dan coba klik lagi SIMPAN.

2. Anda sudah berhasil memasang seluruh kode di atas, tetapi ‘read more’ gak berhasil; posting tetap panjang? Dan tulisan ‘read more’ nongol di bagian bawah artikel? Tenang. Ikuti solusi berikut: klik “Pengaturan” -> klik “Format” -> buang/delete semua tanda kutip buka/tutup (quote/unquote) di “fullpost” dan ganti dengan tanda kutip yang baru. Jangan lupa klik “Simpan”.
Selesai. Selamat ngeblog di blogger / blogspot dengan READ MORE.

Apabila Anda berhasil melakukan cara bikin READ MORE di atas tak perlu lagi mencoba cara di bawah. Cara di bawah cuma sebagai alternatif dan agak lebih rumit di banding cara yang di atas.

Cara Kedua:

1. Buka template –> edit HTML
2. Kasih tanda tik/cek menu “expand widget template”
3. Cari kode berikut di TEMPLATE blog Anda:


4. Kalau sudah ketemu, letakkan kode berikut DI BAWAH kode html di atas:



.fullpost{display:inline;}

.fullpost{display:none;}

5. Di Bawah kode di atas ada kode html sbb:


6. Nah, di antara kode

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

dan kode

pasang kode html ini:


<a expr:href='data:post.url'>Read More .. </a>
</b:if> 

7. Jadi, susunan kode html di template setelah ditambah dg kode READ MORE akan menjadi seperti ini (yg warna biru adalah kode tambahan untuk READ MORE, sedang kode warna hitam adalah kode asli template):

.fullpost{display:inline;}

.fullpost{display:none;}

Read More......

Klik Simpan Template. Selesai.

8. Klik SETTINGS atau Pengaturan, terus klik FORMATTING atau Format. Di paling bawah ada kotak kosong di samping menu TEMPLATE POSTING. Isi kotak kosong tsb dg kode berikut:


<span class="fullpost">

</span>

Jangan lupa klik SIMPAN PENGATURAN.

Cara Memposting

Ketika memposting, klik EDIT HTML. Maka, secara otomatis akan tampak kode


<span class="fullpost">
</span>

Letakkan posting yg akan ditampilkan di halaman muka di atas kode sementara sisanya (yakni keseluruhan entry), letakkan di antara kode


<span class="fullpost">

dan

</span>

Catatan Penting:

(A) Artikel yg diposting sebelum pemasangan kode READ MORE di atas akan tetap tampil penuh di halaman muka, Anda bisa mengeditnya dg cara sbb:

1. Klik menu EDIT POSTS
2. Klik EDIT di artikel yg akan diedit.
3. Pasang kode

<span class="fullpost">
 

di bawah paragraf yg akan ditampilkan. Dan pasang kode

</span>
 

di akhir artikel.

Ingat hanya ada SATU kode

 <span class="fullpost">

dan

</span> 

. Apabila terdapat lebih dari satu, dan biasanya numpuk di bagian paling bawah artikel, maka dibuang saja.

Masalah yang Sering Dihadapi

1. Saat mengklik “Simpan Perubahan” kita sering mendapat pesan demikian:

XML error message: The element type “style” must be terminated by the matching end-tag “”.

Jangan panik. Itu artinya tanda petik / kutip buka tutup (quote/unquote) yakni tanda ‘ dalam kode tidak cocok dengan font template. Yang perlu dilakukan adalah buang tanda kutip [‘] itu dan kasih tanda kutip yang baru di tempat yang sama. Dan coba klik lagi SIMPAN.

2. Anda sudah berhasil memasang seluruh kode di atas, tetapi ‘read more’ gak berhasil; posting tetap panjang? Solusi: klik “Pengaturan” -> klik “Format” -> buang semua tanda kutip buka/tutup di “fullpost” dan ganti dengan tanda kutip yang baru.  Jangan lupa klik “Simpan”.

Perhatian:

Kalau Anda masih gagal juga dengan tutorial di atas, silahkan download tutorial versi text di bawah ini.
Cara buat read more blogger blogspot baru

Tutorial Blogger.com / Blogspot

336 tanggapan untuk “Cara Buat Read More di Blogger Baru

  1. Assalam,..
    Pak saya mau tanya,.saya sudah mencoba scrypt read more yang bapak posting, tetapi knapa kq read morenya g’ muncul..padahal dan nya udah ada..
    Thx..

    Suka

  2. saya udah coba semua saran Bang Fatih.. Tapi kok di Blog
    Saya ga keluar Read More nya.. Tolong Petunjuknya Bang Fatih
    ,saya masih Pemula..Dan Blog saya Berantakan Abiz..Tolongin Dunk Bang Fatih. TerimaKasih Bang.

    Suka

  3. Terimakasih Mas Fatih…

    Awalnya read more saya sudah ada, tetapi setelah masukin kode ini jadi dua…lalu saya coba del tetapi tidak bisa…

    Lalu saya iseng saja tidak memasukkan kode ketiga (saya pakai cara pertama)

    lalu saya coba edit postingan memakai kode diatas ternyata sudah bisa langsung…terimakasih anyway…

    ganbatte

    Suka

  4. lapor mas, ga sengaja kemarin aku liat blog-ku lewat IE. ternyata read morenya ga mau jalan. ada sih tulisan read more, tapi nangkringnya di akhir artikel. ga di tempat yang semestinya. kalo di browser yang lain, read more jalan kayak semestinya. cuman di IE aja dia mallfunction. gimana cara mas biar dia jalan seperti semestinya?

    Suka

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout /  Ubah )

Foto Google

You are commenting using your Google account. Logout /  Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout /  Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout /  Ubah )

Connecting to %s