Cara Membuat Read More Versi 3 ( Automatis + Thumbnail )

Rasanya tutorial ini udah banyak di ketahui oleh para sahabat blogger, tapi hanya untuk sekedar sharing aja, maka sayapun berbagi tutorialnya di blog ini.
Sesuai namanya Readmore versi 3 berbeda dengan readmore versi sebelumnya, yakni versi 1 dan versi 2, karena di readmore versi 1 dan versi 2, kita harus mengatur batas perpotingan text sevcara manual, nah tapi dengan readmore versi tiga atau yang lebih di kenal dengan Read More Automatis + Thumbnail ini bisa menentukan jumlah karakter text yang akan menjadi abstraksi postingan kita, karena itulah di sebut Readmore Automatis karena kita gak perlu ribet-ribet lagi untuk mengatur posisi perpotongan text dengan meletakkan text sebelum kode <span class="fullpost"> dan sisanya sebelum kode </span>, karena itu udah ketinggalan zaman…he..he…he…



Selain kelebihannya yang otomatis, readmore versi 3 ini juga memiliki kelebihan lain, yakni mampu menampilkan thumbnail dari gambar pertama postingan, untuk mewakili isi dari postingan kita

Hehehe…keren kan…???

Kalau para sahabat blogger tertarik denagan readmore versi 3 ini,
Ikuti aja langkah-langkah di bawah ini :

1. login dulu ke akun Blogger kamu

2. Pilih Layout > Edit HTML

3. Letakkan kode berikut di di bawah kode </head>

<!-- Read more v3 -->
<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; margin:0px 10px 5px 0px; padding:0; border-right:2px solid #ccc; border-bottom:2px solid #ccc;"><img src="' img[0].src '" width="' img_thumb_width 'px" height="' img_thumb_height 'px"/></span>';
summ = summary_img;
}

var summary = imgtag '<span>' removeHtmlTag(div.innerHTML,summ) '</span>';
div.innerHTML = summary;
}
//]]>
</script>

<script type='text/javascript'>
var thumbnail_mode = "float";
summary_noimg = 500;
summary_img = 400;
img_thumb_height = 125;
img_thumb_width = 120;
</script>
<!-- Read more v3 end -->

Catatan :
var thumbnail_mode = "float"; = Menentukan posisi thumnail
summary_noimg = 500; = Jumlah karakter bila tidak menggunakan thumbnail
summary_img = 400; = Jumlah karakter bila menggunakan thumbnail
img_thumb_height = 125; =Tinggi thumbnail
img_thumb_width = 120; = Lebar thumbnail

4. Klik Save Template

5. masih ada di kolom Edit HTML, lalu centang Expand Widget Template

6. Cari kode <data:post.body/>, dan ganti kode tersebut dengan kode berikut:
<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'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

7. lalu Save template nya.

Catatan :

Tulisan READ MORE - bisa anda ganti sesuai keinginan kamu .jika kamu ingin mengubahnya ke bentuk gambar, …klik aja [ di sini ]

Selamat mencoba, Semoga berhasil , dan jangan lupa tinggalkan komentar.