Cara membuat read more otomatis dengan gambar

By: Unknown on 9:32 PM

Sekarang kita akan mempelajari bagaimana cara memodifikasi read more yang ada pada template blogger kita, yakni dg cara membuat readmore otomatis dg gambar yang kita inginkan. kita bisa memilih jenis ikon yang ingin kita tampilkan sebagai ikon readmore yang ada pada postingan pada template blogger kita, apakah anada penasaran bagaimana cara membuatnya, baiklah ini caranya :

untuk contohnya bisa dilihat Disini

1. Log in dulu ke akun blogger anda

2. Pada Dasbor pilih  tata letak > edit HTML

3. Jangan lupa Centang Expand Template Widget

4. Kemudian silahkan anda Cari kode </head>

5. Copy kode di bawah ini,dan letakkan di atas </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>

6. Kalau sudah selesai silahkan anda cari kode <data:post.body/>

7. Ganti kode tersebut dengan kode di bawah ini..

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1QXtWIH9TwYEUxRDloJ4kUdWSiC-GPj8G3IHUE9HVwd1yv358QXkAcEsber_P9Q2VBJzchrv-AK2C6OD1TKYmevwCREsMBSu_uSAjBa1wU9toCWDOO4k1uwr0orvYkxpL5DxtwzxhHr8u/'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Ket : Silahkan anda ganti kode yang berwarna merah dengan link gambar ikon readmore yang nada inginkan

8. Finish, dan silahkan di Save

Dan lihat hasilnya....!

Sumber : http://hujangede.blogspot.com