Cara Membuat Readmore Otomatis Dengan Image Thumbnail di Blogspot

Artikel yang satu ini juga sedikit telat saya postinginnya, jadinya loncat-loncat deh, hehehe. Readmore atau yang biasa kita kenal dengan nama Baca Selengkapnya, berfungsi untuk menghemat space di halaman awal blog, jadi artikel yang kita posting tidak full tampil dan hanya paragraf awal saja yang terlihat.

Lihat pict

Readmore yang saya gunakan di dalam blog ini adalah Readmore Otomatis dengan kelebihan bisa menampilkan image pertama dalam postingan dan mem-fload image tersebut di awal paragraf awal, walaupun image yang kita upload itu berada di tengah ataupun akhir postingan.

Perlu diketahui, pemasangan Readmore Otomatis ini lebih mudah digunakan pada blog yang belum menggunakan fungsi Readmore, artinya kita tidak perlu otak-atik kode scriptnya terlalu jauh. Tapi apabila teman-teman sudah menggunakan fungsi Readmore sebelumnya, maka sebaiknya dikembalikan lagi kode awalnya dengan cara lihat kode di bawah ini : HAPUS KODE YANG BERWARNA MERAH SAJA !

<div class='post-header-line-1'/>
<div class='post-body'>
<b:ifcond='data:blog.pageType=="item"'> <style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if> <div style='clear: both;'/>

Jika sudah maka lanjutkan dengan langkah-langkah di bawah ini:

1. Login ke Blogger, lalu seperti biasa, klik Design/Tata Letak >> Edit HTML,
2. Lalu cari kode berikut (Ctrl F): </head>
3. Selanjutnya letakkan kode di bawah ini persis di atas kode </head>

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>


<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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>

4. Jangan disimpan dulu (masih di halaman edit HTML) dan lanjutkan dengan mencentang "Expand widget template" lalu cari kode berikut: <data:post.body/>
5. Ganti/hapus kode tersebut ( <data:post.body/> ) dan ganti dengan kode di bawah 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:left'><a expr:href='data:post.url'>Readmore --> <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

5. Jika sudah selesai dan klik save templates.
6. Sebelumnya juga teman-teman semua bisa mengubah beberapa atribut seperti keterangan di bawah ini:

- var thumbnail_mode = "float" - ("float" berarti image ada di sebelah kiri, jika tidak mau menggunakan image, silahkan ganti dengan "no-float")
- summary_noimg = 250; - (jumlah karakter kata yang akan ditampilkan tanpa image)
- summary_img = 250; - (jumlah karakter kata yang akan ditampilkan dengan image)
- img_thumb_height = 120; - (tinggi image)
- img_thumb_width = 120; - (lebar image)

Kira-kira seperti itulah Cara Membuat Readmore Otomatis Dengan Image Thumbnail di Blogspot, selamat mencoba dan semoga berhasil.