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?
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 :
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.
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>
<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'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'>
<img src='DIRECT IMG URL' />
</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'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj66_T-MPFcKLTTI9TDhV7bMT1ur69qS4-Dkz6uvRw0PZeGEpEkWu56XsCn6A-X7cQmgsb40dSHdBnzLiAphxOTQZduxnZA29KsBDte6USrUaC3ap6HsCPGXUI7khNMm91AE3mWm9FscIk/s1600/read+more+10.png' />
</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.
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon