Postingan
kali ini akan memberikan tutorial Cara Membuat Readmore atau Baca
Selengkapnya pada postingan blog secara otomatis. Dengan adanya readmore
otomatis, kita bisa menentukan berapa ketinggian dan lebar penggalan
postingan dan image yang akan muncul pada halaman pertama blog kita
sehingga terlihat rapi dan menarik. Trik ini mungkin telah banyak yang
mengetahui dan ada juga yang belum mengetahuinya. Bagi anda yang belum
mengetahui bagaimana cara membuat readmore otomatis, bisa mengikuti
tutorial berikut ini.
1. Silakan Masuk ke account blogger anda, kemudian masuk ke>tata letak dan pilih>edit
html dan jangan lupa centang pada "Expand Widget Template".
html dan jangan lupa centang pada "Expand Widget Template".
2. Cari kode </head>
3. Kemudian letakkan kode dibawah ini persis diatas kode tersebut
<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)
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>
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)
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>
Keterangan:
angka pada kode berikut bisa diubah sesuai kebutuhan.
summary_noimg = 250; kode untuk mengatur tinggi tanpa gambar
summary_img = 250; kode untuk mengatur tinggi dengan gambar
img_thumb_height = 120; kode untuk tinggi gambar thumbnail
img_thumb_width = 120; kode untuk lebar gambar thumbnail
3. Selanjutnya cari kode
<data:post.body/>
ganti kode diatas dengan kode 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: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>
<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>
Keterangan:
tulisan Read more bisa ganti sesuai keinginan, misalnya Lanjutkan membaca
Simpan template> Lihat Blog, apakah tiap postingan telah ditampilkan sebagian saja (telah terpotong).
Mari Kita Saling Menghargai Sesama Blogger
Apabila anda merasa artikel ini bermanfaat, silahkan share dimana saja.
Dan jika berkenan mohon mencantumkan link sumbernya. Terima Kasih.
>
