Auto read more adalah read more yang otomatis memotong artikel kita tanpa harus memasang tag <div class="fullpost">..</div> ataupun <span id="fullpost">..</span> sangat praktis bukan? Nah, untuk membuatnya ikuti langkah berikut.
1. Login ke Blogger.com
2. Masuk ke Layouts -> Edit HTML jangan centang expand widget template.
3. Cari kode </head> bisa menggunakan F3, kalau sudah ketemu langsung copy paste kan script dibawah ini tepat di atas kode </head> tadi.
<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>
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>
5. Simpan pekerjaanmu
6. Masih pada Edit HTML centang Expand Widget Template
7. Cari kode seperti ini <data:post.body/> kemudian ganti dengan semua 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'>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: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>
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 = 250; (Menetapkan berapa banyak karakter akan ditampilkan
di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di
posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)
source:http://www.o-om.com/2009/04/cara-pasang-auto-read-more-terbaru-part.html
18 komentar:
Aloha,tukeran link yo?
thaks infonya,sudah tak coba tapi kok postinganya masih panjang yaa,belum teringkas?
kasih saran donk
http://green-myworld.blogspot.com
@mas danue: maaf mas, scriptnya ada yg error tp udah di fix koq...
skrg udah bisa lg...silahkan di coba.
tukeran link yuk http://jtsindonesia.co.cc
Jetco Translation Service
Penerjemah Resmi dan Tersumpah
lama gak jumpa.. :D
bagus nih infonya
Tks banget tispnya mas. numpang minum ya. sekalian mau nanya ni, cara menampilkan semua bagian dari posting kita gmana ya?
http://adenapps.blogspot.com
Mantap boz tutorial nya
Mantap lg klo bisa di backlink....
OK boz.......
thx..setelah gagal teyuz mencoba kode2 itu di laen bentuk..alhamdulillah,resep mas adhiet muanjur! =)
komen di blogku ya..fren..
http://www.hienviro.blogspot.com
Maaf, di blogku < bieith.blogspot.com > pada Edit HTML nya koq ndak ada ????
setelah keliling cari auto read more akhirnya yg ada di blog ini yg bisa digunakan...,thx teman...
Mlm..
Mau nanya..
Kalo templatenya sudah pake Widget social bookmark, kira2 masih bisa gak dipasang auto read more ini..
Maksudnya berpengaruh gak ya dg mengganti code <data:post.body...
Sebelum dan sesudahnya Terima kasih.
good.thanks atas infonya
Keren om. Tak coba dulu ya di blogspotku.
[ASK] mas, ko kalo di page jadi ikut2an ada readmore nya..
terus ga ilang ilang lagi..
thx!!
makasih ummmm.... tips auto readmorenya...
info yg sangat brguna. makasih yah
Leave a Comment
Silahkan menuliskan komentar anda pada opsi Google/Blogger untuk anda yang memiliki akun Google/Blogger.
Silahkan pilih account yang sesuai dengan blog/website anda (LiveJournal, WordPress, TypePad, AIM).
Pada opsi OpenID silahkan masukkan URL blog/website anda pada kotak yang tersedia.
Atau anda bisa memilih opsi Nama/URL, lalu tulis nama anda dan URL blog/website anda pada kotak yang tersedia.
Jika anda tidak punya blog/website, kolom URL boleh dikosongkan.
Gunakan opsi 'Anonim' jika anda tidak ingin mempublikasikan data anda. (sangat tidak disarankan). Jika komentar anda berupa pertanyaan, maka jika anda menggunakan opsi ini tidak akan ditanggapi.