-HEADLINE-
S-C Guest Book
Join This Site
XkresssX Technology Is Valid HTML5
  • Keep Strong And Fight Back
  • Xpress Community
  • Cleventer-Creation™
  • Link Exchange.
Posted by : Unknown Minggu, 26 Mei 2013

Cara Membuat Read More Otomatis di Blog










 Hay Sobat RESVANS56
 Kali Ini Sobat RESVANS56,Akan Shere ,Cara membuat
Read More Otomatis
Langsung aja dah






1. Login ke Blogger.
2. Pilih Template.
3. Klik Edit HTML > Lanjutkan.
4. Centang box 'Expand Template Widget'.
5. Cari kode </head> menggunakan CTRL+F.
6. Lalu, letakkan kode di bawah ini tepat diatas kode </head>.
<script type='text/javascript'>
(function() {
var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
})();
</script>

<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes-dengan gambar,no-tanpa gambar
summary_noimg = 300;
summary_img = 255;
img_thumb_height = 100;
img_thumb_width = 125;
</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");
var summ = summary_noimg;
if(thumbnail_mode == "yes") {
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>
Keterangan: 
  • 300 = jumlah karakter read more artikel tanpa gambar.
  • 255 = jumlah karakter read more artikel dengan gambar.
  • 100 = tinggi gambar artikel yang ingin ditampilkan pada read more.
  • 125 = lebar gambar artikel yang ingin ditampilkan pada read more.
7. Masih di Edit HTML, cari kode <data:post.body/>, jika ada 2 pilihlah kode yang ke-2.

8. Ganti kode <data:post.body/> yang ke-2 dengan kode di bawah ini.

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

9. Klik 'save template' dan selesai.

Bagaimana? mudah bukan membuat read more otomatis agar blog anda tampil lebih rapi dan proffessional.

Sumber: http://www.tuliskan.com/2013/03/cara-membuat-read-more-otomatis-di-blog.html#ixzz2UP1qdeio

Leave a Reply

Subscribe to Posts | Subscribe to Comments