Read more berfungsi untuk menyingkat suatu postingan sehingga blog terlihat lebih simpel dan rapih. Sebenarnya dalam blogger sudah ada aplikasinya tapi harus dilakukan secara manual sehingga pemotongannya tidak sama dan terlihat tidak rapih. Maka dari itu saya memposting tentang cara membuat read more otomatis jadi pemotongannya dilakukan sendiri oleh sistem sehingga pemotongannya akan sama.
Langakah-langkah cara membuat read more otomatis di blog :
1. Login di www.blogger.com
2. Pada dasbor klik Rancangan.
3. Lalu klik Edit HTML.
4. Centang kotak di depan tulisan Expand Template Widget.
5. Cari kode </Head> (tekan F3 untuk mempermudah pencarian)
6. Lalu copy kode dibawah ini dan paste 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>
7. Kemudian cari kode <data:post.body/> lalu ganti dengan kode dibawah ini.
<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>8. Klik Simpan.
Note :
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)
Read more... : bisa sobat ganti dengan tulisan apa saja seperti "baca selanjutnya"," selengkapnya...",dll.
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)
Read more... : bisa sobat ganti dengan tulisan apa saja seperti "baca selanjutnya"," selengkapnya...",dll.
Selesai...
semoga bermanfaat...
0 komentar:
Posting Komentar