CARA PASANG READ MORE (bag 2)

Read More bag ke 2 ini berbeda dengan Read More bag 1, fungsi Read More kali akan secara otomatis memotong tulisan artikel/postingan sesuai kehendak kita. Cara Read More ini saya pikir lebih efisien dibandingkan dengan cara yang pertama, dimana kita harus mengganti secara manual, atau memasukkan kode setiap kali kita akan memposting sebuah artikel, walaupun Read More bag 1, dengan cara menambah kode di bagian setting di dashboard blogger. Akan tetapi kode Read More kali ini akan secara otomatis membuat tampilan beberapa posting kita menjadi lebih rapi, lebih dinamis dan yang paling penting sangat mudah bagi kita untuk memodifikasinyanya, ini penting soalnya bagi yang baru mengenal script kode seperti saya ini akan dengan mudah memodifikasi kode tersebut.

Bagaimana kalau anda sudah terlanjur menggunakan kode untuk cara pasang read more bag 1 ? Kalau anda sudah terlanjur menggunakan kode bagian 1, caranya lihat beberapa kode dibawah ini,

<div class='post-header-line-1'/>
<div class='post-body'>
<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/></p>
<a expr:href='data:post.url'>Read More ...</a>
</b:if>
<div style='clear: both;'/>

Simpan/backup dahulu template anda, kemudian hapus kode yang saya tandai dengan warna merah. Pada beberapa kode anda mungkin berbeda, tapi pada intinya strukturnya sama. Kalau sudah bisa kita coba dahulu, apakah fungsi Read Morenya bisa ber fungsi atau tidak. Kalau tidak berarti sukses..... Selanjutnya kita akan memasang kode untuk Read More cara yang kedua. Silahkan langsung ke halaman EDIT HTML. Cari kode </head>, kalau susah tekan saja Ctrl + F , kemudian letakan kode script berwarna hijau dibawah ini di atas kode </head>. Kalau sudah, jangan lupa di simpan terlebih dahulu.

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

Keterangan:

var thumbnail_mode = "float"; (kita dapat menentukan letak thumbnail/image/gambar/foto berada di kiri (float) atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 450; (Menentukan jumlah karakter huruf yang akan ditampilkan tanpa thumbnail/image/gambar/foto)
summary_img = 450; (Menentukan jumlah karakter huruf yang akan ditampilkan thumbnail/image/gambar/foto)
img_thumb_height = 125; (Tinggi thumbnail/image/gambar/foto dalam pixel, yang akan ditampilkan)
img_thumb_width = 125; (Lebar thumbnail/image/gambar/fotodalam pixel, yang akan ditampilkan)

Oke.. kita lanjutkan lagi, masih pada halaman EDIT HTML, Beri tanda centang/contreng pada "Expand Widget Template" lalu cari kode seperti dibawah ini

<data:post.body/>

Ganti kode <data:post.body/> diatas dengan semua kode berwarna hijau dibawah ini

<b:if cond='data:blog.pageType != "item"'>
<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 - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Keterangan :
<span class='rmlink' style='float:left'> (Kita dapat menentukan posisi Link READ MORE rata kiri = left, kanan = right, rata tengah = center)

Silahkan disimpan dan lihat hasilnya :)

SELAMAT MENCOBA...
SEMOGA SUKSES...