Auto Read More with Thumbnail For Blogger
Memasang Auto Read more ini mungkin sangat penting untuk diterapkan dalam halaman awal (homepage) blog ataupun halaman selain halaman posting (item post). Sebab untuk meringkas karakter/artikel yang dituliskan pada blog kita dan terkesan tidak terlalu panjang pada tags halaman tertentu.
Langsung pada cara memasang pada blog, pertama-tama masuklah ke menu Template kemudian klik Edit HTML
Temukan kode ini: </head>
Salin kode di bawah ini dan letakkan di atasnya:
<!-- Auto read more script Start -->
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes = with thumbnail, no = no thumbnail
summary_noimg = 430; //karakter yang ditampilkan jika tanpa thumbnail
summary_img = 340; //karakter yang ditampilkan jika dengan thumbnail
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 script End -->
Langkah selanjutnya, cari <data:post.body/>
dan ganti dengan kode berikut :
<!-- Auto read more Start -->
<!-- https://www.BloggerSentral.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 End -->
Simpan Template
Referensi :
Data | Keterangan | Tampilan/Contoh Tampilan |
---|---|---|
var thumbnail_mode |
| yes or no |
summary_img | Menentukan jumlah karakter (termasuk spasi) yang ingin ditampilkan dalam ringkasan, dengan thumbnail. | 340 karakter |
summary_noimg | Menentukan jumlah karakter (termasuk spasi) yang ingin ditampilkan dalam ringkasan, ketika tidak ada thumbnail. | 430 karakter |
| Tentukan tinggi dan lebar thumbnail (dalam piksel) | 200px |
Sejauh ini belum ada komentar yang masuk. Mulailah memberikan saran, kritikan yang bersifat membangun.