Membuat Read More v2.0

Read More sendiri berguna untuk menyingkat posting yang terlalu panjang disamping itu juga membuat blog lebih indah dipandang, Read More ini saya pakai dalam blog ini adapun kelebihan dan kekurangannya, untuk kekurangan terletak pada Entri Pages, karena dengan memasang script v2.0 yang agak jadul maka Posting pada Entri Pages tidak dapat menampakkan diri alias Link Mati, walaupun link Read More tersebut di klik 1000x tetap tidak akan menampakkan posting tersebut, kalau kelebihan terletak pada model postingnya mungkain kalau dilihat lebih bagus dan indah (menurut saya) cukuplah basa-basinya sekarang saatnya membuat Membuat Read More v2.0. 

Langkah 1

• Login ke Blogger
• Masuk ke "Rancangan - Edit HTML"
• Cheklist "Expand Template Widget"

Langkah 2

• Gunakan ctrl F untuk mencari kode </head>
• kemudian letakkan kode dibawah ini diatasnya

<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>

Keterangan:

• summary_noimg = 250;
• summary_img = 250;

Merupakan ringkasan posting

• img_thumb_height = 120;
• img_thumb_width = 120;

Merupakan Lebar dan Tinggi gambar, aturlah angka-angka tersebut sesuai selera anda

Langkah 3

• Kemudian cari kode <data:post.body/> biasanya ada 2 kode yang sama, maka carilah yang ke2 dan ganti 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 == "item"'><data:post.body/></b:if>

Dan terakhir klik Preview, jika sudah sukses maka klik Simpan Template

Mungkin itu saja tutorial kali ini, semoga bermanfaat dan jangan bosan-bosan berkunjung ke blog ini jika ada yang perlu ditanyakan tanyakan saja, saya akan berusaha menjawab pertanyaan anda tentang blogging

Sekian dari saya semoga berhasil dan sukses