Postingan ini merupakan copy paste dari sebuah artikel tip dan trik ngeblog dari Lasantha Bandara (hyperlink menuju ke link source artikel).
Sebenarnya ini merupakan catatan pribadi saya. Untuk saya pakai sebagai reminder saja. Juga untuk bisa saya buka kembali ketika saya membutuhkannya suatu hari.
Misal ketika saya upload template (yang tidak ada fitur auto read more nya) dan saya ingin memasang fitur read more, tanpa saya harus membuka bookmark. Siapa tahu juga artikel yang bersangkutan nanti sudah tidak ada, malah saya repot buat browsing-browsing di situs-situ tutorial lain lagi.
Berikut langkah-langkah yang sudah saya praktekan dan berhasil. Sabagaimana terlihat di blog ini.
1. Dari dashboard blogger, klik template.
2. Edit HTML.
3. Check list tulisan "Expand Widget Template".
4. Cari kode </head>
5. Copy dan paste kode di bawahh ini tepat sebelum tag </head> tersebut.
<script type='text/javascript'>
summary_noimg = 250;
summary_img = 200;
img_thumb_height = 150;
img_thumb_width = 150;
</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>
Silahkan rubah sesuai keinginan pada point-point value / angka di tag berikut:
summary_noimg : Jumlah huruf yang akan tertampilkan ketika tanpa ada gambar.
summary_img : Jumlah huruf yang akan tertampilkan ketika ada gambar.
img_thumb_height : Tinggi post thumbnails.
img_thumb_width : Lebar post thumbnails.
- Lalu cari tag <data:post.body/>
- Ganti tag <data:post.body/> dengan kode di bawah ini.
<b:if cond='data:blog.pageType != "static_page"'>
<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>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div style='float:right;margin-right:10px;margin-top:5px;'>
<a expr:href='data:post.url'>Read More</a>
</div>
</b:if>
</b:if>
- Langkah terakhir. Bisa preview template. Setelah OK, bisa click save template. Selesai.
0 komentar:
Posting Komentar