Cara Membuat Read More Otomatis dengan Thumbnail di Blogger

ini ilmu untuk newbie seperti aku ini,mungkin diantara kalian ada yang masih newbie seprtiku?silahkan manfaatin artikelku ini deh,menurutku ini cara yang gambang,karna kemaren kemarennya aku sudah coba berbagai cara,tapi aku tidak ngerti ngerti,akhirnya aku mendapatkan tips ini dari blog temanku.
setelah aku coba ternyata bisa,makanya aku ingin berbagi dengan kalian,tidak usah bertele tele ayo lang aja ke cara membuat read more otomatis dengan thumbnail berikut ini:

Silahkan Login dan masuk
lalu klik Rancangan dan klik Edit HTML
Centang Expand Template Widget
Untuk mempermudah pencarian kode HTML nya anda tekan aja ( CTRL + F )
Cari kode </head> dan kalau sudah ketemu
Tambahkan kode dibawah ini tepat nya diatas 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 Fais

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>

Jika ingin merubah ukuran read more nya anda ubah aja di bagian bagian kode di bawah ini Ubah angka nya sesuai kebutuhan :

summary_noimg = 430; adalah tinggi potongan artikel tanpa gambar
summary_img = 340; adalah tinggi potongan artikel dengan gambar
img_thumb_height = 100; adalah ukuran tinggi thumbnail
img_thumb_width = 120; adalah ukuran lebar thumbnail
langkah Selanjutnya cari kode <data:post.body/> lalu ganti tag <data:post.body/> tersebut dengan kode script di bawah ini :
<b:if cond='data:blog.pageType != "item"'>
<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>
<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>

Kata READ MORE anda ubah saja sesuai dengan kebutuhan kita kayak kata selanjutnya,seterus nya,atau yang lain nya.
Tahap terakhir setelah selesai pengeditan simpan Templete dan lihat aja hasil nya.
semoga bermanfaat ya...dan kalau sukses kabari aku ya...
artikel lainnya:


email is the best
agama
tuhan