Tuesday, June 23, 2009

Membuat Link "Read More" pada Posting

Dengan trik ini, anda bisa menampilkan beberapa kalimat/bagian yang anda inginkan pada tiap posting yang anda buat di halaman awal blog anda. Agar memudahkan pembaca untuk memilih posting yang anda buat dan membaca keseluruhan dari posting tersebut. Catatan, anda harus mengaktifkan "post pages" (lihat gambar.1) agar script ini bisa bekerja.
Untuk mengaktifkan "post pages", masuk Dashboard lalu pilih Settings | Archiving:
Gambar.1
kemudian, set Enable Post Pages menjadi Yes:
Enable Post Pages
Klik Save Settings dibagian bawah halaman.
Setelah itu anda lakukan tiga langkah agar script CSSnya bisa bekerja yaitu: kode CSS, sebuah link "read more" pada tiap posting, dan sebuah modifikasi pada posting yang akan ditampilkan. Mari kita lakukan langkah demi langkah.

Kode script CSS
.

Kita menggunakan kode script CSS ini agar posting yang ditampilkan berubah di tiap halaman. Copy/paste kode di bawah ini pada bagian CSS template anda. (Sebelum melakukannya, pastikan 'Expand Widget Templates' sudah anda pilih/contreng :


(Untuk template classic)

<MainOrArchivePage>

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

<ItemPage>
span.fullpost {display:inline;}
</ItemPage>
(Untuk layouts)

<b:if cond='data:blog.pageType == "item"'>

span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
Kode CSS(style sheet) biasanya terletak pada bagian atas template, dan letakan kode diatas diantara kode <style> dan </style>.

Kita definisikan kode tersebut menjadi kelas "fullpost" yang akan tampil hanya di halaman yang diposting (permalinks). Bagian dari tiap posting menggunakan kelas tersebut, kita lihat selanjutnya.

Link "Read More"

Copy/paste pada template anda kode di bawah ini, diantara kode <$BlogItemBody$> atau <data:post.body/> :

(Untuk template classic)

<MainOrArchivePage><br />

<a href="<$BlogItemPermalinkURL$>">Read more!</a>
</MainOrArchivePage>
(Untuk layouts)

<b:if cond='data:blog.pageType != "item"'><br />

<a expr:href='data:post.url'>Read more!</a>
</b:if>
Link ini hanya akan tampil pada halaman awal dan halaman archive, dan akan mengalihkan pembaca anda pada halaman yang akan menampilkan penuh posting anda. Anda dapat merubah tulisan "Read more!" menjadi yang anda inginkan.

Jangan lupa menyimpan yang sudah anda lakukan dengan menekan tombol "Save Template"

Modifikasi pada Posting

Langkah terakhir yaitu sedikit perubahan kode pada posting yang akan anda tampilkan. Tiap posting yang akan ditampilkan akan menggunakan kode ini <span class="fullpost"></span>

Untuk mempermudah, anda bisa memasukan kode tersebut sebagai template posting, agar tidak susah atau lupa menulisnya pada saat posting. Contoh penggunaan kode:

...ini adalah posting awal anda.....<span class="fullpost">....dan ini adalah posting penuh halaman anda.....</span>

Sekarang, jika pembaca mengunjungi blog anda, posting akan tampil seperti di bawah ini :

...ini adalah posting awal anda......
Read more!
Ketika link "Read more!" ditekan, pembaca akan ditujukan langsung ke halaman dimana pembaca bisa melihat isi keseluruhan dari posting anda.

Selamat mencoba!.

0 komentar:

 

Tanztj's Weblog