Professional Documents
Culture Documents
Cara Membuat Readmore Otomatis Dengan Gambar
Cara Membuat Readmore Otomatis Dengan Gambar
<!ReadMorehttp://trikseosimple.blogspot.com>
<b:ifcond='data:blog.pageType!="static_page"'>
<b:ifcond='data:blog.pageType!="item"'>
<style>
.postbody{textalign:justify;}
.postbodyimg{maxwidth:none;width:auto;}
.readmore{float:left;paddingtop:10px;}
.readmorea{color:#fff!important;textshadow:01px0
rgba(0,0,0,0.5);background:#0457A9;textdecoration:none;font:bold13px
Arial;padding:5px;}
.readmorea:hover{textdecoration:none;background:#666;}
.pic{border:10pxsolid#fff;float:left;height:165px;width:250px;marginright:20px;margin
bottom:10px;overflow:hidden;boxshadow:5px5px5px#111;}
.growimg{height:165px;width:250px;transition:all2sease;}
.growimg:hover{width:400px;height:250px;}
</style>
<scripttype='text/javascript'>
varthumbnail_mode="yes";//yesdengangambar,notanpagambar
summary_noimg=300;//banyaknyahurufjikatidakadagambar
summary_img=250;//banyaknyahurufjikaadagambar
img_thumb_height=165;
img_thumb_width=250;
</script>
<scripttype='text/javascript'>//<![CDATA[
functionremoveHtmlTag(strx,chop){if(strx.indexOf("<")!=1){vars=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.length1)?chop:strx.length
2;while(strx.charAt(chop1)!=''&&strx.indexOf('',chop)!=1)chop++;strx=
strx.substring(0,chop1);returnstrx+'...';}functioncreateSummaryAndThumb(pID){vardiv=
document.getElementById(pID);varimgtag="";varimg=
div.getElementsByTagName("img");varsumm=summary_noimg;if(thumbnail_mode==
"yes"){if(img.length>=1){imgtag='<divclass="growpic"><imgsrc="'+img[0].src+'"
width="'+img_thumb_width+'px"height="'+img_thumb_height+'px"/></div>';summ=
summary_img;}}varsummary=imgtag+'<div>'+removeHtmlTag(div.innerHTML,summ)
+'</div>';div.innerHTML=summary;}
//]]></script>
</b:if>
</b:if>
<!AutoReadMoreAkhir>
Ket: Kata kuncinya adalah didalam kotak hitam "BLOG POSTS / POSTINGAN BLOG" jika
anda menggunakan bahasa indonesia.
Jika suda menemukan kode seperti gambar di atas silahkan klik anda panah kecil
warna hitam sebelah kiri.
Setelah tanda panah kecil di klik maka akan ada tampilan seprti gambar berikut
Setelah ketemu klik tanda panah yang lurus dengan kode tersebut.
<data:post.body/>
Setelah ketemu hapus kode diatas dan ganti dengan kode dibawah ini:
<!AutoreadmoreMulai>
<b:ifcond='data:blog.pageType=="item"'>
<data:post.body/>
<b:else/>
<b:ifcond='data:blog.pageType=="static_page"'>
<data:post.body/>
<b:else/>
<divexpr:id='"summary"+data:post.id'><data:post.body/></div>
<scripttype='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<divclass='readmore'>
<aexpr:href='data:post.url'>BacaSelengkapnya»</a>
</div>
</b:if>
</b:if>
<!AutoreadmoreAkhir>
Terlihat seperti sulit tetapi jika sambil di praktekan pasti bisa karena ini sudah sangat detail,
jika saya menjelaskan dengan singkat mungkin para blogger pemula tidak akan mengerti atau
kesusahan membuatnya.
sekian dulu sari saya untuk cara membuat readmore semoga bermanfaat dan jika masih ada
yang tidak dimengerti anda dipersilahkan untuk bertanya langsung.