ahhhh coy tadi saya sudah publish artikel Tentang "cara bikin 'read more' di blog", tapi yang tadi kan harus klik-klik dan ketik pas pembuatan artikel kalian, sekarang saya mau kasih cara bikin read more otomatis tanpa edit di artikel yang mau di publish, melainkan kita edit di HTML nya.
begini caranya ===>
-Login ke blogger dengan ID sobat.
-Pilih Rancangan atau Tata Letak.
-Pilih Edit HTML.
-Centang tulisan "expand
template widget".
-Lalu cari kode </head> :
untuk mempermudah pencarian tekan F3.
-Lalu masukkan code di bawah ini
tepat di atas </head>
<script type='text/javascript'>
var thumbnail_mode = "no-float" ; summary_noimg = 430;
summary_img = 340; img_thumb_height = 100; img_thumb_width = 120;
</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");
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>
Kemudian sobat cari kode
<data:post.body/>
Ganti kode <data:post.body/>
dengan kode di bawah 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:right;padding-top:20px;'>
<a expr:href='data:post.url'>
<b> readmore</b> »»  
</a></span>
</b:if>
<b:if cond='data:blog.pageType ==
"item"'><data:post.body/>
</b:if>
Kemudian Save Template.
untuk keterangan readmorenya...
var thumbnail_mode =
"float";: Letak thumbnail berada di “float” kiri atau jika tidak
silahkan ganti dengan “no-float”;
summary_noimg = 250;: Jumlah
karakter yang akan ditampilkan di posting tanpa gambar / thumbnail;
summary_img = 250;: Jumlah karakter
yang akan ditampilkan di posting dengan gambar / thumbnail;
img_thumb_height = 120;: Tinggi
thumbnail dalam ukuran pixel;
img_thumb_width = 120;: Lebar
thumbnail dalam ukuran pixel;
READMORE-: Tulisan READMORE bisa
diganti misalnya dengan “Baca Selengkapnya” dan lain sebagainya, apabila anda tidak ingin
menampilkan judul dibelakang Readmore, sobat bisa menghapus code script ini . bagi yang kurang mengerti silahkan mengikuti trik di artikel sebelumnya
0 komentar:
Posting Komentar