Sobat, sebenarnya kita tidak perlu lagi membuat readmore ini, karena di blogger sudah mendukung fasilitas readmore. Coba saja sobat sekalian login blogger menggunakan alamat www.draft.blogger.com , maka di bagian postingannya sudah ada fasilitas read more.
Tetapi jika kita pakai readmore yang disediakan oleh blogger tersebut, maka hanya postingan terbaru saja yang dilengkapi dengan readmore, postingan lama kita tetap pada full post.
Nah untuk itu, bagi sobat sekalian yang ingin membuat readmore tanpa menggunakan fasilitas dari blogger tersebut bisa mengikuti langkah-langkah berikut :
-
-
Masuk pada “Tata Letak”
-
Kemudian ambil TAB “Edit HTML”
-
Setelah anda berada pada Edit HTML, berikan centang pada “Expand widget template”, lalu cari code </head>, dan taruh script berikut tepat di atasnya.
| <script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script> <script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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> |
- Setelah itu Simpan Template
- Kemudian masih pada TAB “Edit HTML”, cari code <data:post.body/>, ganti code tersebut dengan script berikut :
| <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:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if> |
- Nah sekarang Simpan Template, dan lihat hasilnya. Maka semua Postingan kita akan dalam format readmore.
Selamat mencoba dan sukses buat semua.
No comments:
Post a Comment