Tutorial Membuat Readmore Pada Blogger

Readmore merupakan salah satu fitur penting pada sebuah blog. Adanya readmore membuat pengunjung dimudahkan untuk memilih artikel mana yang akan dibaca, karena saat ini banyak orang yang sangat menghargai waktu dan tidak ingin waktunya terbuang percuma hanya untuk scroll artikel-artikel yang tidak ingin dibaca yang mungkin saja sangatlah panjang.

Readmore pada blogger ada 2 versi, yaitu readmore manual yang peletakannya manual diantara postingan artikel, dan readmore otomatis yang secara otomatis membuat readmore tanpa setting berulag-ulang. Untuk tutorial kali ini akan dibahas tentang otomatis.

Langsung saja langkah-langkahnya sebagai berikut:
1. Masuk ke halaman blogger. Klik “Rancangan”.


2. Pilih “Edit HTML”.


3. Centang “Expand Template Widget”


4. Temukan kode dibawah ini. Untuk mempermudah bisa pakai Ctrl+F.

</head>

5. Letakkan script ini diatas kode </head>

 

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

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>

6. Temukan kode dibawah ini:

<div class='post-header-line-1'/>
<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/>

7. Ganti kode

<p><data:post.body/></p>

dengan

<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 == &quot;item&quot;'><data:post.body/></b:if>

8. Simpan dan lihat perbedaannya sekarang.

Bagaimana? Mudah bukan? Selamat mencoba!
Salam dari BangJohan!

by Facebook Comment untuk Anda!