Membuat Read More Otomatis di Blog

Jika sebelumnya saya sudah menjelaskan cara membuat related post atau artikel terkait, kali ini saya akan berbagi cara membuat read more otomatis di blog. Read more otomatis ini berfungsi agar penulis tidak perlu repot-repot lagi memotong artikel saat membuat atau mengedit artikel, jadi tinggal dipublish aja. Readmore otomatis ini saya sudah terapkan dan berfungsi dengan baik di template bawaan blogger saya ini.

Langsung aja ke TKP ya hehe. Berikut adalah langkah-langkah membuat read more otomatis di blog.

1. Masuk blogger > Template > Edit HTML > Ctrl+F > cari kode berikut (Sebelumnya Backup dulu templatenya).

]]></b:skin>

2. Masukkan kode css berikut tepat di atas kode ]]></b:skin>

.readmorecontent{float:right;margin:5px 5px 0 0;padding:2px 0}
.readmorecontent a{color: #555;text-shadow: 0 1px 0 rgba(255,255,255,.5);border-width: 1px;border-style: solid;border-color: #fff #ccc #999 #eee; background: #c1c1c1;background: -moz-linear-gradient(#f5f5f5, #c1c1c1);background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#c1c1c1));background: -webkit-linear-gradient(#f5f5f5, #c1c1c1);background: -o-linear-gradient(#f5f5f5, #c1c1c1);background: -ms-linear-gradient(#f5f5f5, #c1c1c1);background: linear-gradient(#f5f5f5, #c1c1c1);  text-decoration:none;font-size:11px;padding:5px 7px}
.readmorecontent a:hover{text-decoration:none;color:#48d}

3. Cari kode berikut

</head>

4. Masukkan kode javascript berikut tepat di atas kode </head>

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 300;summary_img = 300;img_thumb_width = 180;img_thumb_height = 130;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(e,f){if(e.indexOf("<")!=-1){var g=e.split("<");for(var h=0;h<g.length;h++){if(g[h].indexOf(">")!=-1){g[h]=g[h].substring(g[h].indexOf(">")+1,g[h].length)}}e=g.join("")}f=(f<e.length-1)?f:e.length-2;while(e.charAt(f-1)!=" "&&e.indexOf(" ",f)!=-1){f++}e=e.substring(0,f-1);return e+"..."}function createSummaryAndThumb(k){var i=document.getElementById(k);var h="";var g=i.getElementsByTagName("img");var j=summary_noimg;if(g.length>=1){h='<span style="display:none;float:left;margin:0px 10px 5px 0px;"><img src="'+g[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';j=summary_img}var l=h+"<div>"+removeHtmlTag(i.innerHTML,j)+"</div>";i.innerHTML=l};
//]]>
</script>

5. Cari kode berikut

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
        <data:post.body/>

       
6. Hapus kode di atas dan ganti dengan kode berikut.

    <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&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>
<div class='readmorecontent'><a expr:href='data:post.url'>Read more &#187;</a></div>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

jadi kodenya akan seperti ini.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&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>
<div class='readmorecontent'><a expr:href='data:post.url'>Read more &#187;</a></div>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
      <div style='clear: both;'/> <!-- clear for photos floats -->

     
7. Save template dan lihat hasilnya. Gimana? berhasil ga? :)

Selamat mencoba ya. Jika ada kesalah mohon komentarnya ya buat masukan. Semoga langkah-langkah membuat read more otomatis di blog ini bermanfaat. Terima kasih. Semoga berhasil. Hehe.

Related:

Search Post

Label :