Membuat Menu Auto Readmore Pada Artikel Blogger

Menu readmore pada blogger merupakan sebuah alternatif untuk menyembuyikan sebagian artikel agar blog kita terlihat lebih rapi dan nyaman. Saya yakin sebagian besar para blogger sudah menggunakan menu readmore, tapi mungkin sebagian masih menggunakan cara manual dengan menambahkan beberapa script ke dalam postingan agar bisa memunculkan menu readmore pada postingan tersebut. Berikut ini cara agar menu readmore muncul secara otomatis, kita hanya perlu mengatur beberapa pengaturan dasar diataranya berapa huruf yang kita tampilkan, bagaimana jika ada gambar, jika tanpa gambar, panjang dan lebar thumbnail dari gambar.

Oke langsung saja.

Warning!!!

Bagi rekan-rekan yang sudah menggunakan cara lama untuk menampilkan menu readmore berikut ada hal yang harus diperhatikan.
Cari kode di bawah, tapi tidak semua template persis sama, sesuaikan dengan template rekan-rekan.

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

Hapus semua kode kecuali kode yang di blog warna hitam.
Jika sudah tidak ada lagi masalah....kita lanjutkan.
Langkah 1

Login ke Blogger Go to Design + Edit HTML pada Blogger dashboard dan centang pilihan "expand widget templates" box. Cari kode </head> selanjutnya copy paste kode di bawah ini tepat diatasnya.

<script type='text/javascript'>var thumbnail_mode = "no-float" ;

summary_noimg = 430;

summary_img = 340;

img_thumb_height = 100;

img_thumb_width = 120;

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

Sesuaikan pengaturan berikut sesuai dengan selera rekan-rekan blogger, jika di biarkan juga tidak ada masalah

summary_noimg = 430; Karakter yang ditampilkan tanpa gambar
summary_img = 340; Jumlah karakter yang ditampilkan jika terdapat gambar
img_thumb_height = 100; Tinggi Thumbnail gambar
img_thumb_width = 120; Lebar tumbnail gambar
Berikut ini adalah contoh dimana terdapat gambar pada artikel.

Langkah 2

Temukan kode berikut  <data:post.body/> Ingat gunakan menu find untuk mecari kode tersebut.
Setelah ketemu, replace/ganti kode tersebut dengan kode di bawah.

<b:if cond='data:blog.pageType == "static_page"'><br/>

<data:post.body/>

<b:else/>



<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:right;padding-top:20px;'><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>

</b:if>

Ok selamat mencoba, semoga berhasil, jika ada yang m asih kurang jelas bisa kita diskusikan.


Wassalamualaikum wr. wb