Cara Membuat Read More Blog dengan Mudah

Share

Pada halaman pertama blog atau halaman branda, jumlah default post yang ditampilkan adalah tujuh post (Silahkan lihat bagian setting di bagian dashbor blog sobat). Kalau ke tujuh postingan sobat blogger ditampilkan pada satu halaman, sudah pasti antara header dan footer blog terdapat jarak yang cukup jauh. Hal itu membuat penampilan blog sobat terlihat kurang indah. Jadi apa yang harus dilakukan? Sobat harus memenggal setiap postingan blog sobat dengan cara “Membuat Read More”. Read More adalah sebuah fitur pemenggal postingan pada halaman depan atau branda suatu blog. Jika title atau link read more di klik, maka postingan penuh akan tampil. Oleh karena itu, Rinjani Lovers akan memberikan Tutorial Blog tentang cara membuat read more. Ikuti langkah di bawah ini untuk membuat Read more blog.

• Login ke blogger sobat di www.blogger.com
• Pilih menu Rancangan --- > Edit Html.
• Kasih tanda centang pada Expand Template Widget
• Copy kode berikut:

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

 

• Paste kode tersebut di atas kode </head>
• Selanjutnya, Cari kode <data:post.body/>
• Kalau sudah ketemu, ganti kode <data:post.body/> dengan kode di bawah ini

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><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</a></span>

</b:if>

<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

</b:if>

 

• Save atau simpan template sobat

Keterangan Kode di atas:

1. summary_noimg = 430 = Post terpotong tanpa Gambar
2. summary_img = 340 = Post terpotong tetap menggunakan gambar
3. img_thumb_height = 100 = Tinggi Gambar
4. img_thumb_width = 120 = Lebar Gambar

 

 

Artikel Terkait: