Kita bisa manambahkan Expandable Post Summaries yang disertai link "Read More!" atau "Baca Selanjutnya!" di artikel yang hanya ditampilkan sebagian.
Klik di sini membawa Anda ke AndresTutorialBlog.blogspot.com
Dengan fitur ini kita bisa menampilkan potongan artikel yang kita suka dari awal tiap posting. Jika pembaca ingin membaca lebih lanjut, tinggal klik link "Read More!" untuk melihat posting secara keseluruhan.
Ini bermanfaat jika kita banyak menulis artikel-artikel panjang di satu halaman.
Sebelumnya, pastikan post pages diset ke Yes agar fitur ini berfungsi. Jangan lupa klik Save Settings.
Ada tiga bagian dalam fitur ini:
- conditional CSS
- link "Read More!" atau "Baca Selanjutnya" untuk setiap posting
- dan modifikasi untuk posting yang memakai fitur ini.
1. Conditional CSS
Kita akan memakai conditional tag untuk mengubah cara posting ditampilkan di halaman yang berbeda. Tambahkan kode berikut ini ke style sheet. (Pastikan untuk klik dan check Expand Widget Templates sebelum mengubah kode HTML Anda.)
- Jika memakai classic templates, gunakan yang ini.
<MainOrArchivePage>
span.fullpost {display:none;}
</MainOrArchivePage>
<ItemPage>
span.fullpost {display:inline;}
</ItemPage>
- Jika memakai layouts, gunakan yang ini.
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
Style sheet biasanya letaknya di awal template, antara tag
<style> dan </style>. Jika style sheet Anda berada di file terpisah, kode ini masih harus ditambahkan di template supaya conditional tags bisa berfungsi. Pastikan meletakkan di antara dua tag <style>.Di sini kita mendefinisikan sebuah class yang disebut "fullpost" yang hanya muncul pada halaman posting (permalinks). Bagian dari tiap posting akan menggunakan class ini, seperti berikut.
2. Links "Read More!" atau "Baca Selanjutnya!"
Tambahkan kode berikut ke template, letaknya setelah tag
<$BlogItemBody$> atau tag <data:post.body/> :- untuk classic templates
<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 muncul di halaman utama dan halaman arsip, dan link ini akan mengarahkan pembaca posting ke halaman posting yang memiliki keseluruhan teks dari posting Anda. Teks "Read more!" bisa diganti dengan teks apapun yang Anda suka.
3. Modifikasi Posting
Bagian terakhir adalah kode untuk posting asli. Setiap post yang Anda inginkan ada fitur ini harus memakai kode berikut ini:
<span class="fullpost"></span>Kode ini sebenarnya bisa ditempatkan di post template, jika Anda tidak mau mengetiknya setiap kali posting artikel baru. Anda akan memasukkan ringkasan teks di luar tag span dan sisanya didalam, seperti ini:
Ini bagian awal posting saya. <span class="fullpost">Dan ini sisanya.</span>Nantinya posting akan terlihat seperti ini:
Ini bagian awal posting saya.
Read more!
Jika pembaca klik link Read More!, pembaca akan diarahkan ke halaman posting yang berisi posting secara keseluruhan:
Ini bagian awal posting saya. Dan ini sisanya.
Penting:
- Sebelum memodifikasi template, pastikan membuat backup copy dari template. Copy-paste semua kode HTML Anda ke text file menggunakan Notepad ke hard disk. Jika Anda melakukan kesalahan saat memodifikasi template, gunakan lagi copy template di hard disk.
0 comments