21 Merubah Read More Dengan Icon Image

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Setelah pada postingan sebelumnya kita membahas Cara membuat read more atau baca selengkapnya. Kali ini saya ingin berbagi lagi dengan pengunjung, kali ini cara merubah atau mengganti read more dengan image agar tampilannya lebih menarik.

Yang pertama harus disiapkan tentu adalah sebuah icon image seperti ini: th_readmore atau seperti ini:

     atau seperti ini kemudian uploadlah image tersebut ke situs tempat penyimpanan image seperti photobucket. Setelah proses upload selesai, copylah URL image tersebut, seperti contoh dibawah ini :

http://i685.photobucket.com/albums/vv220/amatullah_sy/read%20more/readmore-1.gif

Tambahkan kode agar image tersebut dapat ditampilakn seoperti dibawah ini :

<img src="http://i685.photobucket.com/albums/vv220/amatullah_sy/read%20more/readmore-1.gif"/>

Image akan terlihat seperti ini gambar kedua diatas, tentu kreasi imagenya anda bisa sesuaikan sdengan selera anda (ini hanya contoh).

Selanjutnya ikuti tutorial berikut:

  • Seperti biasa anda harus dalam keadaan sig ini pada blogger
  • Masuk menu Tata Letak/ Layout=>klik Edit HTML=>Centang kotak kecil disamping Expand Template Widget
  • Untuk menjaga yang tidak anda inginkan bisa Back up terlebih dahulu template anda!
  • Kemudian cari kode seperti ini:

<p><data:post.body/></p>
<a expr:href='data:post.url'><strong>Read More...</strong></a>
</b:if>

  • Gantilah kalimat Read More dengan URL image yang telah disiapkan diatas, sehingga menjadi seperti ini :

<p><data:post.body/></p>
<a expr:href='data:post.url'><strong><img src="
http://i685.photobucket.com/albums/vv220/amatullah_sy/read%20more/readmore-1.gif"/></strong></a>
</b:if>

  • Terakhir, save template anda! Lihat hasilnya!

Semoga bermanfaat!


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

21 komentar :

  1. Trims infonya... tak cobain...

    BalasHapus
  2. @ d'ara: Semoga berhasil. Terimakasih apresiasinya

    BalasHapus
  3. Trims shobb dah tak cobain n sukses...

    BalasHapus
  4. @ d'ara: Alhamdulillah... Terimakasih konfirmasinya...

    BalasHapus
  5. Terimakasih Tutornya...... "Salam Ozie"

    BalasHapus
  6. Kok data:postbody di tamplate Q ga ada???

    BalasHapus
  7. @ Putra Semarang: InsyaAllah kode itu ada disemua template. Sy kira anda hanya lupa mencentang kotak kecil disamping Expand Template Widget? KLu ya...smpai kpnpun anda cari mmg g' bakalan ketemu.

    Makasih. Slmt mencoba lg, mg berhasil!

    BalasHapus
  8. bismillaah
    ana coba tips readmore,kok jadinya begini..,tolong di bantu kesalahan ana dimana?
    afwan udah bikin repot,semoga menjadi ilmu yang bermanfaat..
    jazaakillaah khoiron

    BalasHapus
  9. bismillaah

    afwan waktu kemarin ana coba jadinya amburadul,tapi setelah ana kompromikan dengan tips yang sebelumnya ALHAMDULILLAAH berhasil,moga bermanfaat.
    jazaakillaah khoiron

    BalasHapus
  10. @ Tewesell: Wa jazaakumullahu khorn. 'Afwan tolong jika mengcopy paste antum memberikan backlink yang jelas. Ana lihat antum hanya menuliskan sumber link amatullah83.

    'Afwan

    BalasHapus
  11. wah ini yang lagi dicari, ketemu juga, mkasih tutorialnya bang, kalo ada waktu berkunjung ke blog Vista 84 saya untuk melihat hasilnya thank

    BalasHapus
  12. bismillah

    udah ana perbaiki,makasih atas koreksinya harap maklum karena baru belajar,ohya skalian mo nanya kotak komentar blog ana kok gak bisa di buka,kemarin ana coba tip tentang kotak komentar ukhti, ana gak menemukan kode yang di maksud,klo gak keberatan tlg ksh tau kesalahan2nya ke alamat email ana di tewesell70@yahoo.co.id ato imambukhori70@yahoo.co.id
    jazaakillaah khoiron...

    BalasHapus
  13. ass anna,,,blognya makin cantik aja,,
    artikelnya bagus banget
    mksh ya..

    BalasHapus
  14. Hmmm... Untuk gambar2 read morenya, ada URL lain yang uda ada gak??

    BalasHapus
  15. Ass. Cara bikin menu plus gambar pensilnya bagimana tuh?? Bisa bagi2 pengalaman mungkin tentang hal tersebut

    BalasHapus
  16. Kalau mengganti readmore pada html potingan dengan image yg dimaksud bisa ga. bagaimana menyisipkannya?






    soalnya sy ga nemu dengan cara artikel diatas, trims

    BalasHapus
  17. :)) HALLO GAN....AQ PENASARAN BISA BUAT ICON LINK VIEW DEMO YANG ADA PADA SETIAP POSTING AGAN

    BalasHapus
  18. di blog gue gk ada gan.. ;((
    mohon bantuanya... [-(

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!