Membuat Readmore pada blog sangatlah penting. Hal ini agar satt pengunjung mload blog kita. Pengunjung tidak dibingungkan dengan banyak artikel yang tertulis secara lengkap.
Untuk itu Anda perlu menyediakan Readmore disetiap akrtikel blog Anda.
Berikut cara membuat readmore dalam postingan blog Anda :
1. Login ke akun blogger Anda.
2. Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".
PENTING : Sebelum melakukan edit template, sebaiknya simpan dulu template blog Anda mengklik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan Anda sudah memiliki back-up untuk mengembalikannya seperti semula.
3. Jika sudah cari kode dan Copy-Paste kode berikut di atasnya :
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 450;
summary_img = 450;
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>
Tips : Untuk mempermudah menemukan kode tesebut tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser , kemudian tinggal ketikan kata yang ingin And cari.
Catatan :
1. Kode var thumbnail_mode = "float" ; diartikan bahwa readmore Anda akan diatur disebelah kiri, kalau ingin tanpa pengaturan float silakan ganti dengan "no-float".
2. Kode summary_noimg = 450; berguna untuk mengatur jumlah karakter yang ditampilkan tanpa image (gambar).
3. Kode summary_img = 450; berguna untuk mengatur jumlah karakter yang ditampilkan dengan image (gambar).
4. Kode img_thumb_height = 120; berguna untuk mengatur tinggi image (gambar) yang akan ditampilkan.
5. Kode img_thumb_width = 120; berguna untuk mengatur lebar image (gambar) yang akan ditampilkan.
4. Cari kembali kode seperti di bawah ini.
<data:post.body/>
5. Jika sudah Anda temukan, blok kode tersebut dan ganti kode tersebut dengan kode berikut :
<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>
Catatan :
1. Ganti kode yang berwarna merah dengan letak readmore yang Anda inginkan left (kiri) atau right (kanan).
2. Anda bisa mengganti kata Readmore dengan kata-kata Anda sendiri.
3. Hapus kode <data:post.title/>, jika Anda tidak menginginkan Readmore diikuti dengan judul posting.
6. Jika sudah selesai klik “Save Template”.
Selamat sekarang blog Anda sudah memiliki menu readmore….
Untuk itu Anda perlu menyediakan Readmore disetiap akrtikel blog Anda.
Berikut cara membuat readmore dalam postingan blog Anda :
1. Login ke akun blogger Anda.
2. Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".
PENTING : Sebelum melakukan edit template, sebaiknya simpan dulu template blog Anda mengklik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan Anda sudah memiliki back-up untuk mengembalikannya seperti semula.
3. Jika sudah cari kode dan Copy-Paste kode berikut di atasnya :
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 450;
summary_img = 450;
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>
Tips : Untuk mempermudah menemukan kode tesebut tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser , kemudian tinggal ketikan kata yang ingin And cari.
Catatan :
1. Kode var thumbnail_mode = "float" ; diartikan bahwa readmore Anda akan diatur disebelah kiri, kalau ingin tanpa pengaturan float silakan ganti dengan "no-float".
2. Kode summary_noimg = 450; berguna untuk mengatur jumlah karakter yang ditampilkan tanpa image (gambar).
3. Kode summary_img = 450; berguna untuk mengatur jumlah karakter yang ditampilkan dengan image (gambar).
4. Kode img_thumb_height = 120; berguna untuk mengatur tinggi image (gambar) yang akan ditampilkan.
5. Kode img_thumb_width = 120; berguna untuk mengatur lebar image (gambar) yang akan ditampilkan.
4. Cari kembali kode seperti di bawah ini.
<data:post.body/>
5. Jika sudah Anda temukan, blok kode tersebut dan ganti kode tersebut dengan kode berikut :
<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>
Catatan :
1. Ganti kode yang berwarna merah dengan letak readmore yang Anda inginkan left (kiri) atau right (kanan).
2. Anda bisa mengganti kata Readmore dengan kata-kata Anda sendiri.
3. Hapus kode <data:post.title/>, jika Anda tidak menginginkan Readmore diikuti dengan judul posting.
6. Jika sudah selesai klik “Save Template”.
Selamat sekarang blog Anda sudah memiliki menu readmore….
