Menyingkat Tulisan di Blogger Baru

Menyingkat tulisan di blog, maksudnya memberikan tanda "Read More..." Atau "Baca Selengkapnya..." atau cukup "Selengkapnya..." di bawah tulisan kita yang dipersingkat. Kenapa? Agar tulisan kita yang panjang tidak seluruhnya terpampang di blog hingga tampilan blog kita kurang indah. Saat Beta mulai ditinggalkan blogger.com dan berganti dengan account google, ada perbedaan dalam new template dan classic template. Jadi bagaimana membuat "Read More di Blogger yang baru? Saat ane pertama kali nyoba ngotak-ngatik file html agar "Read more" atau "Baca selanjutnya" tampil di bagian bawah postingan kita, ternyata malah membuat themes blog ane ancur-ancuran. Walau ane melakukannya atas petunjuk blogger senior seperti kolom mario dan Om Enda, tapi ko kenapa jadi begini pikir ane. Tentu saja bukan mereka yang salah tapi ane aja yg kurang memahami petunjuk mereka. Setelah beberapa kali gagal (mungkin ane agak sedikit telmi masalah html) hehe. Akhirnya berhasil juga. Ternyata ada satu pelajaran yang ane petik; membuat read more itu tidak serumit petunjuk para blogger senior. Dalam tulisan ini, ane coba mempersingkat petunjuk-petunjuk yang sebelumnya telah diberikan para blogger senior. (mudah2an aja emang singkat dan memperjelas bukannya semakin nambah bingung blogger pemula) Amien. Cara membuat "Read More" atau "Selengkapnya" di Blogger baru 1. Ok, pertama (setelah login) klik layout-template-edit HTML. Lalu beri tanda ceklis pada kotak kecil disebelah tulisan "Expand Widget Templates" Tunggu sebentar.2. Pada kotak Edit Template cari kode berikut: <div class='post-header-line-1'/> <div class='post-body'> <p><data:post.body/></p> <div style='clear: both;'/> <!-- clear for photos floats --> </div>Kode tersebut biasanya ada sedikit kebawah. (lihat gambar berikut)3. Kalo sudah ketemu; Tahap pertama(ada dua tahap nih) kita copy-paste kode berikut dibawah kode <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> Tahap kedua, copas kode berikut dibawah kode <p><data:post.body/></p> <a expr:href='data:post.url'>Read More/Selengkapnya......</a> </b:if> 4. Kalo petunjuk di atas sudah kita lakukan berarti hasilnya seperti ini: (Warna biru sebagai kode yang tadi di copas)

<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'>Read More/Selengkapnya...</a>
</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Atau lihat contoh gambar (mohon maaf kalo agak buram)5. Kalo sudah beres, JANGAN LUPA klik SAVE TEMPLATE. 6. Dari menu TEMPLATE kita pindah menu; klik Settings-Formatting. Dibagian bawah ada tulisan Post Template, isi kotak dipinggirnya dengan kode berikut: <span class="fullpost"> </span> Klik SAVE. 7. Terakhir, setiap akan mempostkan tulisan klik Edit Html dan sisipkan kode berikut: <span class="fullpost"> di atas tulisan yang akan kita sembunyikan atau dibawah paragraf tulisan yang kita tampilkan, dan </span> diakhir tulisan. 8. At last but not list, untuk mengedit tulisan yang sudah ada dan pengen menggunakan read more, caranya: a. Klik menu EDIT POSTS b. Klik EDIT di artikel yg akan diedit. c. Pasang kode <span class="fullpost"> di bawah paragraf yg akan ditampilkan. Dan pasang kode</span> di akhir artikel. Beres sudah... Selamat mencoba n' Selamat nge-Blog...! Sumber: Kolom Mario, Enda Blog, dll

Related Post: