Membuat Auto Read More dengan Gambar Thumbnail versi 1
Membuat link Auto Read More versi 1 ini, cukup mudah dan banyak keuntungan yang dapat Anda dapatkan, selain javascript bersifat internal sehingga tidak perlu lagi memuat file .js eksternal yang diupload di hosting lain. Dan juga bila Anda menerapkan versi ini :1. Anda tidak perlu lagi memasukkan opsi Line Break ( Insert Jump Break ) di setiap postingan baru Anda bahkan ototmatis fungsi read more akan berlaku pada postingan lama Anda.
2. Gambar pertama dari posting Anda akan dipilih untuk tampilan pada halaman utama blog Anda untuk postingan tersebut.
Langkah Pemasangan kode Auto Read More :
Masuk Blogger Dashboard > Template > edit HTML
Back up template dahulu > klik Download Full Template
Check "Expand Widget Templates" box
Tekan Control + F > cari tag </head>
Copy code script berikut dan pastekan tepat diBAWAH tag </head>
<!-- Auto read more v 1 script Start -->
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 200;
img_thumb_width = 200;
</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(thumbnail_mode == "yes") {
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>
<!-- Auto read more v 1 script End -->
Selanjutnya cari tag <data:post.body/>
Gantilah tag tersebut dengan kode berikut dibawah :
<!-- Auto read more v1 Start --> <!-- http://problogiz.blogspot.com/ --> <b:if cond='data:blog.pageType == "item"'> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType == "static_page"'> <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> <a class='more' expr:href='data:post.url'>Read more ...</a> </b:if> </b:if> <!-- Auto read more v1 End -->
Sebelumnya klik Preview/Pratinjau dahulu jika tidak ada error message,
Kemudian Save Template
Tidak ada komentar:
Posting Komentar