Membuat Read More Bergambar Otomatis

Untik membuat tombol Readmore seperti gambar disamping cara nya sangat mudah sobat ikuti saja petunjuk dibawah ini satu persatu,oh iya saya jelaskan dahulu Readmore otomatis ini jadi readmore bergambar ini akan muncul secara otomatis di blog sobat tanpa menambahkan gambar apapun. baiklah tanpa panjang lebar lagi akan saya bahas tutorial nya satu persatu seperti dibawah ini :

1. Log in blogger.com dengan user name dan password sobat
2. dalam menu Dasbor pilih tata letak lalu pilih edit HTML
3. Centang Expand Template Widget
4. 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. Lalu 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='http://www.cosmeticdentistsite.com/beta/images/raedmore.jpg'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

8. kalau sobat punya gambar yang bagus buat tombol readmore nya ganti tulisan yang berwarna putih dengan alamat gambar tombol readmore sobat
Selamat mencoba semoga tips ini bermanfaat jangan lupa baca juga artikel lain nya dibawah ini.

sumber :http://www.akur.co.cc/2010/05/cara-membuat-read-more-otomatis-dengan.html

Catatan : Jangan Lupa Baca dan Klik Dibawah ini ya

Artikel Keren Lainnya