TUTORIAL: Cara Mengubah 'Read More' Menjadi Image di Blogspot+Bonus Free Button!

Monday, March 2, 2015

Setelah kehebohan semalam, pagi ini kembali dengan Monday Techno! YEAAYYYY!

Kali ini tentang bagaimana cara mengubah tulisan Read More atau Baca Selanjutnya menjadi image. Atau seperti gambar di bawah ini. Read More muncul di home blog kita. Fungsinya memecah tulisan menjadi satu atau dua paragraf awal di home. Yang mau melanjutkan baca,harus klik dan terbukalah halaman baru. Nambah satu page views deh! Kalau bingung coba klik HOME aku aja ya!

cara mengganti read more dengan image - how to customize read more button with an image

Kalau nggak di-custom, image CLICK HERE TO READ MORE itu cuma berupa teks biasa. Kalau berupa teks biasa artinyaaaa? NGGAK KECE DONG. HAHAHAHA.

Sebelum ke tutorial cara mengganti tulisan itu jadi image, ini cara memecah tulisannya. Klik icon kertas sobek di bagian yang akan dipecah. Garis putus-putus yang aku tandai bintang itu nantinya akan jadi pemecah paragraf di HOME.

Sekarang coba ke Layout - Blog Posts. Ada tulisan Read More atau Baca Selanjutnya kah? Nah ini bisa diubah sesuka hati kita. Tapi ya gitu, kalau hanya tulisannya diubah, kurang kece badai dong. Gimana cara ganti biar jadi image?

Di dashboard blog pilih Template > Edit HTML > Format Template.

PESAN SPONSOR: TIAP MAU EDIT HTML JANGAN LUPA BACK UP! Jaga-jaga aja takut error.
Di dalem box HTML klik Ctrl+F dan ketik jump-link. Cari kode di bawah 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>

Ubah <data:post.jumpText/> dengan <img src='DIRECT IMG URL' /> jadi seperti 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>

DIRECT IMG URL itu ganti dengan URL image yang kita mau. Tapi nggak bisa pakai photoshop jadi bingung harus pake image apa? Don't worry be happy, ini aku kasih beberapa button CLICK HERE TO READ MORE. Pakai yang sesuai dengan warna theme blog masing-masing ya!

photo iconreadmore yellow_zpsvk0mfnry.png

<img src='http://i733.photobucket.com/albums/ww331/sunshineismine/iconreadmore%20yellow_zpsvk0mfnry.png' />

*

photo iconreadmore black_zps7tzvk8c9.png

<img src='http://i733.photobucket.com/albums/ww331/sunshineismine/iconreadmore%20black_zps7tzvk8c9.png' />
*

photo iconreadmore green_zpsom15vpwi.png

<img src='http://i733.photobucket.com/albums/ww331/sunshineismine/iconreadmore%20green_zpsom15vpwi.png' />
*

<img src='http://i733.photobucket.com/albums/ww331/sunshineismine/iconreadmore%20aqua_zpstd80mbxg.png' />
*

<img src='http://i733.photobucket.com/albums/ww331/sunshineismine/iconreadmore%20pink_zpstwltmnic.png' />
*

<img src='http://i733.photobucket.com/albums/ww331/sunshineismine/iconreadmore%20red_zpsjyyndgae.png' />
*

<img src='http://i733.photobucket.com/albums/ww331/sunshineismine/iconreadmore%20blue_zpsa6r4saqc.png' />
*

[UPDATE]

Karena akun Photobucket aku kena limit, jadinya kode di atas error deh. Untuk yang sudah terlanjur pakai dan read more-nya menghilang dan berganti jadi icon Photobucket, bisa ikuti cara di bawah ini ya.

1. Pilih button yang disuka, save di komputer.
2. Create new post dan upload image itu. Iya, seolah mau bikin blog post baru. Kita di sini hanya butuh URL image-nya.
3. Setelah ter-upload, ubah viewnya jadi HTML. Caranya klik di pojok kiri atas, kan ada Compose | HTML. Klik HTML.
4. Cek kodenya. Kode itu namanya direct link. Copy bagian ini: http://xxxxxxxxxx.png
5. Save draft postnya kemudian balik lagi ke dashboard. Posting ini mau di draft terus boleh, dihapus juga nggak masalah.
6. Kemudian masuk ke menu Template - Edit HTML
7. Ctrl+F, ketik: jump, kemudian enter. Nanti kode ini akan ketemu.

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'>
<img src='http://i733.photobucket.com/albums/ww331/sunshineismine/iconreadmore%20blue_zpsa6r4saqc.png' />
</a>
</div>
</b:if>

8. Ganti (paste) bagian yang diblok merah dengan link yang sudah di-copy di poin keempat.
9.Save template.
10.Done!

Nah sekarang, buttonnya sudah di-upload di blog sendiri. Jadi kalaupun akun Photobucket aku kena limit lagi, blognya nggak bakal error. Hehehe.

Ayo dicoba ya!

(Caranya kurang lebih kaya tutorial yang ini: TUTORIAL: Cara Termudah Install Social Media Icon + Free Button!)