Tuesday, October 09, 2007

Menambah fasilitas Read More (Page Break) di Blogger

Salah satu kelemahan dari Blogger ialah tidak adanya secara otomatis fasilitas page break pada editornya. Padahal dengan fasilitas ini seorang blogger cukup menampilkan paragraf pertama dari tulisannya dan paragraf selanjutnya bisa dibaca saat user klik Read More or Complate Story. Akibatnya mau tidak mau pengguna blogspot harus menampilkan semua artikel di halaman utama. Imbasnya bila di halaman awal terdapat 10 artikel maka pengunjungpun juga harus membaca (setidaknya melihat) secara penuh 10 artikel tersebut. Bayangnya bila artikelnya panjang-panjang. Tentu saja kamu harus menscroll sampai kebawah untuk mendapatkan sebuah artikel yang menarik. Capek deh...

Namun jangan kuatir, dengan sedikit trik kamu juga bisa memasang fasilitas page break di blogger kamu. Ada beberapa langkah yang harus kamu ikuti. Sebelum mulai buka terlebih dulu bagian edit template di blogger kamu. Selain itu rumus ini akan disajikan dalam dua bentuk, satu untuk template klasik (classic templates) dan yang kedua untuk template layout. Pilih yang sesuai dengan template yang kamu gunakan.

1. CSS
Taruh script ini di bagian CSS. Bagian CSS ini terletak di bagian atas sebuah template. Inget lho ini dibagian edit template. Taruh bagian ini diantara kode <style> and </style>. Jika kode tersebut tidak ada maka tambahkan sendiri kode tersebut dan di dalamnya di isi kode di bawah ini. Ingat kode <style> terletak sebelum kode </head>

Bagian ini bertujuan membentuk class full post untuk memberikan page break pada postingan

Template Klasik

<MainOrArchivePage>
span.fullpost {display:none;}
</MainOrArchivePage>

<ItemPage>
span.fullpost {display:inline;}
</ItemPage>


Layouts

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



2. "Read More" Links

Masih di bagian edit template taruh kode ini setelah kode <$BlogItemBody$> atau <data:post.body/> Kamu bisa mengganti kata Read more! menjadi Selanjutnya! Lebih Lengkap! Complete! atau kata-kata lainnya yang menunjukkan terusan dari artikel yang kamu pasang. Bagian ini hanya akan muncul di halaman utama dan arsip

Template Klasik


<MainOrArchivePage><br />
<a href="<$BlogItemPermalinkURL$>">Read more!</a>
</MainOrArchivePage>


Layouts

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


3. Modifikasi Posting
Langkah terakhir yaitu memasukkan kode ini untuk setiap postingan

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

Isi posting yang diapit oleh kode tersebut hanya akan muncul jika orang mengklik read more atau membuka halaman postingan tersebut.

Sebagai contoh bila kamu menulis

Ini postingan saya Dan ini kelanjutannya.


Maka hasilnya ialah

Ini postingan saya

Read More.


Agar tidak lupa sebaiknya kode tersebut dipasang di post template sebagai kode default yang akan muncul di setiap postingan.

Kelemahan
Hanya saja, dengan cara ini kamu harus mengedit satu persatu postingan kamu dengan menambahkan kode <span class="fullpost"></span>. Mengapa? Karena secara otomatis blogger sekarang akan menambahkan fasilitas Read More di setiap postingan yang kamu buat, tidak peduli apakah postingan tersebut separuh atau sudah semuanya.

Kalau postingan kamu jumlahnya masih sedikit mungkin tidak masalah, bagaimana bila sudah banyak hehe.

Ingat
Backup dulu template kamu sebelum melakukan perubahan

4 comments:

  1. Makasih infonya semoga saya bisa menerapkannya di blogku

    ReplyDelete
  2. Halo salam kenal. aku bingung bikin read more sekarang dengan tips yang kamu berikan aku bisa menerapkan terima kasih ya?

    ReplyDelete
  3. Sudah berhasil tapi kenapa saat saya menulis postingan kok belum berhasil

    ReplyDelete
  4. HOREEE...! Aku berhasil! Terima kasih Pak Hardono! Saya berhasil membuat link "selengkapnya" sesuai tuntunan bapak.Maklumlah,saya blogger pemula yang masih perlu banyak belajar.Salam kenal dan sukses selalu! Thanx banget!

    ReplyDelete