Bagi para blogger berbasis blogspot, sampai hari ini mungkin agak kesusahan untuk membuat tampilan berita / news yang panjang secara efisien. Masalahnya secara default, blogger akan menampilkan seluruh teks berita yang diposting. Coba bayangkan kalo kita posting 5 berita saja yang cukup panjang, trus kita mau melihat berita yang ke-5 ato yang paling bawah, waduh... musti bersusah payah men-scroll layar nya ber x xx nih. .....
Trus pengunjung tentu lama-lama jadi sebel, bahkan kita dicap sebagai blogger yang kurang prof... ya ..ga?
Gimana cara menampilkan sebagian kecil berita (beberapa baris teratas) kemudian disusul dengan teks "Read More" atau "lanjut" atau apalah (that up to you. hehehehehehe) yang penting terlihat ringkas dan enak buat surfing berita. Baru setelah pengunjung tertarik pengin baca berita lebih lanjut, dia tinggal klik aja tuh teks "Read More" or "Lanjut" tadi. Bagi para surfer di internet pasti cara yang diuraikan tadi bukan sesuatu yang asing ya..khan..
A. MEMASANG KODE PADA TEMPLATE
Ga usah kebanyakan basa-basi yah... kita langsung saja ke permasalahan "Cara menambahkan Read More" dalam artikel berbasis Blogspot.
1. Buka template klik link: Layout-> Edit HTML -> Kasih tanda cek pada CheckBox "expand widget tempate"
2. Letakkan kode berikut PERSIS di ATAS nya kode </head>
(Pengin cepat, gunakan fasilitas Find pada browser kamu).
<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
3. Klo sudah, cari kode berikut:
<p><data:post.body/></p>
(kalo ga ada, cari aja kode: <data:post.body/>-tanpa embel-embel:<p> maupun </p>)
Letakan kode berikut persis di bawahnya:
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'> Read More..</a>
</b:if>
4. Klik Simpan. Selesai.
5. Pergilah ke halaman SETTING, dengan klik link SETTINGS atau Pengaturan, terus klik FORMATTINGatau Format. Di paling bawah ada kotak kosong di samping menu TEMPLATE POSTING. Tengoklah apakah sudah ada isi kode berikut. Jika belum isi saja kodenya secara manual. Kode dimaksud adalah ini nih....:
<span class="fullpost">
</span>
Trus, jangan lupa simpan hasil SETTING atao PENGATURAN-mu.
wa... melelahkan ya..? eit jangan khawatir, langkah-langkah tadi cukup kamu lakukan SEKALI SEUMUR HIDUP..... :-) :-), kecuali kalo kamu mao ganti template, langkah tadi ya kamu ulangi lagi.... Makanya jangan keseringan gonta-ganti template ya...
Nah... sekarang gimana cara menggunakannya??
Klo yang ini musti kamu lakukan setiap kali kamu posting berita. Tapi kodenya cuma dikit kok, dan kamu bisa lakukan dengan teknik copy-paste.
B. PENERAPAN / PENGGUNAAN
Langsung aja ke contoh ya...
Misal berita posting kamu ASLI nya begini: (tanpa tanda kutip)
"Sebagai bloger atau webmaster, jika ingin memasukkan gambar ke blog/web, kita harus memilih tipe gambar yang akan kita pakai, apakah JPG, GIF, atau PNG. Jikaformat yang dipilih tidak sesuai dengan jenis gambarnya, gambar tersebut ukurannya akan lebih besar daripada yang semestinya, dan menyebabkan waktu loading blog/website kita lebih lama. Padahal, pengunjung suka terhadap blog atau web yang loadingnya cepat dan tidak boros bandwidth. Untuk itu, kita harus mengusahakan agar gambar-gambar dalam blog atau website kita memiliki ukuran sekecil mungkin. Caranya bagaimana?"
Trus kalo kamu tambahi SEDIKIT KODE -lihat yang diberi warna kuning- dalam Modus Edit Html BUKANCompose menjadi begini: (tanpa tanda kutip)
"Sebagai bloger atau webmaster, jika ingin memasukkan gambar ke blog/web, kita harus memilih tipe gambar yang akan kita pakai, apakah JPG, GIF, atau PNG. Jikaformat yang dipilih tidak sesuai dengan jenis gambarnya, gambar tersebut ukurannya akan lebih besar daripada yang semestinya, dan <span class="fullpost">menyebabkan waktu loading blog/website kita lebih lama. Padahal, pengunjung suka terhadap blog atau web yang loadingnya cepat dan tidak boros bandwidth. Untuk itu, kita harus mengusahakan agar gambar-gambar dalam blog atau website kita memiliki ukuran sekecil mungkin. Caranya bagaimana?</span>"
Maka hasil di posting kamu kira-kira akan jadi gini nih....: (tentunya tanpa tanda kutip)
"Sebagai bloger atau webmaster, jika ingin memasukkan gambar ke blog/web, kita harus memilih tipe gambar yang akan kita pakai, apakah JPG, GIF, atau PNG. Jikaformat yang dipilih tidak sesuai dengan jenis gambarnya, gambar tersebut ukurannya akan lebih besar daripada yang semestinya, dan ........ Read more"
Lalu teks:
"menyebabkan waktu loading blog ...."
akan disembunyikan......
Nah... keren dan ringkas kan...
Catatan:
- kode <span class="fullpost"> diletakkan di posisi di mana berita posting kamu akan dipotong (=tempat meletakkan teks "Read More")
- kode: </span> HARUS diletakkan di-AKHIR berita / posting.
SELAMAT MENCOBA....
