Menambahkan Auto Readmore (Readmore Otomatis) Pada Blogspot

Browse » Home » HTML Tutorials » Menambahkan Auto Readmore (Readmore Otomatis) Pada Blogspot

Menambahkan Auto Readmore (Readmore Otomatis) Pada Blogspot

Ditulis oleh Kang eNeS Minggu, 24 Juli 2011. 07.03
Label: HTML Tutorials komentar (21)

Setelah Tabview Section, yang telah dibahas beberapa hari lalu, ilmu lain yang saya peroleh dari hasil ngoprek blog saudara adalah membuat auto readmore (readmore otomatis). Dibanding membuat readmore jenis ke-1 atau jenis ke-2, auto readmore ini lebih enak diterapkan, terutama bagi yang merasa kesulitan atau merasa ribet dalam melakukan pemenggalan paragraf untuk readmore, karena auto readmore ini akan melakukan pemenggalan sendiri secara otomatis.

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 = jumlah karakter yang ditampilkan jika artikel tidak memakai gambar (misal: 700 karakter)
summary_img = jumlah 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>
```
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 .....

Menambahkan Auto Readmore (Readmore Otomatis) Pada Blogspot

Artikel Terkait Dengan HTML Tutorials

21 komentar Posting Komentar

Tambahkan Komentar

10 Artikel Terbaru

10 Artikel Terpopuler

Blog Tutorials

Seputar SEO

HTML Tutorials

CSS dan Javascript

Komputer dan Internet

Agama

Politik

Sosial Budaya

Sekedar Coretan

Yang Baru Dari Sastra Culun

Direkomendasikan Teman Facebook

21 komentar
Posting Komentar