Membuat Auto Readmore Dengan Gambar

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

1. Login ke blogger.com
2. Pilih Template lalu Edit HTML,kemudian Tempatkan kursos mouse anda di dalam kotak pengeditan template.
3. Tekan CTRL+F, Muncul sebuah kotak lalu Cari kode </head> dan letakkan kode di bawah ini diatasnya.

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 280;
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. Kemudian ganti kode <data:post.body/> dengan kode berikut :

<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/AVvXsEjMPZgVHRSNdBkhIQNCrPIhRzVpCuVw1Ee1_5G_G6C22b5WruBPIXifiHQ_oPkf9iT7ko8PHculgw6aegC_ESRhPOtRjTAjwN1Zt1QaF2V6ihOGYiECvjNpOd5Zb5AJVB1OOqFENklyxIYj/'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

5. Klik Pratinjau terlebih dahulu sebelum anda menyimpannya.
6.Apabila di halaman depan blog anda sudah terlihat tulisan "Readmore",berarti template yang anda pasang sukses.
7.Dan klik Simpan.

Keterangan :

• summary_noimg = 280; (Jumlah huruf artikel tanpa gambar) 
• summary_img = 280;(Jumlah huruf artikel bergambar)                                                                        • img_thumb_height = 120;(Tinggi gambar)                                                                                           • img_thumb_width = 120; (Lebar gambar)
•  Dan tulisan yang berwarna biru adalah URL gambar. Anda dapat mengganti URL gambar  di atas,dengan URL gambar kesukaan anda sendiri.

Disini
Share On Facebook

Terjemahkan Halaman Ini

Get This Widget Here!! by Google