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>
<script
type='text/javascript'> var thumbnail_mode =
"no-float" ; summary_noimg = 300; summary_img = 301;
img_thumb_height = 150; img_thumb_width = 150; </script>
Perhatikan dan edit sesuai selera sobat:
<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX8iAG5kcsRj000x65Iz0LqCDJXKUgx5f87ensEQdz8l4Iz70S_Q3NvfmMgoRGQkMBWqUMwNHbM4SqqsfIdjc0gXiE7ctfPVg67jiyKUh00BU-Fuxtv0718xgNlRobCw-1ZWUjDL0I9Q/s1600/def-thumb.png"
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>
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX8iAG5kcsRj000x65Iz0LqCDJXKUgx5f87ensEQdz8l4Iz70S_Q3NvfmMgoRGQkMBWqUMwNHbM4SqqsfIdjc0gXiE7ctfPVg67jiyKUh00BU-Fuxtv0718xgNlRobCw-1ZWUjDL0I9Q/s1600/def-thumb.png"
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>
6. Jika sudah SAVE template sobat
7. lalu lihat apakah berhasil atau tidak.
Jika masih belum berhasil, coba ulangi pastikan letak kodenya benar. Have fun..
Senin, 12 Maret 2012
Habibnq » » Cara membuat autoreadmore di postingan blog
Tidak ada komentar:
Posting Komentar
Tidak Mengerti,Ingin Tahu,Mau Bertanya???
Tuliskan Komentar Anda Di Kotak INI!!!