Rabu, 16 Mei 2012

Blogger: Read More

Apakah kamu pernah melihat blog yang mempunyai postingan yang sangat panjang di halaman awal? Apakah blog tersebut terlihat menarik? Pastinya tidak, maka dari itu ada satu hal yang dapat dilakukan untuk menyiasati hal tersebut yaitu dengan memotong postingannya<Read More...>. Ada dua cara yang dapat dilakukan untuk membuat Read More, yaitu secara "manual" maupun secara "otomatis". Walaupun lebih banyak orang yang memilih "Read More" otomatis, namun saya akan menjelaskan juga cara membuat "Read More" manualnya.

  • Read More Manual.
1. Masuk ke Account Blogger-mu.
2. Masuk ke halaman Edit HTML, Template > Edit HTML.
3. Sebelum mengutak-atik isi Edit HTML, klik "Download Template Lengkap". Kamu perlu memback-up Blog kamu karena siapa tahu terjadi hal yang tidak diinginkan pada blogmu.



4. Kalau Templatemu sudah terdownload, sekarang saatnya untuk membuat postingan mu terpotong. Centang "Expand Template Widget" yang berada tepat di atas box berisi kode template. Setelah mencentang, tuggu beberapa saat..
Tujuan mencentangnya agar semua komponen dikode template terlihat dan memudahkan untuk mengedit nantinya.
5. Cari kode di bawah ini:
<p><data:post.body/></p>
Atau
<data:post.body/>

Untuk memudahkan, coba tekan CTRL+F lalu masukkan kode diatas. Kalau sudah ketemu kode di atas, ganti kode tersebut dengan kode berikut ini:

<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/>
<a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p> 
</b:if>


Kalau sudah menganti kodenya, coba simpan . Apakah berhasil? Kalau belum berhasil berarti ada yang salah. Sebaiknya coba lagi dari awal. Tanda apabila berhasil yaitu tidak ada peringatan apapun setelah kamu klik tombol SIMPAN TEMPLATE.

Sekarang saatnya membuat postingan terpotong. Alurnya, klik "Buat Entri Baru" > pilih HTML.


Pada kotak terlihat kode: <span class="fullpost"> </span>. Kode tersebut adalah kode yang digunakan untuk memotong postingan. Nah cara penggunaanya sebagai berikut:

Letakkan kode <span class="fullpost"> pada postingan yang ingin dipotong.

Letakkan kode </span> pada bagian akhir postingan.

Setelah itu klik "Publikasikan".. Lihat, sekarang postinganmu berhasil terpotong.

Tanda panah menunjukkan tulisan Selengkapnya yang memotong postinganmu. Klik saja, maka sisa postinganmu akan terlihat.

Nah nah nah, tambahan lagi yaitu untuk mengganti "Baca Selengkapnya" menjadi "Baca Selengkapnya + Judul Postinganmu" dengan cara mengganti kode yang ada pada readmore sebelumnya:

<a expr:href='data:post.url'><strong>Selengkapnya...</strong></a>

ganti dengan kode berikut:
<strong><a expr:href='data:post.url'> Baca Selengkapnya    &#8220;<data:post.title/>&#8221; &#160;&#187;&#187; </a></strong> 

Kemudian Simpan Template dan lihat hasilnya. Bagaimana? Kerenkan? Kamu telah berhasil membuat postinganmu terpotong disertai dengan judul postinganmu.

  • Read More Otomatis
Membuat read more otomatis jauh lebih mudah jika dibangdingkan dengan readmore manual. Berikut langkah-langkahnya:
1. Buat postingan baru dan kamu akan menemukan "icon" read more yaitu "Insert Jump Break" pada menu postingan.

2. Cara memakainya sangat gampang yaitu dengan menekan icon "Insert Jump Break" sebelum kalimat yang akan disembunyikan. Setelah di klik akan muncul sebuah garis yang menandakan batasan/potongan kalimat yang terlihat dan yang tidak terlihat seperti gambar tersebut.

3. Setelah itu klik Publikasikan dan lihat blogmu sekarang.. Postingan mu akan terpotong sesuai dengan garis readmore yang tadi kamu gunakan.


Sedikit tambahan: 
Terkadang kamu menginginkan kalimat pemotong bukan hanya "read more" atau "Selengkapnya" ataupun yang lainnya. Cara mengubahnya yaitu sebagai berikut:
1. Masuk Ke Tata Letak
2. Klik Edit pada kolom Postingan Blog seperti yang ditunjukkan pada gambar,

3. Sesaat kemudian akan muncul pengaturan postingan. Di sinilah kamu dapat menganti "read more" menjadi kalimat yang kamu inginkan. Isikan kata yang inign kamu pakai pada form yang ditunjukkan oleh tanda panah.

Oke? Silakan menganti sesuai dengan kalimat yang kamu inginkan, sekarang blog kamu terlihat lebih menarik dengan adanya read more

"Nantikan berbagai tips dan trik blog menarik lainnya hanya di blogger-sharearea.blogspot.com"

2 komentar:

Unknown mengatakan...

mantap

Unknown mengatakan...

Terima kasih komentarnya :D

Posting Komentar

Budayakan kebiasaan memberi komentar setelah membaca demi kemajuan "Blogger-sharearea.blogspot.com".. ^^~