Membuat Read More pada Blogspot

Akhirnya setelah kurang lebih 3 bulan mengalami ke-vacuum-an dalam dunia blogging, kali ini Setetes Embun dapat kembali ke situs Blogger dengan membawa sedikit bahan untuk di-sharing-kan kepada rekan-rekan Embun semuanya. Baiklah, tanpa berlama-lama lagi, kali ini Embun akan berbagi mengenai tutorial customize blog yakni tentang cara Membuat Read More pada Blogspot alias Blogger. Trik ini juga biasa dikenal dalam dunia blogging sebagai Trik Membuat Menu Selengkapnya pada Blog.

Langsung saja, untuk membuat Read More pada Blog silakan ikuti langkah-langkah berikut :

Tahap Pengaturan

1. Login ke account Blogger Anda


2. Klik Tata Letak lalu Edit HTML


3. Pada Edit HTML, centang kotak bertuliskan Expand Template Widget yang ada pada pojok kanan atas


4. Cari kode berikut ini :
   <div class='post-body'>


5. Copy (salin) kode berikut ini dan Paste (letakkan) tepat di bawah kode di atas :
   <b:if cond='data:blog.pageType == "item"'>
   <style>.fullpost{display:inline;}</style>
   <p><data:post.body/></p>
   <b:else/>
   <style>.fullpost{display:none;}</style>


6. Lihat ke bagian bawah dan cari kode lagi yang mirip seperti ini :
   <p><data:post.body/></p>


7. Copy kode berikut ini dan Letakkan tepat di bawah kode di atas :
   <a expr:href='data:post.url'>Read more.....</a>
   </b:if>


8. Setelah selesai maka keseluruhan kode akan terlihat seperti di bawah ini :
   <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.....</a>
   </b:if>
   <div style='clear: both;'/> <!-- clear for photos floats -->
   </div>
   

   NB:warna biru menunjukkan kode awal yang ada pada Blogger, sedangkan warna merah menunjukkan kode hasil tambahan modifikasi yang kita lakukan.



9. Jika Anda ingin mengganti tulisan Read More..... dengan tulisan lain semisal Selengkapnya... seperti pada blog Setetes Embun, silakan rekan-rekan mengganti kode warna hijau sesuai dengan keinginan rekan-rekan.

Tahap Penggunaan
Cara Penggunaan dari menu read more yang telah kita buat tadi adalah dengan cara meletakkan kode HTML di antara tulisan artikel yang tidak ingin kita tampilkan di halaman utama. Kode yang digunakan adalah :
<span class="fullpost">

</span>

Penggunaanya adalah ketika Anda menulis artikel baru pada blog, letakkanlah tulisan yang tidak ingin Anda tampilkan di antara kode di atas. Semisal Anda ingin menulis Artikel :

Hari ini adalah hari yang indah. Di hari yang indah ini aku ingin menghabiskan waktuku untuk jalan-jalan dan keliling kota. Selain itu, aku juga ingin berkunjung ke Setetes Embun.

Jika Anda hanya ingin menampilkan kalimat pertama di halaman awal, dan kalimat-kalimat selanjutnya bisa di baca ketika pengunjung meng-klik Read More..... maka penulisan artikel tersebut adalah sebagai berikut :

Hari ini adalah hari yang indah.
<span class="fullpost">
Di hari yang indah ini aku ingin menghabiskan waktuku untuk jalan-jalan dan keliling kota. Selain itu, aku juga ingin berkunjung ke Setetes Embun.
</span>

Dengan meletakkan tulisan yang tidak ingin Anda tampilkan pada halaman awal di antara kode HTML
<span class="fullpost">

</span>
maka Anda telah mendapatkan artikel bergaya Read More alias Selengkapnya.

Perlu Anda perhatikan bahwa pada intinya, Tahap Pengaturan hanya dilakukan sekali saja. Sedangkan Tahap Penggunaan harus Anda lakukan setiap kali Anda membuat artikel baru. Yang perlu diperhatikan lagi adalah ketika membuat artikel baru, buatlah dengan Mode HTML dan bukan Mode Compose/Tulis.

Demikian posting mengenai sharing tutorial tentang Cara Membuat Read More pada Blog. Semoga bermanfaat dan selamat mencoba. Sampai Jumpa Lagi di posting selanjutnya.

Selengkapnya...