Cara Pasang Baca Selengkapnya Otomatis
Tip kali merupakan inspirasi setelah lihat website yang menggunakan Read more Otomatis tanpa menyisipkan atau memotong (cut) artikel anda di bawah kode <div class="fullpost"> yang terkadang bikin lama dalam membuat postingan artikel. Tidak sengaja jalan-jalan sama Paman Google dan cari keyword Cara Pasang Read More Otomatis. Eh ternyata dapet juga, dan baca semua hasil keywordnya Cara Pasang Auto Read More Terbaru (Part 2). Alhasil ternyata masuk ke web kang o-om.com. Pas diperaktekin hasilnya memang memuaskan, contohnya disini.
Tidak percuma selama ini ikut jalan - jalan sama Paman Google yang selalu memberikan kepuasan tersendiri dan orang lain. Ucapan terima kasih kepada Kang o-om yang udah posting artikel Auto Read More.
Sepertinya langsung aja deh ke pokok permasalahan atau prakteknya.
1. Masuk ke blogger anda
2. Pilih Tab Tata Letak
3. Pilih Edit HTML
Perlu diperhatikan! Bagi anda yang sudah memasang Read more versi lama, termasuk saya sebelumnya menggunakan Read more versi lama, sebaiknya menghapus kode dibawah ini yang berwarna merah. Agar seperti template aslinya sebelum dipasang Read more versi sebelumnya.
<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'>Baca Selengkapanya/Read more</a>
</b:if>
<div style='clear: both;'/>
Setelah menghapus kode berwarna merah diatas, cari kode </head> lalu copy paste kode dibawah ini tepat diatas kode </head>
Langsung Paste kode dibawah ini:
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</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>
Kode disamping adalah jumlah karakter huruf
yang dapat anda tentukan sesuai dengan tampilan
yang anda inginkan, dari besar image atau
teks yang akan tampilkan
Kemudian cari kode <data:post.body/> dan ganti 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:left'><a expr:href='data:post.url'>Baca Selengkapnya/Read more - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/>
</b:if>
Jangan lupa Simpan dan lihat hasilnya.
Agar setiap membuat postingan baru tidak muncul kode
<span class="fullpost">
</span>
Sebaiknya anda hapus pada Pengaturan - Formating dan hapus kode
<span class="fullpost">
</span>
Pada kotak Post Template.
Selamat Mencoba.
