Cara Membuat Read More Cantik di Blog

Monday 14 December 2015

Cara Membuat Read More Cantik di Blog - Tahukan read more? Beberapa kali ada yang tanya sama saya gimana sih cara modifikasi read more di blogspot biar cantik? Jadi, kalau kalian ada yang belum tahu read more/ baca selanjutnya itu apa, simple-nya gini aja deh. Coba menuju ke HOME saya, terus lihat setiap artikel saya pasti di bawahnya ada tulisan READ MORE dan ketika kalian klik pasti akan muncul artikel postingan secara lengkap. Sudah?

Nah, kalau sudah yuk mari kita percantik read more tersebut dengan gambar yang kita mau. Caranya? Gampang banget! Ikuti step by step berikut ini yuk!

Sebenarnya kalau tidak dimodifikasi pun bisa, tapi biasanya cuma berbentuk tulisan (baca selanjutnya/ read more) seperti font default postingan kita saja. Gak cantik kan? Kan ceritanya kita mau mempercantik blog biar tambah kece badai ihihihi...Yuk akh langsung saja!

Oiya, cara yang saya pakai selalu manual ya. Yang berarti saya selalu meletakkan read more tersebut sesuka hati saya, mau diletakkan setelah 1 paragraf, 2 paragraf ataupun 5 paragraf. Suka-sukalah pokoknya.

1. Hal pertama yang harus kamu perhatikan adalah compose terlebih dahulu apa yang mau kamu tulis. Kemudian pastikan pada bagian atau pada paragraf berapa kamu akan memotongnya. Coba lihat gambar dibawah ini!

Nah, dari gambar di atas bisa dilihat ada icon seperti kertas yang tersobek? Klik icon tersebut di akhir kalimat pada paragraf yang akan di potong atau ditampilkan di halaman home. Setelah kamu klik pasti akan muncul garis putus-putus seperti gambar di atas. Itulah yang menandakan batas tulisan kamu yang akan ditampilkan di halaman home.

2. Selanjutnya menuju ke menu Template, sebelum kamu melakukan perubahan kode alangkah baiknya lakukan backup terlebih dahulu. Dengan cara klik Backup/ Restore di sebelah kanan atas. Sudah? Kalau sudah klik Edit HTML.

3. Di dalam box HTML tekan Ctrl + F pada keyboard kemudian ketik jump-link dan cari kode seperti dibawah ini.

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'>
<data:post.jumpText/>
</a>
</div>
</b:if>

Kemudian ubah jadi seperti ini:

<b:if cond='data:post.hasJumpLink'>

</a>

</div>

</b:if>

Ubah "DIRECT IMG URL" dengan link dari gambar yang kamu inginkan.

4. Klik Save Template. Dan read more blog kamu pun sudah terlihat cantik bukan?

Nah, khusus bagi kamu pembaca setia blog saya. Nih saya kasih icon read more untuk mempercantik blog kamu. Kalau icon-nya masih kurang cantik bisa dipercantik atau dibuat sendiri ya :P.

Oiya, cara mudah untuk mendapatkan URL dari icon di atas adalah dengan cara meng-klik salah satu icon read more yang kamu sukai kemudian copy link URL-nya. Berikut contohnya:

Lihat bagian yang saya kasih kotak warna merah, copy link tersebut dan pastekan pada bagian "DIRECT IMG URL". Contoh :

<b:if cond='data:post.hasJumpLink'>

</a>

</div>

</b:if>

Gimana? Sudah jelas?
Kalau belum silakan tanyakan melalui kolom komentar ya.

Semoga tutorial kali ini bisa membantu kamu dalam mempercantik blog. Happy Blogging!

Baca lebih banyak postingan seperti ini, di BLOGGING TIPS.