Memotong Tulisan di Blogspot
Memotong tulisan agar hanya sebagian saja (tidak penuh) yang tampil pada halaman utama bisa dengan menambahkan script tertentu. Jika ingin memotong tampilan postingan secara otomatis begitu diterbitkankan tanpa menambahkan kode secara manual di tiap postingan dapat menggunakan cara sebagai berikut:
Jika sebelumnya sudah membuat readmore manual dan ingin menggunakan readmore otomatis, maka script yang telah dibuat harus dibersihkan dulu, dikembalikan pada keadaan semula.
Cara membuat Readmore otomatis:
Login ke Blogger.com> Tata letak> Edit HTML> Contreng "expand widget templates"
Terlebih dulu download template lengkap untuk backup.
Cari kode </head> copy kode berikut sebelum (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)
(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>
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>
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
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).
mantap!! thanks yuaa
salam Knal Mbak..
Mau Tanya klo pada halaman statis tambahan .. gimana ya cara memotong postingannya.. soalnya selain feature readmore dari blogspotnya tidak ada, saya juga sudah beberapa kali nyoba script2 untuk readmore manual.. tetep ga bisa.. mohon pencerahannya dong mbak..
tks sebelumnya
Salam kenal semuanya...
Sebenarnya memotong tulisan bisa dilakukan langsung ketika sedang mengedit tulisan yaitu dengan menggunakan editor yang diperbarui, cara mengaktifkannya seperti di tulisan berikut:
http://dewimaya.blogspot.com/2010/04/memotong-tulisan-lewat-editor-blogspot.html
tanpa perlu mengubah template.
saya pernah mencoba menambahkan script seperti di atas pada template dari pihak ketiga ternyata tidak dapat berfungsi, mungkin ada yang perlu diatur lagi tapi saya kurang paham, tapi umumnya jika untuk template bawaan blogger bisa berfungsi dengan baik.
gimana kalo gak ketemu???
saya udah nyoba tapi perintah itu gak ketemu.
trus klo pake cara ini otomatis semua tulisan akan terpotong? atau hanya postingan yang baru saja, sementara yang sebelumnya akan sama aja?
makasih ilmunya...udah di praktekkan n berhasil...suksess selalu...
langsung menuju tkp....
maksih mbak ilmunya...
jempol dah pkonya...