Sebenarnya banyak sekali tutorial tentang read more yang tersebar di rumah mbah google, tapi apa salahnya cyber man ikut membahas tentang itu siapa tau ada diantara cyber mania yang sedang membaca postingan ini tapi belum memahami tentang read more otomatis ini. Sebelumnya pada tutorial cyber man telah dibahas tentang Membuat Read More Pada Template Baru dan Cara membuat read more Versi Manual.
Pada kesempatan kali ini cyber man ingin mengembangkan tutorial read more dengan menjelaskan tentang bagaimana cara membuat read more secara otomatis. Pada jenis read more awal, kita harus membagi dua bagian setiap kita posting dan harus memasukan kode di setiap penggalan posting dan akhir posting. Tapi untuk versi otomatis ini, kita sudah tidak perlu melakukan aktivitas tersebut karena secara otomatis postingan akan terpenggal dan ada kata-kata read more di setiap penggalan.
Langsung saja kita capcups ke cara pembuatannya :
- Silahkan login ke blogger terlebih dahulu.
- Klik Tata Letak.
- Kemudian klik Edit HTML.
- Centang Expand Template Widget.
- Letakkan kode berikut ini tepat diatas 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>
<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>
6. yang sudah pernah menggunakan Cara membuat read more Versi Manual (manual), sebaiknya sobat kembalikan dulu kodenya seperti semula. Hapus kode yang saya tandai dengan warna merah di bawah ini, sesuaikan dengan template sobat, karena setiap template berbeda - beda :
<div class='post-header-line-1'/>
<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;'/>
<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;'/>
sehingga sekarang hanya ada satu <data:post.body/>
7. Kemudian hapus kode :
<data:post.body/> atau <p><data:post.body/></p>
<data:post.body/> atau <p><data:post.body/></p>
8. 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 sobat ganti dengan tulisan Baca Selengkapnya / Baca Selanjutnya / atau apa saja yang sobat inginkan.
Baca juga artikel terkait :
- Membuat Read More Pada Template Baru
- Cara membuat read more Versi Manual.
- Read More Icon - Cara Mengganti Read More Dengan Icon
maksih ya ats informasinya...
jngn lpa mampir di http://recha-seprina.blogspot.com/