Cara Mengubah 'Read More' Menjadi Icon (Plus Free Icon Read More)

Setelah kehebohan beberapa waktu yang lalu tentang menghilangnya ikon 'read more', saya jadi tertantang untuk bisa membuat ikon 'read more' sendiri. Dan belajar untuk mengubah read more menjadi image sendiri.  Awalnya hopeless main photoshop karena rasanya ko ribet, ya. Tapi, ketika ada 'musibah' itu,  jadinya terpaksa belajar dan ternyata menyenangkan juga walaupun belum sejago Annisa Steviani *kiss icha*.

Jika masih ada yang belum tahu cara memotong postingan, saya beri penjelasannya dulu, ya. Karena, ikon 'read more' ini bisa muncul kalau kita sudah menggunakan opsi pemotong postingan yang ada di deretan atas, ketika kita membuat blogpost. Ikonnya itu gambarnya kertas yang terpotong (jump break), seperti yang tandai ini.

Sering saya main di blog lain yang belum menggunakan opsi ini. Jadi, di beranda yang muncul full postingannya tanpa dipecah. Tidak semua blogger loh pengen baca semua postingan yang ada. Kalau saya sendiri biasanya lihat judulnya dulu, kalau menarik saya akan lanjutkan membaca kalaupun tidak menarik saya akan baca satu atau dua paragraf saja. Nah, inilah fungsi dari opsi jump break. Kita bisa meletakkan opsi ini setelah paragraf pertama. Jadi ketika ada yang tertarik melanjutkan membaca, tinggal klik opsi 'read more'.

Bagi yang belum pasang ikon jump break, silakan dipasang terlebih dulu. Caranya; arahkan kursor pada paragraf pertama atau kedua dari blogpost yang sudah dibuat. Lalu klik ikon jump break tadi. Maka hasilnya akan ada garis putus-putus seperti dibawah ini.

Langkah selanjutnya adalah memasang ikon 'read more'. Caranya:

1. Masuk ke dashboard > templete > Edit HTML > Format Templete.

2. Lalu, di dalam kotak HTML klik CTRL+F dan ketik jump-link. Kemudian, cari kode seperti dibawah ini:

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

3. Ubah <data:post.jumpText/> menjadi <img src='DIRECT IMG URL' />  seperti dibawah ini;

<b:if cond='data:post.hasJumpLink'> <div class='jump-link'> <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'> <img src='DIRECT IMG URL' /> </a> </div> </b:if>

4. Kemudian, DIRECT IMG URL diganti dengan URL dari image yang kita suka.

5. Save.

Sekarang, di tiap postingan akan muncul image 'read more' yang sudah kita pasang. Pastinya blog kita akan terlihat lebih cantik ya.

Nah kalau bingung mau pakai image apa, saya sudah menyiapkan ikon 'read more' yang bisa digunakan. Asli hasil utak-atik photoshop semalaman. Sangat sederhana, sih. Tapi semoga bisa membantu teman-teman. Jadi, nanti tinggal di copy URL yang ada di bawah gambarnya saja, ya. URL image ini sengaja saya buat lewat blogpost supaya lebih aman saja.

Silakan dipakai sesuai dengan warna blog atau sesuai selera saja. 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ8l-NlzF_A9rAsVFoFI_n4HfNNqNBAhshdkbrIyVB9loNd9crH-qJqYGN0zpvTQAMtCsAgC3yWw68BSm-Rr22SKZpaSSBtnkcnEt6rVE_cm_wX5I_5wZLAgqG-BmRNfShybR6k6W5PsM0/s1600/read+more+blue.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_mapvoMLUrRxPPvGIDwUCweVlzkCp2qwezDIdWpz_oixmrf8GyjU9dUzBXoevpg06YCZQuBNfAFSm8Xxc8w28VzGdCNNZy6-fiWnBzlEOA9z-H9oi17w4oBIh3OEZFqTydXbe0XoAt5nZ/s1600/read+more+pink.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikcb6wKyOMI3PvvCgc1XmTjEHGXs-hqh4UznYseorBUrG1Jhs08NPl9pqMNcWiESEyEIcQG0GvbyazKjCrEy5BuxIYH4n4VGkepvI8hie58Ma_pfZfWtbPxh_X3gbsbZNO8rHxDfvFoYr3/s1600/read+more+green.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje6A6qmxVgkwUROvPXprueUASPWHfx16SYxc6VElE2F1tAOSczhX4ckd81Cz1BdqeR2LXINQrLplUgeNL_Ce3Nl1ubO7Vw3CYaVRq-KXB8y55NeZJ4mbserhKSHnLdJ_3bMd-OmDuTCWrF/s1600/read+more+purple.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5QLH7Tc8ueAgi_LkDGSm186qhQwLJUMFpQgrP23BYE2blNLyAM9t5BTSVu2TqTmIIHZAWhOvvCuff8btAb7_pjc7U0zyj1FPhtcrk_86dALJvt8fskYOV3R87sABFnJc96Lsuk0gvXpDx/s1600/read+more+grey2.png

Semoga membantu dan selamat mencoba.