Cara Pasang Read More Otomatis Di Blog Post

|
Membuat Fitur Read More di blog mungkin sudah tidak asing lagi bagi blogger Master, yaitu fitur blog untuk menyembunyikan sebagian artikel blog yang akan ditampilkan di Page Home blog.

Baik langsung saja, berikut cara yang anda butuhkan untuk membuat Read More Otomatis.

1. Login ke akun Blogger anda

2. Klik pada tab Tata Letak

3. Lalu klik tab Edit HTML

4. jangan lupa Beri tanda centang pada kotak kecil Expand Template Widget

5. Copy kode berikut tepat di atas kode </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 300; summary_img = 301; 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");
if(img.length<1) {
imgtag = '<span style="float:right; padding:0px 0px 5px 10px;"><img src="http://2.bp.blogspot.com/_0Nr--qemD8Y/TCLunoOn0SI/AAAAAAAAAsU/PFNWur48hKg/s1600/def-thumb.png" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
var summ = summary_noimg;
}
if(img.length>=1) {
imgtag = '<span style="float:right; padding:0px 0px 5px 10px;"><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>

Ket:
summary_noimg = 300 menunjukkan jumlah karakter yang akan ditampilkan tanpa gambar
summary_img = 301 menunjukkan jumlah karakter yang ditampilkan termasuk gambar
img_thumb_height = 150 menunjukkan tinggi gambar thumbnail
img_thumb_width = 150 menunjukkan lebar gambar thumbnail
float:right menunjukkan posisi gambar thumbnail di kanan. Jika anda ingin gambar thumbnail berada di kiri ganti right menjadi left
img src="http://2.bp.blogspot.com/_0Nr--qemD8Y/TCLunoOn0SI/AAAAAAAAAsU/PFNWur48hKg/s1600/def-thumb.png" adalah gambar Read More yang muncul. Anda bisa mengganti Kode Gambar tersebut, bila anda memilik gambar yang unik.

6. Kemudian cari kode <data:post.body/> atau <p><data:post.body/></p> Untuk memudahkan pencarian gunakan Ctrl+F.

7. Ganti kode tersebut dengan kode dibawah ini

<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:left'><a expr:href='data:post.url'><b>Read more &#187;</b></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><p><data:post.body/></p>
</b:if>
8. Simpan
Silahkan Modifikasi kode-kode di atas seusai keinginan anda.

3 komentar:

  1. makasih om tutornya. tapi kenapa jarak antara 1 postingan dan postingan lainnya tetap jauh ya??? bisa bantu gak om???

    thanks a lot

    BalasHapus
  2. gan..saya mau tanya..saya kan pingin bikin blog baru..saya udah coba tutor dari om,,rencana saya pingin d bikin read more nya di Edit Laman,bukan di Edit Endtri,di Edit Laman tapi saya cuma bisa masukin 1 postingan yang pake Read More..kalo posting lagi bisa tapi tapi Read More nya jadi satu sama postingan pertama...

    nah saya mau tanya caranya biar postingan kedua bisa d read more terpisah gimana ya??tapi dalam satu Edit Laman..kalo dari Edit Entri kan gampang tinggal bikin Entri Baru

    bales di email saya ya om = abdurrobia@yahoo.com

    BalasHapus

Next Prev
▲Top▲