Cara Membuat Read More Otomatis pada Template Blogger *NEW*

Sebelumnya pernah muncul cara membuat read more, namun masih dengan cara manual. Alangkah ribetnya jika setiap kita posting, harus menyertakan script di setiap postingan. Nah, kalau blog sobat udah lama tuh, alias udah banyak postingan. Apakah sobat harus tambahin satu per satu script disetiap postingannya. :D

Oiya, kalau saya sudah terlanjur memakai READ MORE Manual gimana?

Semua sudah diatur sobat FALOPU, mudah kok caranya. Karena tinggal ganti aja kode di SCRIPT 2.

Oke, langsung prakteknya aja ya...

Seperti biasa, sobat harus LOGIN blogger terlebih dahulu. Setelah masuk ke DASHBOARD, silahkan lihat gambar dibawah ini.

Nah... Setelah melihat gambar diatas, pasti sobat sudah mngerti caranya. Karena sudah disertakan juga cara untuk menaruh scriptnya juga. Jika sudah mengerti disini, lanjut ke bagian scriptnya.

SCRIPT 1
Sobat tekan F3 atau CTRL + F, lalu ketik  </head>.Taruh saja SCRIPT 1 tepat diatasnya.

Copas script berikut ini::

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 150;
summary_img = 150;
img_thumb_height = 100;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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(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>

SCRIPT 2
Sobat tekan F3 atau CTRL + F, lalu ketik <data:post.body/> atau <p><data:post.body/></p>

. Ganti script tersebut, menjadi script dibawah ini.

Script Read More Dengan Menggunakan Gambar:

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

<span style='float:right'><a expr:href='data:post.url'><img alt='Read More..' src='https://lh5.googleusercontent.com/-ick52d1aASg/T9gDc0Pl5II/AAAAAAAAAdQ/4gUavkUuaWU/s59/read%2520more%2520otomatis.jpg'/></a></span> 

<b:else/>

<data:post.body/>

</b:if>

Script Read More Dengan Menggunakan TEXT:

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

<span style='float:right'><a expr:href='data:post.url'>Read More..</a></span> 

<b:else/>

<data:post.body/>

</b:if>

Untuk Read More Yang GAMBAR.
Silahkan Ganti Code: https://lh5.googleusercontent.com/-ick52d1aASg/T9gDc0Pl5II/AAAAAAAAAdQ/4gUavkUuaWU/s59/read%2520more%2520otomatis.jpg
Dengan Gambar Sesuai Karakter Sobat.

Langkah Terakhir, Simpan. :D
Mudah bukan.

Oiya... Buat yang sudah memakai Read More Manual. Silahkan Ganti Srcipt berikut ini dengan Script 2.

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Read More...</strong></a></p>
</b:if>

Jika sobat mengalami kesulitan mengatasi Cara Membuat Read More Otomatis pada Template Blogger *NEW*. Silahkan Berikan komentar anda. Kami akan segera melayani sobat.