Auto Read More

Oleh : Muhammad Badrushshalih

Siapa seh yang gak pusing kalo ngeliat blog yang pada halaman depannya berisi full tulisan. Padahal kita cuma nyari artikel yang haya berkaitan dengan apa yang kita cari. Mata capek ngelihatnya, belum lagi tangan kita yang sibuk nge-roll mouse sampe ketemu artikel yang kita maksud. Nah ini dia fiture gadget yang bisa digunakan untuk memotong tulisan pada blog kita menjadi lebih ringan dan lebih asyik untuk dilihat. Namanya Auto Read More

Kalo dulu seh pernah dapet cara yang Badroe rasa sulit banget untuk nampilinnya. Harus rubah inilah, masukin script itulah. Pokoe, ribet buanget. Nah...ini salah satu cara membuat bagaimana tulisan pada blog Anda menjadi lebih enak dilihat dengan tampilan adanya potongan pada beberapa baris tulisan kita dan gak ribet. Karena ini bersifat otomatis berlaku pada semua postingan artikel kita sebelumnya. Namanya juga Auto Read More. Jadi secara otomatis akan menjadikan semua tulisan yang telah kita tulis sebelumnya sama seperti tulisan-tulisan yang akan kita publish. Bingung maksudnya apaan??Ya, itu loh tulisan yang biasanya berupa link dengan tulisan readmore/baca selanjutnya/baca selengkapnya/next pada akhir tulisan yang terpenggal. Contonya bisa lihat pada gambar di atas tulisan Baca Selanjutnya - Batik Cirebon. Nah, kalo mau tau lebih jauh caranya simak terus tulisan yang Badroe dapet dari o-Om. 

Pertama, silahkan masuk ke halaman EDIT HTML dan download kode tersebut terlebih dahulu mencegah kegagalan kita dalam proses merubah Auto Read More ini dan beri tanda centang pada  "Expand widget template.

Cari kode </head> kemudian letakan script di bawah ini 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 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>

Setelah menempelkan script di atas, cari kode <data:post.body/>. Kemudian ganti kode <data:post.body/> dengan kode 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 == &quot;item&quot;'><data:post.body/></b:if>

Terakhir simpan (save) dan lihat hasilnya.

Note:

1. var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
2. summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan diposting tanpa gambar / thumbnail)
3. summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan diposting dengan gambar / thumbnail)
4. img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
5. img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)
6. READ MORE, dapat diganti menjadi kalimat yang anda inginkan seperti; baca selanjutnya, atau next

Selamat mencoba dan salam sukses