Membuat Read More Otomatis
Sabtu, 26 Desember 2009
00.28
Label: Artikel lainnya.. , Ngblogg yuk.. , Tips dan Tricks , 2 komentar
Label: Artikel lainnya.. , Ngblogg yuk.. , Tips dan Tricks , 2 komentar
Pada postingan kali ini saya akan menjelaskan bagaimana cara membuat read more secara keseluruhan untuk semua postingan yang kita buat, agar terlihat lebih rapi pada tampilan home atau tampilan utama. Berikut langkah – langkah dalam membuat read more otomatis :
- Silahkan login ke blogger terlebih dahulu.
- Klik Tata Letak.
- Kemudian klik Edit HTML.
- Centang Expand Template Widget.
- Letakkan kode berikut ini, tepat dibawah kode </head> :
<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 450; summary_img = 360; img_thumb_height = 120; img_thumb_width = 150; </script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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>
- Untuk yang sudah pernah menggunakan read more sebelumnya atau yang secara manual, sebaiknya kalian kembalikan dulu kodenya seperti semula. Kemudian hapus kode yang saya tandai dengan warna biru di bawah ini, sesuaikan dengan template kalian, karena setiap template berbeda - beda :
<div class='post-header-line-1'/>
sehingga sekarang hanya ada satu <data:post.body/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>
- Kemudian hapus kode :
<data:post.body/> atau <p><data:post.body/></p>
- Ganti kode tersebut dengan kode berikut ini : <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 == "item"'><data:post.body/></b:if>
- Kemudian Simpan Template.
Keterangan :
- summary_noimg = 450 –-> untuk tinggi postingan tanpa gambar.
- summary_img = 360 –-> untuk tinggi postingan dengan gambar.
- img_thumb_height = 120 –> tinggi gambar.
- img_thumb_width = 150 –> lebar gambar.
- Read More… –> bisa kalian ganti dengan tulisan Baca Selengkapnya / Baca Selanjutnya / atau apa saja yang kalian inginkan.
Referensi:
http://miscah.blogspot.com/2009/09/cara-membuat-read-more-otomatis.html
