Pada tahu belum apa itu read
more?? itu tuh biasanya kalau di halaman depan blog kan banyak banget
tuh daftar postingannya. Biar gak terlalu panjang, maka postingan pada
halaman depan itu disingkat, maksudnya yang tadinya panjang hanya
sebagian saja yang ditampilkan, nah untuk membuat yang semacam itu
menggunakan read more, jika pembaca ingin melanjutkan membaca postingan
tersebut yaitu dengan cara mengklik read more atau bahasa indo nya baca
selengkapnya . . .
Read more ini ada dua versi, yang pertama cara
manual, dan yang kedua cara otomatis, tetapi di sini saya akan bahas
mengenai read more yang otomatis. Hebatnya read more otomatis ini
dilengkapi dengan thumbnail gambar dan otomatis menyesuaikan jumlah
huruf yang ditampilkan. Jadi jika postingan yang sobat buat mengandung
gambar, gambar tersebut secara otomatis akan dijadikan sebagai thumbnail
gambar.
Biar gak pusing, langsung saja sikat tutorial berikut :
Pertama, login dulu ke blogger terus masuk ke menu rancangan dan pilih edit HTML jangan lupa untuk mencentang expand template widget. Biar aman, backup dulu template blog sobat. Abis itu cari kode </head> kemudian copy script dibawah ini dan paste sebelum kode </head>.
<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
summary_noimg = 550;
summary_img = 551;
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");
if(img.length<1) {
imgtag = '<span style="float:left; padding:0px 5px 5px 10px;"><img src="http://i1083.photobucket.com/albums/j395/Budhi1305/557169_276816539066691_276816412400037_606587_1932742563_n.jpg" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
var summ = summary_noimg;
}
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 5px 5px 10px;"><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 = "no-float" ;
summary_noimg = 550;
summary_img = 551;
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");
if(img.length<1) {
imgtag = '<span style="float:left; padding:0px 5px 5px 10px;"><img src="http://i1083.photobucket.com/albums/j395/Budhi1305/557169_276816539066691_276816412400037_606587_1932742563_n.jpg" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
var summ = summary_noimg;
}
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 5px 5px 10px;"><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>
Nah, kalau sudah, masih pada halaman edit HTML cari lagi kode <data:post.body/>
, biasanya setiap template berbeda, jika pada template sobat sudah ada
script-script lain misalnya tombol like atau lainnya sesuaikan saja.
Kalau sudah ketemu hapus dan ganti kode <data:post.body/> dengan kode di bawah ini :
<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>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'><b>Read more »</b></a></span>
</b:if>
</b:if>
<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>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'><b>Read more »</b></a></span>
</b:if>
</b:if>
Setelah itu simpan template sobat dan lihat hasilnya pada halaman depan blog sobat, apakah sudah berubah atau belum.
Catatan Penting :
var thumbnail_mode = "no-float" ; (ini adalah untuk mengubah posisi gambar apakah di(float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 550; (Banyaknya huruf yang akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 551; (Banyaknya huruf yang akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 150; (Thumbnail 'tinggi gambar dalam piksel)
img_thumb_width = 150; (Thumbnail 'lebar gambar dalam piksel)
http://i1083.photobucket.com/albums/j395/Budhi1305/557169_276816539066691_276816412400037_606587_1932742563_n.jpg = (Gambar default yang akan ditampilkan jika postingan tidak mempunyai gambar).
Selamat mencoba semoga sukses :)