Ini adalah post lama yang saya update kembali dan saya sesuaikan dengan
beberapa hal, terutama masalah editing template yang berbeda dengan
template lama. Selain itu, masih banyak sobat blogger
yang menyimak cara membuat auto readmore versi satu yang kurang
sempurna, dan artikel ini sebenarnya adalah penyempurnaannya, tapi
mungkin karena artikel ini masih kalah di pencarian SE (di bawah artikel
readmore V1), banyak sobat blogger yang masuk ke sana. Oleh karena itu,
post ini saya update lagi lengkap dengan gambar-gambar auto readmore yang bisa dipake free.
Script auto readmore blogger/blogspot dengan
thumbnails
(gambar preview) ini adalah penyempurnaan dari script auto readmore V1,
di mana ditemukan adanya masalah pada halaman statis. Ketika halaman
statis ditampilkan, auto readmore ikut muncul, sehingga harus diberi
pengecualian (b if cond & b else) untuk static pages pada scriptnya.
Selain itu, javascript dlm auto readmore ini juga bersifat internal
jadi tidak perlu lagi memuat file .js eksternal yang diupload ke hosting
lain. Meskipun file template menjadi sedikit lebih besar, namun
loading page menjadi lebih cepat daripada auto readmore sebelumnya.
Langkah-langkahnya:
1. Masuk ke dashboard > Template > Edit HTML. Download/back up file XML template terlebih dahulu agar nanti bisa mengembalikan seperti semula jika ada kesalahan.
2. Jika dulu sudah diisi script auto readmore yang pertama, hapus terlebih dahulu, gunakan panduan dari posting
auto readmore V1 untuk mengetahui mana saja yang harus dihapus dan dikembalikan.
3. Copy-paste script berikut tepat DI BAWAH </head> (gunakan Ctrl+F dan masukkan tag di dalam kotak search, tekan enter):
<!-- Auto read more script -http://buka-rahasia.blogspot.com- Start -->
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes-dengan gambar,no-tanpa gambar
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 150;
img_thumb_width = 150;
</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(thumbnail_mode == "yes") {
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>
<!-- Auto read more script -http://buka-rahasia.blogspot.com- End -->
Yang berwarna
merah adalah jumlah dan ukuran tampilan,
summary_noimg=jumlah karakter tanpa gambar,
summary_img=jumlah karakter dengan gambar, sedangkan
img_thumb_height dan
img_thumb_width adalah ukuran gambar (dalam pixel)
. Ubahlah sesuai dengan keinginan.
3. Kemudian cari <data:post.body/> (gunakan Ctrl+F, masukkan kode
ke dalam kotak pencarian, tekan enter), dan GANTI dengan:
<!-- Auto read more -http://buka-rahasia.blogspot.com- Start -->
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
</script>
<a class='more' expr:href='data:post.url'>Read More >></a>
</b:if>
</b:if>
<!-- Auto read more -http://buka-rahasia.blogspot.com- End -->
Kostumisasi:
Ganti Read More >> dengan kata-kata yang diinginkan. Atau jika ingin menggantinya dengan gambar, ganti tulisan berwarna merah tersebut dengan:
<img border='0' src='url (direct link) gambar readmore'/>
contoh:
<a class='more' expr:href='data:post.url'><img border='0' src='http://hostgambar.com/gambar-readmore.png'/></a>
Pake gambar-gambar ini, ato kalo kurang cocok cari sendiri :p
"Save as" kemudian upload sendiri dan ambil url gambarnya. Kalo perlu resize dulu sesuai dengan kebutuhan dan ukuran yang pas.
Gambar Readmore Button Gratis (PNG Transparan)
----------------
Update (12102011):
Di komentar sobat
Ari di bawah ditanyakan:
bagaimana cara agar tampilan teks di post summary - auto readmore bisa rata kiri kanan (justified)?
Lihat bagian ini pada script kedua di atas. Jika auto readmore sudah dipasang, cari dengan Ctrl + F:
<div expr:id='"summary" + data:post.id'>
Untuk membuat teks di post summary dlm readmore justify, tambahkan style css ini ke dalam tag:
style='text-align:justify;'
Jadinya:
<div style='text-align:justify;' expr:id='"summary" + data:post.id'>
----------------
4. Preview terlebih dahulu, jika sudah beres, kemudian save.
Gunakan kotak komentar untuk menyampaikan pertanyaan, permasalahan, atau apapun tentang script ini.
