Hai sobat semua kali ini blog ini akan membahas tentang Cara Membuat Readmore Otomatis Menggunkan Gambar Atau Teks, kalo biasanya menggunakan teks saja atau gambar saja maka kali ini blog ini akan lansung memberikan keduanya, jadi terserah sobat mau menggunakn readmore dengan icon gambar atau dengan teks.


Oke dah lansung aja kita bahas caranya:

1.Pertama-tama sobat harus login ke blogger sobat.
2.Pada tab menu pilih Rancangn - Edit HTML.
3.Selanjutnya cari kode </head> jika kesulitan mencarinya coba baca Cara Cepat Mencari Kode HTML.
4.Jika kode </head> sudah ketemu selanjutnya copy kode berikut dan paste atau letakkan di atas kode </head>
<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://otowebsite.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>

5. Selanjutnya cari kode <data:post.body/> atau <p><data:post.body/></p>. Jika menemukan 2 kode yang sama, pilih kode yang pertama.

6.Jika sudah ketemu selanjutnya silahkan sobat ganti kode tersebut dengan kode berikut:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'><img src="http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_red.png"></img></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

7.Klick pertinjauan lebih dahulu, jika sudah berhasil baru klick simpan.

Keterangan :
pada kode diatas terdapat beberapa kode yang bisa sobat ubah sesuai keinginan sobat, diantaranya:
summary_noimg = 430; angka 430 adalah jumlah karakter yang akan ditampilkan jika tidak menggunakan gambar.
summary_img = 340; jika menggunakan gambar, angka 340 adalah jumlah karakter yang akan ditampilkan.
img_thumb_height = 100; ini adalah ukuran tinggi gambar / thumbnail yang akan muncul.
img_thumb_width = 120; sedangkan yang ini adalah lebar gambar / thumbnail.

Sobat juga bisa mengubah Icon read more

http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_red.png

Silahkan sobat ganti dengan icon readmore lainnya atau dengan teks seperti:

Read more>>, atau Baca Selengkapnya>>

Maka sobat tinggal menghapus / mengganti kode <img src="http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_red.png"></img> menjadi tulisan >> Read More atau Baca selengkapnya dll.

Disini saya juga menyediakan icon readmore untuk mempermudah sobat,  jika sobat berminat silahkan sobat download, contohnya seperti gambar.
Jika berminat sobat bisa downlod disini.





Cukup sekian dulu untuk kali ini semoga postingan/articles ini bisa bermanfaat untuk sobat semuanya.

Bagaimana tanggapan sobat tentang postingan/articles di atas? silahkan tinggalkan komentar/tanggapan sobat!

Posting Komentar Blogger Disqus

  1. keren sob, nice share

    BalasHapus
  2. Blog Agan udah saya follow, tolong followback ke blog saya di www.ardankeren.com

    Terimakasih

    BalasHapus
  3. makasih banyak lho..mas mohon di follow blog saya saya mash newbie

    BalasHapus
  4. @Rekyan Dio Jka anda igin d follow, pstikn dlu anda follow blog ini trlbih dhulu.

    BalasHapus
  5. Makasih banyak mas , tutorialnya udah berhasil saya coba

    BalasHapus
  6. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  7. makasi boz untuk tutorialnya ....

    BalasHapus
  8. gan kenapa di blog ku gak berhasil ya ?

    BalasHapus
  9. @irvanuzumakiBerarti Anda salah menempatkan kode pada no.6

    BalasHapus
Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL 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>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top