Pada postingan kali ini gw akan memberikan tutorial membuat Readmore. Tapi untuk Readmore kali ini hanya menggunakan tulisan/text saja. Untuk menggantinya dengan icon atau gambar, lw bisa ngikutin tutorial postingan Readmore dengan gambar.
Read more berfungsi menampilkan image pertama dalam postingan dan mem-float image tersebut di awal paragraf awal, meskipun gambar yang kita letakan berada di tengah atau akhir postingan. Mungkin lebih nyaman kita sebut saja dengan fasilitas image thumbnail.
Tutorial membuat read more ini sudah gw coba sebelumnya, jadi kemungkinan berhasil cukup besar.
Oke langsung aja, ini dia langkah-langkahnya :
1. Pertama Klik EDIT HTML, Cari kode (Ctrl + F) :
</head>
2. Kemudian copy script dibawah ini dan paste di atas atau dibawah kode </head> pada HTML blog anda.
<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 500;
summary_img = 400;
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(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>
3. Simpan terlebih dahulu.
Selanjutnya...
4. Masih pada EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah :
<data:post.body/>5. Kalo sudah, ganti kode <data:post.body/> menjadi seperti kode dibawah ini :
<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'> <a expr:href='data:post.url'>Read More... <data:post.title/></a> </span> </b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/> </b:if>
Tulisan yang berwarna Ungu itu menandakan readmore+judul postingan jika kita tidak menghendakinya tinggal di hapus.
dan tulisan right yang berwarna biru menandakan letak daripada tulisan read more tersebut.
jika left : berarti berada di sebelah kiri. tetapi jika kita ganti menjadi
right : berarti berada di sebelah kanan (seperti pada contoh gambar di atas)
silahkan disimpan dan lihat hasilnya :)
Keterangan:
var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 500; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 400; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 150; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 150; (Thumbnail 'lebar dalam piksel)
Sumber : tutorial-triktips.blogspot.com
