Membuat Read More / Baca Selengkapnya

Dalam penbutan atau memposting artikel, biasanya artikel akan tampil sepenuhnya pada halaman awal blog kita. Supaya tampilan artikel pada blog hanya tampil sebagian, maka kita perlu mengutak-atik sedikit kode html pada tampilan blog kita.

Lihat gambar berikut, perhatikan link yang bertuliskan Baca Selengkapnya , dengan mengklik link tersebut maka pembaca akan melihat seluruh isi dari artikel tersebut.

Apakah anda berminat mencobanya, langsung saja ikuti langkah-langkah berikut:

1.       1. Login ke blogger dengan ID anda

2.       2. Klik Dashbor

3.       3. Klik Layout

4.       4. Klik Edit HTML

5.       5. Jangan lupa beri centang pada Expand Widget Template

6.       6. Selanjutnya, cari kode ]]></b/:skin>pada kode HTML blog anda. Untuk mempermudah pencarian tekan  Ctrl+F dan ketikkan kode yang akan anda cari

 7. Jika kode ]]></b/:skin> telah anda temukan, selanjutnya kitikkan script berikut tepat dibawah kode tersebut atau diatas kode </head>

<script type='text/javascript'>

var thumbnail_mode = &quot;no-float&quot; ;

summary_noimg = 430;

summary_img = 340;

img_thumb_height = 160;

img_thumb_width = 140;

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

 8. Setelah anda mengetikkan kode diatas, cari lagi kode <p><data:post.body/></p> untuk mempermudah pencarian, anda bias menggunakan cara seperti pada langkah 6.

1.       9. Setelah anda menemukannya, hapus kode tersebut lalu ketikkan script 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;padding-top:20px;'>

<a expr:href='data:post.url'>Baca Selengkapnya&#160;&#160;&#187;&#187;</a></span>



</b:if>

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



   </b:if>

2.       10. Setelah anda mengetikkan kode diatas silahkan simpan dan lihat perubahan tampilan blog anda.

Selamat mencoba……..!!!