[ TIPS ] Menambahkan Fungsi Read More pada Blog

Selamat Sore Rekan Blogger,gimana kabar anda saat ini ?? semoga baik-baik saja ya, sore ini saya ingin sedikit memberikan tips kepada rekan blogger. biasanya kalau kita baru membuat Blog Pada Blogspot khususnya dan menggunakan template bawaan dari blogger itu tampilan posting yang muncul pada saat user membuka blognya sangat panjang jadi terlihat tidak rapi.

Sebelumnya saya sudah pernah membahasa tentang cara mempersingkat postingan dengan menambahkan fungsi Read More tapi sepertinya cara tersebut tidak efektif dan terlihat sangat merepotkan karena banyak pengaturan sana-sini buang-buang waktu.Sekarang saya akan memberikan Tips atau Trick untuk menambahkan fungsi Read More Pada Blog Anda tentunya hanya dengan 2 langkah saja.

berikut caranya :

Sebelumnya Login Pada Blogger Anda,kemudian setelah masuk di area DASBOR masuk ke area RANCANGAN - EDIT HTML. setelah itu centang pada kotak disebelah tulisan Expand Template Widget hal ini dilakukan agar dapat melakukan peng-editan.

Langkah Pertama :
Pada area HTML cari code <data:post.body> ,untuk cara cepatnya gunakan saja CTRL+F. Setelah ketemu hapus code tersebut dan ganti dengan code berikut :

<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:right'> <a expr:href='data:post.url'>Baca Selengkapnya..</a> </span> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/> </b:if>

Selesai langkah pertama,dan sekarang kita masuk ke langkah kedua.

langkah Kedua :
Dengan menggunakan cara yang sama cari code </head> ,setelah ketemu letakan code berikut diatas code </head> tsb.

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 500;
summary_img = 400;
img_thumb_height = 150;
img_thumb_width = 150;
</script>
<script type='text/javascript'>
//<![CDATA[
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>

Selesai sudah 2 langkah untuk membuat fungsi Read More pada Blog Anda.

catatan :

* kata yang saya beri huruf merah Baca Selengkapnya itu dapat anda rubah sesuai dengan keinginan anda.
* summary_noimg = 500; => banyaknya kata yang nantinya akan dipotong sebelum kata read more dengan posting tanpa gambar
* summary_img = 400; => banyaknya kata yang nantinya akan dipotong sebelum kata read more dengan posting dengan ada gambar
* img_thumb_height = 150; dan img_thumb_width = 150; => ukuran gambar yang akan ditampilkan.