Cara ini berbeda dengan read more yang biasanya. Karena apa? Pertama, sobat gak usah repot-repot lagi nyisipin kode <span id=”fullpost”> dan </span> untuk memotong artikel yang akan ditampilkan. Yang kedua, gambar yang ada di artikel sobat, walaupun sobat letakkan ditengah atau dibawah akan tetap tampil di atas dan samping artikel pada halaman home. Tidak seperti read more yang sebelum. Jika gambar diletakkan ditengah atau dibawah maka gambar tidak akan muncul di halaman home. jadi kita terpaksa harus menaruh gambar diposisi paling atas artikel. Ya.. pada beberapa artikel, hal ini akan merusak desain tata letak postingan. Yang ketiga, kita akan dipusingkan dengan posisi potongan artikel. pengalaman fedoce dulu saat menggunakan read more jadul jadi sering artikel tetep gak bisa kepotong, jadi harus ngulang ngeletakkin kode <span id=”fullpost”> dan </span> kemudian posisi potongan halaman home juga tidak rapi, apa lagi ukuran foto.. wah.. amburadul.. beda dengan read more otomatis yang fedoce pake sekarang. Liat aja di halaman home fedoce, rapi kan?
Duh, capek ni curhat
langsung aja ke tahap cara membuat read more otomatis.
- Login bloger lalu masuk ke Dashboard,lalu pilih Tata Letak dan kemudian pilih Edit HTML, centang tulisan Expand Widget Templates dan jangan lupa Download Full Template untuk jaga-jaga.
- Cari kode dibawah ini. tekan CRL+F atau F3 untuk mencarinya.
</head> - Kemudian letakkan kode berikut ini tepat diatas kode tadi.
<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</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 - Setelah itu, cari kode dibawah ini.
<data:post.body/> - Setelah itu ganti kode tadi dengan kode dibawah 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;padding-top:20px;'><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 save template dan selesai…
Tampilan ukuran gambar dan potongan artikel pada halaman home bisa sobat ganti dan sesuaikan dengan mengganti nilai kode di bawah ini :
summary_noimg = 430; adalah tinggi potongan artikel tanpa gambar
summary_img = 340; adalah tinggi potongan artikel dengan gambar
img_thumb_height = 100; adalah ukuran tinggi thumbnail
img_thumb_width = 120; adalah ukuran lebar thumbnail
Untuk read more bisa sobat ganti sesuai keiinginan sobat, misal baca selengkapnya ato gak usah baca, bahaya!! hehehehe.. bisa juga sobat ganti dengan gambar. baca disini untuk tutorialnya. Sekian aja artikel Cara membuat read more otomatis fedoce. Selamat mencoba. Semoga berhasil, GOOD LUCK!
