5:06 PM
Argijoe
Membuat autoreadmore di postingan
blog gampang-gampang susah. Tapi saya
akan membuat sobat-sobat semudah mungkin untuk membuatnya.
Semoga cara membuat
autoreadmore di postingan ini bisa membantu sobat dan ada manfaatnya.
Berikut cara cara membuat autreadmore:
1. login ke blog sobat, jika sudah masuk ke rancangan >> Edit Html
2. beri tanda centang pada "Expand Widget Templates"
3. lalu copy kode dibawah, letakkan tepat diatas </head>
Berikut cara cara membuat autreadmore:
1. login ke blog sobat, jika sudah masuk ke rancangan >> Edit Html
2. beri tanda centang pada "Expand Widget Templates"
3. lalu copy kode dibawah, letakkan tepat diatas </head>
<script type='text/javascript'> var thumbnail_mode =
"no-float" ; summary_noimg = 300; summary_img = 301;
img_thumb_height = 150; img_thumb_width = 150; </script>
<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");
if(img.length<1) {
imgtag = '<span style="float:right; padding:0px 0px 5px 10px;"><img src="http://s1244.photobucket.com/albums/gg565/argijoe/?action=view¤t=argijoe.jpg" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
var summ = summary_noimg;
}
if(img.length>=1) {
imgtag = '<span style="float:right; padding:0px 0px 5px 10px;"><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>
<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");
if(img.length<1) {
imgtag = '<span style="float:right; padding:0px 0px 5px 10px;"><img src="http://s1244.photobucket.com/albums/gg565/argijoe/?action=view¤t=argijoe.jpg" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
var summ = summary_noimg;
}
if(img.length>=1) {
imgtag = '<span style="float:right; padding:0px 0px 5px 10px;"><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>
Perhatikan dan edit sesuai selera sobat:
summary_noimg = 300 menunjukkan jumlah karakter yang ditampilkan tanpa gambar
summary_img = 301 menunjukkan jumlah karakter yang ditampilkan termasuk gambar
img_thumb_height = 150 menunjukkan tinggi gambar thumbnail
img_thumb_width = 150 menunjukkan lebar gambar thumbnail
float:right menunjukkan posisi gambar thumbnail di kanan. Jika anda ingin gambar thumbnail berada di kiri ganti right menjadi left
img src="http://s1244.photobucket.com/albums/gg565/argijoe/?action=view¤t=argijoe.jpg" adalah gambar cadangan yang muncul jika tidak ada gambar dalam postingan. Anda bisa ganti gambar cadangan dengan gambar lain atau hapus saja alamat gambarnya jika anda tidak mau menggunakan gambar cadangan.
4. lalu cari kode <data:post.body/> atau <p><data:post.body/></p>
5. Selanjutnya sobat ganti dengan kode dibawah :
summary_noimg = 300 menunjukkan jumlah karakter yang ditampilkan tanpa gambar
summary_img = 301 menunjukkan jumlah karakter yang ditampilkan termasuk gambar
img_thumb_height = 150 menunjukkan tinggi gambar thumbnail
img_thumb_width = 150 menunjukkan lebar gambar thumbnail
float:right menunjukkan posisi gambar thumbnail di kanan. Jika anda ingin gambar thumbnail berada di kiri ganti right menjadi left
img src="http://s1244.photobucket.com/albums/gg565/argijoe/?action=view¤t=argijoe.jpg" adalah gambar cadangan yang muncul jika tidak ada gambar dalam postingan. Anda bisa ganti gambar cadangan dengan gambar lain atau hapus saja alamat gambarnya jika anda tidak mau menggunakan gambar cadangan.
4. lalu cari kode <data:post.body/> atau <p><data:post.body/></p>
5. Selanjutnya sobat ganti dengan kode dibawah :
<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'><b>Read more »</b></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><p><data:post.body/></p>
</b:if>
<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'><b>Read more »</b></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><p><data:post.body/></p>
</b:if>
6. Jika sudah SAVE template sobat.
7. lalu lihat apakah berhasil atau tidak.
O iya,sebelum sobat save hasil editan ini,terlebih dahulu sobat lihat hasilnya dengan cara klik pratinjau
Selamat mencoba.
