Memasang Read More Otomatis di Blog
Jumat, 02 April 2010
0
komentar
Read more (baca selengkapnya) merupakan fitur untuk untuk memotong suatu artikel di halaman utama agar bersambung dihalaman berikutnya pada blog, sehingga tampilan blog akan tampak lebih simple, rapi dan elegan.
Sebenarnya blogger sendiri sudah menyediakan fiturnya di form entri posting, namun harus dilakukan secara manual sehingga didalam pemotongan artikelnya tidak sama satu sama lainnya apabila kita tidak jeli dalam pemilihan bagian yang akan dipenggal dan ini akan mengurangi kerapihan di halaman blog kita.
Nah oleh karena itu untuk mengatasi hal tersebut kita memerlukan Read more otomatis agar penggalannya dilakukan sendiri oleh sistem sehingga hasil penggalannya akan sama, seperti pada blog mapasanda.co.cc ini
untuk membuat Read More otomatis berikut langkah-langkahnya :
4. Cari kode <data:post.body/> dengan menekan tombol Ctrl + F untuk mempermudahnya, lalu ganti dengan kode berikut :
<b:if cond='data:blog.pageType != "item"'>
Fitur read more otomatis sudah jadi, untuk penjelasan script bisa dilihat di bawah ini :
summary_noimg = 250; menentukan jumlah karakter sebelum dipotong apabila postingan tanpa gambar.
summary_img = 250; menentukan jumlah karakter sebelum dipotong apabila postingan dengan gambar.
img_thumb_height = 120; menentukan tinggi gambar(dalam ukuran pixel)
img_thumb_width = 120; menentukan lebar gambar(dalam ukuran pixel)
Tulisan Read more... (yang berwarna merah) bisa anda ganti dengan tulisan apa saja seperti "baca selanjutnya"," selengkapnya...",dll.
Sebenarnya blogger sendiri sudah menyediakan fiturnya di form entri posting, namun harus dilakukan secara manual sehingga didalam pemotongan artikelnya tidak sama satu sama lainnya apabila kita tidak jeli dalam pemilihan bagian yang akan dipenggal dan ini akan mengurangi kerapihan di halaman blog kita.
Nah oleh karena itu untuk mengatasi hal tersebut kita memerlukan Read more otomatis agar penggalannya dilakukan sendiri oleh sistem sehingga hasil penggalannya akan sama, seperti pada blog mapasanda.co.cc ini
untuk membuat Read More otomatis berikut langkah-langkahnya :
1. masuk ke Menu Dashboard, klik Tata Letak, klik Edit HTML.
2. Centang checkbox Expand Widget Template.
3. Copy paste kode berikut ini sebelum atau 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>
//<![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>
4. Cari kode <data:post.body/> dengan menekan tombol Ctrl + F untuk mempermudahnya, lalu ganti 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'>Read More...</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
5. Simpan
keterangan :
5. Simpan
keterangan :
summary_noimg = 250; menentukan jumlah karakter sebelum dipotong apabila postingan tanpa gambar.
summary_img = 250; menentukan jumlah karakter sebelum dipotong apabila postingan dengan gambar.
img_thumb_height = 120; menentukan tinggi gambar(dalam ukuran pixel)
img_thumb_width = 120; menentukan lebar gambar(dalam ukuran pixel)
Tulisan Read more... (yang berwarna merah) bisa anda ganti dengan tulisan apa saja seperti "baca selanjutnya"," selengkapnya...",dll.
Baca Selengkapnya ....
