Thursday, June 9, 2011

Membuat “Read More” atau “Baca Selengkapnya” pada postingan blog

Saat pertama kali membuat blog saya sempat bingung juga ketika pertama kali buka halaman blog, semua data yang saya publish diblog muncul semua dan itu juga menyebabkan halamannya jadi panjang dan loadingnya jg lumayan lama.

Akhirnya saya terpikir bagaimana caranya untuk menampilkan cuma sebagian data aja yang ditampilkan kemudian tinggal klik link "Read More..." untuk bisa melihat semua data biar lebih simple gitu.., kemudian saya cari-cari di google akhirnya ketemu juga caranya. berikut ini langkah-langkahnya:

  • Login ke blogger.com, pilih blog yang pengen kamu edit, klik link Layout kemudian masuk ke Edit HTML
  • Untuk bisa ngedit template secara keseluruhan, kamu harus centang/tandai/aktifkan Expand Widget Templates
  • Masukkan kode berikut sebelum tag </head> atau tepat sesudah kode } ]]></b:skin> seperti ini:
     <style>
      <b:if cond='data:blog.pageType == "item"'>
         span.fullpost {display:inline;}
      <b:else/>
         span.fullpost {display:none;}
      </b:if>
      </style>


  • Selanjutnya mengatur supaya postingan terpotong, cari kode <data:post.body/> dalam template kamu dan tambahkan kode berikut tepat dibawahnya:
      <b:if cond='data:blog.pageType != "item"'>
      <a expr:href='data:post.url'> Read More..</a>
      </b:if>


  • Nah supaya terpotong, setiap kali kamu posting, klik pada bagian posting dimana kamu pengen tulisan Read More.. muncul, dan ketik <span class="fullpost"> sisa postingan sampai selesai </span>. Untuk menambahkan kode ini, ketika posting kamu harus dalam mode Edit HTML bukan Compose
Contoh penulisan posting:

Ini adalah awal berita yang ingin saya potong karena terlalu panjang kalo postingan muncul semua, oleh karena itu saya perlu memotong berita sampai disini saja. <span class="fullpost"> Dan ini adalah sisa postingan saya yang akan saya sembunyikan dan hanya muncul pada saat post page atau link read more.. diklik </span>

Hasil akhir postingan akan seperti ini:

Ini adalah awal berita yang ingin saya potong karena terlalu panjang kalo postingan muncul semua, oleh karena itu saya perlu memotong berita sampai disini saja.Read more..

Selamat Mencoba!

0 comments:

Smile Icon



Drag this value into your comment box: =>

Post a Comment