twitter rss

Membuat Read More Otomatis di Blog

Label:

Namun sayangnya auto readmore ini sangat tidak cocok untuk tulisan berbentuk puisi, lirik, atau dialog, karena pemenggalannya didasarkan pada jumlah karakter yang ditentukan sehingga tulisan-tulisan tersebut akan terlihat seperti sebuah artikel yang tersusun dalam satu paragraf.

Jika kamu tertarik dan ingin membuat auto readmore ini, ikuti langkah-langkah berikut:

  • Dari dasbor, pilih Rancangan - Edit HTML.
  • Lakukan duplikasi template untuk jaga-jaga jika bermasalah.
  • Beri tanda checklist (centrang) pada Expand Template Widget.
  • Copy script berikut lalu letakkan (paste) di bawah kode </head> (antara </head> dan <body>):
<script type='text/javascript'>
summary_noimg = 700;
summary_img = 500;
img_thumb_height = 150;
img_thumb_width = 200;
</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>

Keterangan:
summary_noimg = jumlam karakter yang ditampilkan jika artikel tidak memakai gambar (misal: 700 karakter)
summary_img = jumlam karakter yang ditampilkan jika artikel memakai gambar (misal: 500 karakter)
img_thumb_height = tinggi gambar thumbnail (misal: 150px)
img_thumb_width = lebar gambar thumbnail (misal: 200px)
 
Setelah itu carilah kode berikut:
<p><data:post.body/></p>

Catatan:
  • Dalam beberapa template tidak memakai perintah paragraf (<p>), sehingga kodenya hanya <data:post.body/>.
  • Jika ada 2 kode, pilih kode yang pertama (yang paling atas).

 
  • Ganti kode tersebut dengan kode ini:
    <!-- Awal Readmore -->
    <p>
    <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='readmore' style='float:right; font-style:italic'><a expr:href='data:post.url' expr:title='data:post.jumpText + &quot; &quot; + data:post.title'>Readmore...</a></span>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
    </p>
    <!-- Akhir Readmore -->

    Catatan:
    Jika mau, kamu dapat mengganti perataan tek sebelah kanan (right) dengan kiri (left), atau mengubah style huruf italic dengan normal. Kamu juga bisa mengganti tulisan Readmore... dengan kata lain atau dengan gambar (image).
  • Simpanlah hasil editing ini dan ucapkan alhamdulillah...

Lalu bagaimana jika ingin mengganti readmore jenis ke-1 atau jenis ke-2 dengan auto readmore ini? Tunggu saja bahasan berikutnya sob... Udah cape nulis nih, hehehe...

Ok, segitu aja sob. Semoga bermanfaat .....




1 komentar
  1. Hilman Rahmat 26 Oktober 2011 pukul 11.45.00 WIB

    :a: hahaha
    :D

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( :-p =))

Posting Komentar

Langganan: Posting Komentar (Atom)