Cara buat
read more ini
menggunakan gambar sebagai tombol jadi semakin terlihat menarik, bisa
disesuaikan sesuai kebutuhan serta cukup mudah dalam membuatnya, tapi tetap
harus di perhatikan dengan baik dan ikuti ketentuan yang penulis berikan untuk
Anda, berikut adalah langkah-langkahnya.
1. Masuk ke halaman template
2. Backup template sebelum mendesain
3. Edit HTML → proses centang "Expand Template Widget"
4. Tekan Ctrl+F untuk mencari kode </head>
5. Tambahkan kode berikut tepat diatas kode tersebut atau dibawah kode ]]></b:skin>
1. Masuk ke halaman template
2. Backup template sebelum mendesain
3. Edit HTML → proses centang "Expand Template Widget"
4. Tekan Ctrl+F untuk mencari kode </head>
5. Tambahkan kode berikut tepat diatas kode tersebut atau dibawah kode ]]></b:skin>
<!-- kode
Read More -->
<script
type='text/javascript'>
var
thumbnail_mode = "float" ;
summary_noimg
= 230;
summary_img
= 250;
img_thumb_height
= 60;
img_thumb_width
= 60;
</script>
<script
type='text/javascript'>
//<![CDATA[
function
removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var
d=b.split("<");for(var
c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!="
"&&b.indexOf("
",a)!=-1){a++}b=b.substring(0,a-1);return
b+" [...]"}function createSummaryAndThumb(d){var
f=document.getElementById(d);var a="";var
b=f.getElementsByTagName("img");var
e=summary_noimg;if(b.length>=1){a='<span style="float:left;
padding:0px 10px 5px 0px;"><img src="'+b[0].src+'"
width="'+img_thumb_width+'px"
height="'+img_thumb_height+'px"/></span>';e=summary_img}var
c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};
//]]>
</script>
6. Tekan
Ctrl+F untuk mencari kode <data:post.body/>
7. Tambahkan kode berikut tepat dibawah kode tersebut dan diatas kode penutup </b:if>
7. Tambahkan kode berikut tepat dibawah kode tersebut dan diatas kode penutup </b:if>
<script
type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script><span
class='rmlink' style='float:right;padding-top:20px; border:1px solid #fff;'>
<a
expr:href='data:post.url'><img
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHAVGtP91MAL4wXLjdJoyWPpxdwdFMPBrS_d2hxVfCmZQ8jUq4dJCJC9OiqlZEidXMWY2Kq9ShV50jQItlk-ArBUkcD7bc5D5BOd-vIpjA4Lm4pd1X3-GY93DOe4OAhK2v3GvWjcHbjNo/s74/readmore_thumb.gif'/></a></span>
Hasilnya
akan seperti berikut:
<div
class='post-header'>
<div class='post-header-line-1'/>
</div>
<div class='post-body entry-content'
expr:id='"post-body-" + data:post.id'
itemprop='articleBody'>
<b:if
cond='data:blog.pageType != "item"'>
<div expr:id='"summary"
+ data:post.id'><data:post.body/></div>
<script
type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script>
<span
class='rmlink' style='float:right;padding-top:20px;'>
<a
expr:href='data:post.url'><img
src='http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif'/></a></span>
</b:if>
<b:if
cond='data:blog.pageType ==
"item"'><data:post.body/></b:if>
<div style='clear: both;'/> <!--
clear for photos floats -->
</div>
8. Pratinjau dan simpan template
selesai. Semoga berhasil sekian dan terima kasih Salam.
Keterangan:
1. Kode <data:post.body/>
tidak hanya ada satu, pilih kode pertama atau sesuaikan.
2. Untuk
link gambar http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif
bisa disesuaikan dengan kebutuhan
3. Summary_noimg = 230; adalah jumlah karakter yang
tampil, summary_img = 250; adalah gambar yang tampil di depan konten post jika
posting menggunakan gambar, img_thumb_height = 60;, img_thumb_width = 60;
adalah tinggi dan lebar gambar yang tambil di depan konten post.
