di lakukan secara manual, read more ini bekerja secara otomatis. Jadi tidak perlu lagi menggunakan insert jump break. Untuk lebih jelasnya silahkan Anda langsung saja praktek.
Read more dilengkapi dengan tampilan gambar dari salah satu halaman postingan blog. posisi gambar disebelah kiri dan diteruskan dengan sedikit penjelasan dari isi artikel Anda. Berikut ini adalah cara membuat auto read more yang jelas:
- Login ke blogger. Dari halaman dasbor, pilih pengaturan template.
- Dan Klik edit HTML, dan cari kode </head> gunakan Ctrl F untuk mempermudah Pencarian.
- Selanjutnya, jika sudah ketemu, masukan kode berikut dibawah </head>
- Keterangan kode diatas:
- Selanjutnya cari kode <data:post.body/> dan ganti dengan kode berikut ini.
- Ada 3 kode yang sama dengan <data:post.body/>, ganti semuanya dengan kode diatas.
- Kode <font color='#1780dd'>Baca Selengkapnya >>></font></a> . Tulisan Baca Selengkapnya bisa diganti dengan kata yang kamu inginkan, <font color='#1780dd'> Ini kode warnanya, bisa diganti dengan warna lain. >>> ini kode tanda >>> setelah tulisan Baca selengkapnya.
- Terakhir, save template. Selesai sudah pekerjaan Anda.
<!-- Auto read more script Start --> <script type='text/javascript'> var thumbnail_mode = "yes"; summary_noimg = 430; summary_img = 340; img_thumb_height = 150; img_thumb_width = 150; </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 = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>'; summ = summary_img; } } var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>'; div.innerHTML = summary; } //]]> </script> <!-- Auto read more script End -->
summary_noimg = 430; Jumlah huruf tanpa gambar summary_img = 340; Jumlah huruf dengan gambar img_thumb_height = 150; Tinggi Gambar img_thumb_width = 150; Lebar Gambar
<!-- Auto read more Start -->
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div style='text-align:justify;' expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
</script>
<a class='more' expr:href='data:post.url'><font color='#1780dd'>Baca Selengkapnya >>></font></a>
</b:if>
</b:if>
<!-- Auto read more End -->
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div style='text-align:justify;' expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
</script>
<a class='more' expr:href='data:post.url'><font color='#1780dd'>Baca Selengkapnya >>></font></a>
</b:if>
</b:if>
<!-- Auto read more End -->
