Cara Membuat Read More Otomatis Disertai Gambar

Penampakan :D

Sebelumnya saya telah memposting tentang cara membuat read more tetapi dengan cara manual, sedangkan yang akan saya share kali ini adalah cara membuat read more secara otomatis dan disertai gambar, 

Read more ataupun yang biasa kita sebut dengan baca selengkapnya ini sangat berguna bagi blog kita, selain menjadikan blog kita lebih rapi, tombol auto read more ini juga sangat bermanfaat untukmenjadikan blog kita lebih cantik dan profesional.

Fungsi dari auto read more tersebut intinya adalah memotong artikel yang panjang dan menampilkan artikel yang penuh di halaman lain saat diklk, dan menampilkan potongan awal dari artikel di home page / beranda dan ditambah gambar yang disertai efek maka akan semakin maknyus deh, hehehe, disamping itu membuat auto read more juga akan menguntungkan kita, karena jika pengunjung mengklik baca selengkapnya maka kita akan langsung mendapat 2 kunjungan, jika tidak diberi auto read more makapengunjung biasanya hanya melihat artikel di home page saja, dan kta hanya mendapat 1 kunjungan.

Kelebihan dari auto read more  sendiri adalah langsung terpasang dan tidak usah bingung nengatur lagi karena auto read more ini sudah otomatis menyesuaikan sendiri, sedangkan yang read more manual harus menambahkan sendiri setiap kita posting namun readmore manual juga mempunyai kelebihan yaitu cara mengaturnya sangat simpel bisa anda lihat disini dan tidak terlalu rumit dan tidak menggunakan script didalam blogger ini, nah mau pilih yang mana? semua tergantung pilihan masin-masing sesuai kebutuhan.

Oke langsung saja kita simak Langkah-langkahnya:

langkah 1

login kedalam blogger

langkah 2

backup(membuat salingan) template untuk berjaga-jaga jika terjadi hal-hal yang tidak diinginkan.

langkah 3

setelah login pilih template>Edit HTML

langkah 4

klik kiri 1x (dimana saja) didalam kotak kode-kode template lalu tekan ctrl+F dan ketikkan </head> untuk mencari kata </head>.

langkah 5 

masukkan kode berikut ini tepat diatas </head>

<!--Auto Read More Mulai-->

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post-body{text-align:justify;}
.post-body img{max-width:none;width:auto;}
.read-more{float:left; padding-top: 10px;}
.read-more a{ color: #fff!important;text-shadow:0 1px 0 rgba(0,0,0,0.5);background:#0457A9;  text-decoration:none;font:bold 13px Arial;padding:5px;}
.read-more a:hover{text-decoration:none;background:#666;}
.pic{border: 10px solid #fff;float:left;height:165px;width:280px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;}
.grow img{height:165px;width:280px;transition: all 2s ease;}
.grow img:hover{width:400px;height:250px;}
</style>
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes -dengan gambar, no -tanpa gambar
summary_noimg = 300; //banyaknya huruf jika tidak ada gambar
summary_img = 250; //banyaknya huruf jika ada gambar
img_thumb_height = 165;
img_thumb_width = 280;
</script>
<script type='text/javascript'>//<![CDATA[
function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s = strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);}}strx =  s.join("");}chop = (chop < strx.length-1) ? chop : strx.length-2;while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;strx = strx.substring(0,chop-1);return strx+'...';}function createSummaryAndThumb(pID){var div = document.getElementById(pID);var imgtag = "";var img = div.getElementsByTagName("img");var summ = summary_noimg;if(thumbnail_mode == "yes"){if(img.length>=1){imgtag = '<div class="grow pic"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';summ = summary_img;}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}
//]]></script>
</b:if>
</b:if>

<!--Auto Read More Akhir-->

NOTE:

Cobalah terlebih dahulu tanpa diedit.

Warna Biru untuk mengatur banyaknya kutipan dari artikel.

Warna Hijau adalah Pengaturan Lebar dan tinggi gambar

langkah 6

Kemudian Cari Kode <data:post.body/>

Kode tersebut diatas jumlahnya biasanya ada 2, Cari yang versi web,

biasanya yang kedua (ke-2) dengan enter 2x pada kotak pencarian.

langkah 7

Hapus Kode <data:post.body/> yang ke-2 dan Ganti dengan kode dibawah ini.

<!-- Auto read more Mulai -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<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>
      <div class='read-more'>
      <a expr:href='data:post.url'>Baca Selengkapnya &#187;</a>
      </div>
</b:if>
</b:if>
<!-- Auto read more Akhir -->

Warna Biru Muda boleh dihapus boleh tidak, bedakan saja.

"Baca Selengkapnya" juga bisa diganti bebas.

langkah terahir

preview dahulu sebelum disave, jika sudah berhasil dan anda rasa bagus silahkan disave, dan selesai.

semoga artikel ini bermanfaat, dan jika kurang jelas ataupun anda masih gagal dalam menerapkan trik diatas maka jangan malu dan sungkan untuk berkomentar, terimakasih sudah berkunjung diblog saya.