Cara Membuat Readmore Otomatis Dengan Gambar

This document provides instructions to automatically add a read more feature with images to blog posts on Blogger templates. It involves copying and pasting code into the template HTML, then editing the post coding to add div wrappers and JavaScript to generate summaries and thumbnail images for posts. The read more text and a button are then added below the summary.

Uploaded by

Aldes Masendi

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

17 views

Cara Membuat Readmore Otomatis Dengan Gambar

Uploaded by

Aldes Masendi

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

You are on page 1/ 3

Cara membuat readmore otomatis dengan gambar

Silahkan buka template anda. Pilih: TEMPLATE >> EDIT.

Cari Kode </head>.

Copy paste kode dibawah ini tepat di atas kode </head>

<!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>

Save Template anda.

Kemudian scroll template anda kebawah cari kode seperti berikut:

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

Cari kode yang di tandai dengan kotak hitam. "POST' VAR='POST'".

Setelah ketemu klik tanda panah yang lurus dengan kode tersebut.

selanjutnya akan terbuka kode kode yang lain.

geser atau scrol ke bawah dan cari kode

<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>

Klik SAVE / SIMPAN dan lihat hasilnya.

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.