Memasang auto Read More

Fitur read more adalah sebuah fitur yang memungkinkan setiap artikel yang tampil di halaman utama blog akan terpotong artikelnya dan ada link yang menuju ke artikel yang tidak terpotong atau lengkap? (agak bingung jelasinnya). biasanya, blog yang memiliki fitur read more, tampilan setiap artikel pada halaman utama tidak lengkap, biasanya ada link "Read more, Baca Selanjutnya, dll". Fitur read more ada yang manual dan otomatis. read more manual, kita harus mengatur sendiri di bagian mana yang akan dipotong dalam artikel. sedangkan fitur read more otomatis, kita tidak perlu mengatur potongan artikel. fitur read more sendiri juga akan menambah keindahan blog.

Untuk memasang read more manual, blogger telah menyediakan fitur yang dapat memotong artikel kita. fitur ini tersedia pada post editor terbaru terbaru. Kalian bisa merubah post editor terbaru pada blog kalian apabila masih menggunakan post editor yang lama. Berikut ini cara membuat read more secara manual.

1. Setiap editing artikel, di bagian atas tersedia post editor. klik ikon yang bergambar kertas terpotong. letaknya pada bagian paling kanan.

2. Setelah diklik, akan muncul potongan pada cursor. Bagian atas potongan adalah bagian artikel yang muncul pada halaman utama. sedangkan bagian bawah potongan adalah yang tidak muncul pada halaman utama.

3. selesai, tinggal terbitkan artikelnya.

Untuk memasang read more otomatis, diperlukan penanaman script pada template, namun tidak terlalu rumit. Kelebihan read more otomatis adalah kita tidak perlu memotong-motong artikel untuk menentukan bagian mana yang akan ditampilkan dan tidak ditampilkan. Berikut ini cara membuat read more otomatis atau auto read more.

Tutorial Pemasangan
1. Menu Dashboard, klik Tata Letak, klik Edit HTML.

2. Centangin checkbox Expand Widget Template.

3. copy paste kode berikut ini sebelum atau di atas kode </head> :

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

4. Cari kode <data:post.body/> lalu ganti dengan kode berikut :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>Read More...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

5. klik Simpan.

Fitur read more otomatis sudah jadi, untuk penjelasan script bisa dilihat di bawah ini :

• summary_noimg = 250; menentukan jumlah karakter sebelum dipotong apabila postingan tanpa gambar.
• summary_img = 250; menentukan jumlah karakter sebelum dipotong apabila postingan dengan gambar.
• img_thumb_height = 120; menentukan tinggi gambar(dalam ukuran pixel)
• img_thumb_width = 120; menentukan lebar gambar(dalam ukuran pixel)

Tulisan read more...(yang berwarna merah) bisa kalian ganti dengan tulisan apa saja seperti "baca selanjutnya","Kisah selanjutnya",dll. Kalian juga bisa mengganti tulisan read more dengan gambar. cara mengganti tulisan read more dengan gambar lihat petunjuk di bawah ini :

Pada tutorial nomor 4, tulisan Read More... kalian ganti dengan kode berikut:

&lt;img src="URL GAMBAR"&gt;

Setelah kalian ganti, tulisan tadinya Read More... berganti menjadi sebuah gambar.

Sekian tips dan trik mempercantik blog memasang fitu read more. selamat mencoba dan semoga bermanfaat!

Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks