CARA MEMBUAT AUTO READ MORE OTOMATIS (THUMNAILS)

Auto Read More dengan thumnails merupakan gambar / kata disamping kalimat artikel blog yang terpotong / diperkecil dengan tambahan kalimat "Read More" atau "baca selengkapnya" atau pun kalimat lainnya yang mirip-mirip seperti itu.  Fungsinya adalah jika kita klik akan tampil dengan lengkap artikel yang terpotong sebelumnya, sehingga dapat dibaca keseluruhan artikel tersebut.

Tehnik memasang auto read more dianggap dapat membantu mempercepat loading blog karena bekerja secara otomatis dengan memenggal kalimat yang panjang dari postingan blog menjadi beberapa kata saja.

Jadi bagaimana cara membuat auto read more ? Mari perhatikan dan ikuti langkah - langkah di bawah ini untuk dapat memasang auto readmore di blog anda.

1. Masuk ke blogger, klik template , klik Edit HTML

2. Letakkan kode di bawah ini di atas kode </head> , cari menggunakan Ctrl+F

<script type="text/javascript">
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
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>

•  Cari kode <data:post.body/>  hapus kode tersebut dan ganti dengan kode di bawah ini

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<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 class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE &#8594; </a></span>
</b:if>
 <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if></b:if>

Kreatifitaskan auto read more sesuai kehendak dengan mengatur kode berikut :

var thumbnail_mode = "float";  memutuskan apakah letak thumbnail berada di kiri (float) atau jika tidak silahkan ganti dengan (no-float)

summary_noimg = 250; (berapa banyak karakter yang ingin ditampilkan di posting tanpa gambar / thumbnail)

summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)

img_thumb_height = 120; (tinggi thumbnail dalam ukuran pixel)

img_thumb_width = 120; (lebar thumbnail dalam ukuran pixel)

• Jika Kalian ingin menggunakan read more dengan gambar :

hapus kode ini <data:post.body/> atau <p><data:post.body/></p> dan ganti dengan kode dibawah 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>
<span style='float:right'><a expr:href='data:post.url'><img alt='Read More..' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibwyaKb6I9dc_yWqHGFu8_p_88HL-w-7-THYhRK6a8WJclw3leQneEbOIMCNtl5a_jOqGRNV6ZWU5pZp4h01PAg1ExTciMnEYu55ssN4FCKTBMvGx_XNY_EzfGVQg04jU035XrgpQDZzkc/s1600/black1.gif'/></a></a></span> 
<b:else/>
<data:post.body/>
</b:if>

tulisan yang berwanra merah itu merupakan gambar untuk read more , kalian dapat menggantinya sendiri . Jika kalian  ingin mengganti icon read morenya dengan gambar yang lain silahkan => Lihat Lebih Lanjut .

4. Dan tambahkan kode CSS berikut di atas kode ]]></b:skin agar bertambah menarik penampilan auto read more anda :

.rmlink a {
    background: none repeat scroll 0 0 #E37F52;
    border-radius: 4px;
    color: #FFFFFF !important;
    font-size: 10pt;
    font-weight: 700;
    line-height: 1;
    padding: 1px 3px 1px;
    text-transform: uppercase;
}

Ubah kode #E37F52 sesuai dengan selera anda, lihat kode warna html  untuk membantu anda mencari warna kesukaan.