Advertisemen
Meneruskan cara membuat readmore, sebenarnya ada bermacam-macam cara untuk membuat readmore/baca selengkapanya, tentunya dengan gaya tersendiri. Kali ini saya akan membahas tentang bagaimana cara membuat readmore otomatis. dan pada fungsi read more kali ini sedikit berbeda dan lebih modern dengan memudahkan kita untuk tidak lagi membatasi artikel dengan panggilan kode script, dan sobat tidak akan repot membagi 2 postingan sobat dengan kode manual.Kali ini script read more diletakkan langsung di template tanpa menggunakan hosting untuk mencegah error saat webhosting yang kita gunakan untuk menyimpan kode script-nya sedang down/error.
Buat Sobat blogger baru, saya sarankan menggunakan read more otomatis saja ketimbang read more yang biasa. Karena tentunya sobat tidak akan repot membagi 2 postingan sobat dengan kode manual. seperti pada blog saya ini.
Oke langsung saja,
Berikut langkah – langkah dalam membuat read more otomatis :
1. Silahkan login ke blogger terlebih dahulu.
2. Klik Tata Letak.
3. Kemudian klik Edit HTML.
4. Centang Expand Template Widget.
5. 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. Penting : Untuk yang sudah pernah menggunakan read more versi lama (manual), sebaiknya sobat kembalikan dulu kodenya seperti semula. Hapus kode yang saya tandai dengan warna biru 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;'/>
7. Kemudian cari kode di bawah ini :
<data:post.body/> atau <p><data:post.body/></p>
8. Gantilah kode tersebut dengan kode di bawah 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:right'>
<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>
<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:right'>
<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>
9. Simpan template dan lihat hasilnya.
Keterangan :
var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 500; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 400; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 150; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 150; (Thumbnail 'lebar dalam piksel)
Read More… = bisa sobat ganti dengan tulisan Baca Selengkapnya / Baca Selanjutnya / atau apa saja yang sobat inginkan.
Selamat mencoba.
Advertisemen