Membuat Readmore Otomatis-Readmore atau baca selengkapnya merupakan salah satu teknik posting yang hanya menampilkan bagian depan dari artikel pada halaman utama blog. Cara ini banyak disukai blogger termasuk saya, karena dapat menampilkan cuplikan beberapa artikel di halaman utama tanpa menyita banyak tempat. Dengan demikian pengunjug dapat memilih alternatif artikel yang paling dicari dari beberapa cuplikan artikel yang ada di halaman utama. Nah kalau pada kesempatan sebelumnya saya sudah sharing tentang cara membuat form kontak, maka kali ini sya ingin berbagi pengalaman saya saat membuat readmore otomatis. Mengapa harus memilih readmore otomatis? Readmore otomatis tidak perlu menuliskan readmore/baca selengkapnya di setiap menuliskan artikel.Readmore otomatis hanya sekali setting seterusnya berjalan otomatis, pemenggalan paragraf/kalimat berjalan dengan sendirinya. Jika sobat berminat berikut ini langkah-langkahnya;1. Login ke blogger dengan ID Anda
2. Setelah di Dasbor klik Rancangan lalu klik Edit HTML
3. Untuk mengantisipasi hal-hal yang tidak diinginkan saat memasang kode html, backup dulu blog Anda dengan klik Download template lengkap.
4. Jangan lupa centang kotak Expand widget template
5. Cari kode </head> di halaman edit html
6. copy paste kode dibawah ini tepat di atas kode </head>
<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[
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>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
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>
7. Selanjutnya cari dan ganti kode <data:post.body/> 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'>READMORE - <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:left'><a expr:href='data:post.url'>READMORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
8. Klik simpan template, silahkan klik lihat blog.
Bagi Anda yang sudah memasang readmore model lama jika ingin mengganti yang otomatis maka kode yang lama harus dihapus dulu.
Selamat membuat readmore otomatis semoga berhasil.
http://img87.imageshack.us/img87/5862/image1an1.gif
http://img110.imageshack.us/img110/6218/image2ie0.gif
http://img98.imageshack.us/img98/9617/image3cr0.gif
http://img134.imageshack.us/img134/633/image4hx4.gif
http://img139.imageshack.us/img139/83/image5oa7.gif
http://img509.imageshack.us/img509/6449/image6fu0.gif
http://img527.imageshack.us/img527/6543/image7go9.gif
http://img507.imageshack.us/img507/5774/image8wn8.gif
http://img150.imageshack.us/img150/5784/image9qo1.gif
http://img412.imageshack.us/img412/3808/image11pc0.gif
http://img100.imageshack.us/img100/4658/image12du2.gif
http://img132.imageshack.us/img132/4733/image13lj1.gif
http://img145.imageshack.us/img145/7793/image14zg9.gif
http://img412.imageshack.us/img412/4403/image15jc7.gif
http://img264.imageshack.us/img264/7575/image16kn8.gif
http://i25.tinypic.com/axeua.jpg
http://i28.tinypic.com/dy2jgi.jpg
http://i32.tinypic.com/nzqhb6.jpg
http://i32.tinypic.com/2a7sr2e.jpg
http://i26.tinypic.com/28iypmb.jpg
http://i27.tinypic.com/14kxism.jpg
http://i25.tinypic.com/2cfctx1.jpg
http://i30.tinypic.com/2m7g9ic.jpg
http://i26.tinypic.com/28kn62w.jpg
