Cara membuat Auto Readmore ( Baca Selanjutnya) Tanpa Javascript lainnya

Auto Readmore

Untuk membuat auto readmore atau baca selengkapnya sesuai dengan gambar milik kita tentu merupakan satu hal yang beda dengan postingan situs lainnya. Disini kita bisa membuat menganti kata auto readmore sesuai dengan tulisan kita misal baca terus atau baca selanjutnya. berikut cara membuat auto readmore dengan gambar yang kita miliki. (untuk mempermudah silahkan lihat video )

Cara membuat Auto Readmore ( Baca Selanjutnya) Tanpa Javascript lainnya

1. Login ke akun blogger anda

2. Dashboard > Design > Edit HTML

3. Backup template demi keamanan

4. Cari kode </head> dan paste kode dibawah ini setelah kode tersebut

<!-- Auto read more Start -->

<script type='text/javascript'> var thumbnail_mode = "yes"; //yes - dengan thumbnail, no -tanpa thumbnail

summary_noimg = 456;

summary_img = 345;

img_thumb_height = 134;

img_thumb_width = 134;

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

<!-- Auto read more End -->

5. Setelah paste kode diatas selanjutnya cari kode <data:post.body/> , biasanya terdapat beberapa buah kode tersebut dan pergunakan kode yang kedua.

Selanjutnya ganti kode tersebut dengan kode dibawah ini:

Sebelumnya kita buat gambar untuk read more dan buka laman dan buat laman baru

jika tidak ingin menganti gambar read more juga tidak apa-apa.

<!-- Auto read more Start -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<data:post.body/>

<b:else/>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

<data:post.body/>

<b:else/>

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

<a class='more' expr:href='data:post.url'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwIkbYSjKSKL75AgeoSU3z5Aqny-p-LA3_E4xQ2IFHbdxmJth3KoYpmEh7NpZrq1S-GATYKj2mcflRBmWHGGN5OGwVGSkfY1YU8vo8NrXU-SRrWx9tFwwIvGHqoMCWCrYIHAX3nVog4gcT/s1600/gambar+read+more.png'/></a>

</b:if>

</b:if>

<!-- Auto read more End -->

6. Silahkan "save" template

Semoga bermanfaat.  Bye byee

File ini dapat di download di :

https://docs.google.com/uc?export=download&id=0B-p0CYANJ-GOS0d5ckY5dVAzdUk