Membuat auto Read More pada Blogspot. oke, untuk kesempatan kali ini saya akan mencoba membuat tutorial mengenai cara memasang Auto read More otomatis pada Blog, walaupun mungkin hal ini sudah banyak di bahas oleh teman-teman blogger lainnya.
Silahkan masuk ke edit Html Blog anda masing-masing (bagi anda yang ingin pasang aja loh, :) ), selanjutnya untuk melihat kode secara utuh anda harus mencentang Expand Template Widget pada Edit Html.
selanjutnya, letakkan kode berikut pas di atas kode </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>
Selanjutnya cari kode <data:post.body/> (gunakan fungsi find)
ganti kode tersebut dengan kode
<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'>»» read more</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/>
</b:if>
klik Simpan (Save) pada Menu edit Html anda. maka Blog anda akan mengatur sendiri read morenya sebanyak 430 (summary_noimg = 430;) jika tanpa gambar dan sebanyak 340 (summary_img = 340;) jika pakai gambar. anda bisa mengubah sendiri kode yang terdapat didalam kurung..
selamta mencoba dan mudah-mudahn sukses. jika tidak sukses hubungi dukun terdekat. :P
Silahkan masuk ke edit Html Blog anda masing-masing (bagi anda yang ingin pasang aja loh, :) ), selanjutnya untuk melihat kode secara utuh anda harus mencentang Expand Template Widget pada Edit Html.
selanjutnya, letakkan kode berikut pas di atas kode </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>
Selanjutnya cari kode <data:post.body/> (gunakan fungsi find)
ganti kode tersebut dengan kode
<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'>»» read more</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/>
</b:if>
klik Simpan (Save) pada Menu edit Html anda. maka Blog anda akan mengatur sendiri read morenya sebanyak 430 (summary_noimg = 430;) jika tanpa gambar dan sebanyak 340 (summary_img = 340;) jika pakai gambar. anda bisa mengubah sendiri kode yang terdapat didalam kurung..
selamta mencoba dan mudah-mudahn sukses. jika tidak sukses hubungi dukun terdekat. :P
1 komentar:
kenapa yang tampil adalah kode HTML nya.....????
Posting Komentar