Cara Membuat Auto Read More di Blog

Cara Membuat Auto Read More ~ 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.

Auto read more ini juga mempercantik blog dengan menampilkan image thumbnail berupa image paling pertama di setiap artikel meskipun gambar tersebut diletakkan ditengah bahkan diakhir postingan.

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>

3. 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)


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.

Jika berhasil dalam pemasangan auto read more blog anda, maka tampilannya akan tampak seperti gambar di bawah ini :

Selesai sudah Cara Membuat Auto Read More Otomatis (thumbnails) semoga dapat memberikan manfaat untuk blog maupun website anda, salam blogger.