-->

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

on
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.

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

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?

cara mengganti read more dengan image - how to customize read more button with an 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' />
*

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

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

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

 photo iconreadmore blue_zpsa6r4saqc.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 + &quot;#more&quot;' 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!)



-ast-




LIKE THIS POST? STAY UPDATED!


LATEST VIDEO

PLEASE SUBSCRIBE!
53 comments on "TUTORIAL: Cara Mengubah 'Read More' Menjadi Image di Blogspot+Bonus Free Button!"
  1. Wah, tambah kece ya mak blog klo d make up pake "read more" cantik

    ReplyDelete
  2. Wah trimakasih mak tipsnya sip banget.. Mak pengen juga tutorial yang button share untuk macem2 sosmed kayak Punyanya mak icha diside blog kanan atas itu... :)

    ReplyDelete
    Replies
    1. senin depan yaahhh. itu gampang loh sebenernya..

      Delete
  3. mak makasih ya tips nya...bermanfaat banget big hug

    ReplyDelete
  4. wah,makaish ya mak tutorialnya^^

    ReplyDelete
  5. Nyobaknyobaknyobak...biar kece badai melambay asoy dah
    Tengkiuuu mama bebeeee.... :D

    ReplyDelete
  6. langsung aku cobain Mak, tapi yang link jump-link itu aku cari-cari di format HTML kok gak ada ya?

    ReplyDelete
    Replies
    1. walaaahhh, masaaaa? aku nggak tahu kalau nggak ada huhuhuhu maafkaannnn T_____T

      Delete
  7. tulisan yg bernas dan informatif. tambahan ilmu bagi sy yg pemula ini. salam

    ReplyDelete
  8. wah jadi tambah cantik dan berwarna ya blog nya, ntar ah aku cobain. maksih tipsnya mak :)

    ReplyDelete
  9. Sudah dipraktekkaannn... Makasihhh Makk :)

    ReplyDelete
    Replies
    1. yeaayyy! aku udah liat, bagus yaahhh *malah muji diri sendiri* XD

      Delete
  10. aish... bisa jadi tambah kece ya... :)

    ReplyDelete
  11. TFS, mau dipraktekin.
    you're the best, maakk !!!

    ReplyDelete
  12. wuih mantep... pingin yang pink, tp beda warnanya :D

    ReplyDelete
  13. loco maaaakk..
    kapan2 aku coba aaahh.
    Aku lagi ngerjain yang lain dulu nih *soksibuk* Hihihii

    ReplyDelete
    Replies
    1. yaa gimana, ga kekinian banget kalau nggak sok sibuk sihhhh XD

      Delete
  14. ah, emang emak satu ini nggak pernah pelit bagi ilmu kecenya!! makasih ya, mak ^^

    ReplyDelete
  15. makk, kalau bikin sosial media button
    tutorialnya gimana mak :D hhe
    yg kayak widget paling atas di blog ini

    ReplyDelete
  16. Makasiiih *again* turorialnya maak... it works

    ReplyDelete
  17. Aduuuh ini kece badaaaiii mak :-)

    ReplyDelete
  18. mak ichaaaa... ditempatku ngga ada yang jump-link... trus saya mesti gimana, mak? hiks

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
    2. bnatu jawab ya mak Asri, ada 2 kemungkinan nih (berdasarkan kegagalan saya mencoba hohoh)
      1. Tulisannya belum dipecah
      2. Salah nyari. Jadi, mak asri nyari "jump-link"nya di kolom "search" (kolom kedua di sebelah kanan, jadi bukan kolom yang palling atas ya). Awalnya saya juga salah disini, akhirnya bisa juga setelah nyoba lagi.

      Delete
    3. mak husna, terima kasih sudah bantu jawab..

      sudah saya coba lagi, mak.. kok saya tetep bingung yaaa, mak..
      tulisan sudah saya pecah juga..

      Delete
  19. yeahhh... setelah beberapa kali gagal, akhirnya bisa juga. Thanks dear :-)

    ReplyDelete
  20. mak icha... terimakasih infonya. alhamdulillah berhasil. ini adalah tutorial kedua yang aku ikuti. hihi lanjut ke tutorial yang lain ah... salam dari ijaah.com ya mak :)

    ReplyDelete
  21. ijin boorkmark mba nisa :)

    xoxo,
    handdriati.blogspot.com

    ReplyDelete
  22. Aku ga berhasil terus nih mak.. Hiks hiks

    ReplyDelete
  23. Mba boleh minta icon-icon read more-nya ga? Makasi mba

    ReplyDelete
  24. Aku berhasiiiil..! Yeay!

    Mau nanya Mak, di aku kan icon read morenya di sebelah kiri.
    Nah kalau mau di sebelah kanan kayak Mak Icha, gimana caranya?

    ReplyDelete

Hallo! Terima kasih sudah membaca. :) Silakan tinggalkan komentar di bawah ini. Mohon maaf, link hidup dan spam akan otomatis terhapus ya. :)