Rabu, 18 November 2015

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. 


55 komentar:

  1. Terima kasih tipsnya, Mbak...
    Sekarang aq banyak pake wodpress

    BalasHapus
    Balasan
    1. iya.. maaf kalo WP saya ngga ngerti sama sekali :-(

      Hapus
  2. Tos :))
    Saya pun otak-atik blog lewat postnya Mbak Annisast xD
    Makasih sharingnya mak

    BalasHapus
  3. Tipsnua keren, Maks.
    Makasiiiih ya, Mak. Udah berbagi...

    BalasHapus
  4. Tipsnya oke banget..mo nyobain ah

    BalasHapus
  5. Makasih tutorialnya...tadi saya langsung coba tapi belum berhasil. Saya awam banget soal kode html.
    Harus banyak belajar lagi nih sm mba husna :)

    BalasHapus
    Balasan
    1. dicoba lagi ya. Boleh colek-colek saya di FB kalo ada yang dimengerti.

      Hapus
  6. Huaaaa ... Keren!!! Simpen dulu. Ntar malam nyoba, ah :D :D

    BalasHapus
  7. terimakasih tipsnya mbak :)
    kapan-kapan coba buat ah..:)

    BalasHapus
  8. Tulisan saya tuh yang full text semua kalau blognya dibuka. Thanks infonya. Pengen coba.

    BalasHapus
  9. aku udah pake read more cuma kalo mau pake image, kudu nyoba ini deh

    BalasHapus
    Balasan
    1. harus dicoba, kalo mentok juga biar aku yang pasangin *ehh ;-)

      Hapus
  10. tampilan postinganku msh full text. harus dicoba nih tutorialnya

    BalasHapus
    Balasan
    1. iya.. harus dicoba biar penasaran yang baca postingan kita.

      Hapus
  11. hihii..seneng kalo dah otak atik beginian yaa:D

    BalasHapus
  12. Terima kasih mbak info dan free icon nya... ntar langsung pengen di praktekin dah...

    BalasHapus
  13. Nice post,Mak! Mau coba tapi nggak PD, takut brantakan :)

    BalasHapus
    Balasan
    1. saya pun dulu ngga langsung berhasil, perlu beberapa kali nyoba. Tapi lama-lama bisa juga. Jangan nyerah ya mbak ^___^

      Hapus
  14. hola, mak..

    aku udah cobain, tapi kok jadinya gede banget yaaa, mak? harus diapain itu, mak?

    BalasHapus
    Balasan
    1. Hi mak Asri, harusnya ukurannya tetap kaya di gambar itu. Coba cara ini deh:
      1. save gambar ikonnya
      2. bikin postingan baru (kaya pertama kita mau bikin tulisan)
      3. upload gambar ikon yang tadi disave
      4. klik gambarnya, trus ganti ukurannya jadi SMALL
      5. trus, klik tombol HTML yang ada disamping COMPOSE. Nah, cari kode yang 'http://..................................png'
      6. copy kodenya.
      Nah, kode itu namanya URL Image. Jadi, langkah selanjutnya tetep sama kaya yg saya tulis diatas.

      Cobain ya ^__^

      Hapus
  15. Takut nyoba tapi takut malah berantakan, mak. Hhiiii *gaptek html nihhh

    BalasHapus
    Balasan
    1. jangan takut nyoba, kalo sekali belum berhasil ga papa coba lagi. Hayoo.. dipraktekin ^___^

      Hapus
  16. iya ya. hmmm...belajar dulu. tfs mak.

    BalasHapus
  17. Hihihi utek2 page break biasa nya tulisan biasa, ini nambah gambar asyik

    BalasHapus
  18. Kereeeen, tengkyu tutorialnya mak Suci

    BalasHapus
  19. Mba Husna, Blognya bagus banget sih,,, pengen belajar tapi pusing lihat cara-caranya hihihi

    BalasHapus
    Balasan
    1. Makasih mba Alfa. Padahal masih bagusan blognya mbak, rapih. Ayo mbak, dikit-dikit belajar HTML ^__^

      Hapus
  20. terimasakih tipsnya mba. sudah bisa. hehehe

    BalasHapus
  21. UCiii postingan bloggingnya bermanfaat banget, terimakasih terimakasiiiih

    BalasHapus
  22. aku suka nih sma tempalte nya mbak Suci.
    izin makai icon readmorenya ya mbak. hhhe
    trima kasih banyak untuk ilmunya ya mbak ^^

    BalasHapus
  23. saya coba tutorialnya dan berhasil...tapi gambar saya perkecil sedikit. Trimakasih tutorialnya.

    BalasHapus

Silakan Tinggalkan Komentarnya. Maaf, link hidup dan spam akan otomatis terhapus ya.