SaeBlog: Membuat Read More/Baca Selengkapnya Secara Otomatis

;

Membuat Read More/Baca Selengkapnya Secara Otomatis

Rabu, Oktober 26, 2011 | Diposting oleh Unknown |

| Edit Entri

Apakah Anda ingin menampilkan ringkasan hanya pada halaman utama di blog Anda dengan menambahkan read more atau baca selanjutnya?
Akhirnya setelah menerapkan banyak cara. Saya menemukan cara terbaik untuk menambah "read more/baca selanjutnya" di blog blogspot saya. Jadi, disini saya akan membagikan caranya untuk hanya menampilkan ringkasan posting anda pada halaman indeks blog Anda dan halaman kategori. Jangan khawati, caranya mudah dan sederhana kok.....

Langkah-langkahnya seperti berikut:
1. Login ke akun blog and, terus pilih Dashboard --> Template --> Edit HTML
2. Jangan lupa centang "Expand Widget Templates"
3. Cari (Ctrl+F) kode: </head>
4. Sekarang tambahkan kode berikut sebelum atau diatas kode </head>:

<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 300;
summary_img = 300;
img_thumb_height = 172;
img_thumb_width = 172;
</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<=0) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="https://lh3.googleusercontent.com/-vtACBbXECq8/To0xtOBJv_I/AAAAAAAACaI/y4KESK20ess/header-object.png" 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 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>
</b:if>

Catatan: Anda dapat mengubah nilai-nilai pada kode yang berwarna hijau sesuai keinginan anda.
Nilai summary_noimg: mewakili jumlah karakter postingan tanpa gambar/thumbnail.
Nilai summary_img: mewakili jumlah karakter postingan gambar.
Nilai img_thumb_height: tinggi gambar dalam posting
Nilai img_thumb_width : lebar gambar dalam posting.
Ganti https://lh3.googleusercontent.com/-vtACBbXECq8/To0xtOBJv_I/AAAAAAAACaI/y4KESK20ess/header-object.png dengan url gambar yang anda inginkan untuk tampil pada postingan yang tidak ada gambar. Gambar hanya akan muncul pada tampilan read more.

5. Selanjutnya cari kode ini:

<data:post.body/>

6. Ganti kode tersebut dengan kode dibawa ini:

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType == "item"'>
<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>
<div style='clear: both;'/>
<span style='padding-top:5px;;float:right;text-align:right;'><a expr:href='data:post.url' rel='bookmark'><b>Read more</b></a></span>
</b:if>
</b:if>

Anda bisa menganti tulisan Read More yang berwarna hijau diatas dengan Baca Selengkapnya, Selanjutnya dll. Up to U............

7. Sekarang Save Template anda dan lihat perubahannya

Selamat Mencoba
Semoga Sukses