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-1atau 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:
Lalu bagaimana jika ingin mengganti readmore jenis ke-1 atau jenis ke-2dengan auto readmore ini? Tunggu saja bahasan berikutnya sob... Udah cape nulis nih, hehehe...
Ok, segitu aja sob. Semoga bermanfaat .....
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 != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='readmore' style='float:right; font-style:italic'><a expr:href='data:post.url' expr:title='data:post.jumpText + " " + data:post.title'>Readmore...</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><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-2dengan auto readmore ini? Tunggu saja bahasan berikutnya sob... Udah cape nulis nih, hehehe...
Ok, segitu aja sob. Semoga bermanfaat .....
0 komentar:
Mohon Berkomentarlah dengan Baik dan Sopan
Maaf, jika ingin menyertakan url mohon di LINK saja ya (NO http://) atau komentar hanya sekedar promosi akan di hapus. Thank's ^_^
Posting Komentar