Posted by : Unknown Jumat, 01 Februari 2013


1. Seperti biasa, Log in dahulu kepada akun blogger sobat masing-masing

2. Kemudian masuk ke Dashbor => Template => EDIT HTML => Lanjutkan

(Alangkah baiknya jika memback up template blog terlebih dahulu, jika tidak tahu caranya baca di sini )
(Jangan lupa untuk mencentang Expand Template Widget)

3. Kemudian cari kode </head>
(Untuk mempermudah pencarian, Gunakan CTRL+F pada keyboard)
Lalu copy  kode dibawah ini dan pastekan tepat diatas atau sebelum kode </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </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>


=============================================
Keterangan :
var thumbnail_mode = "float" => Letak thumbnail berada di “float” kiri atau jika sobat tidak menginginkan demikian silahkan ganti dengan “no-float”.

summary_noimg = 250;  => Jumlah karakter yang akan ditampilkan di posting tanpa menampilkan gambar postingan.
summary_img = 250;   =>  Jumlah karakter yang akan ditampilkan di posting dengan menampikan gambar postingan.
img_thumb_height = 120; => Ukuran tinggi gambar dalam satuan pixel.
img_thumb_width = 120;  => Ukuran Lebar  gambar dalam satuan pixel.


4. Setelah itu, cari kode <data:post.body/> dan gantikan kode <data:post.body/> dengan kode dibawah ini


<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'> <b> readmore</b> &#187;&#187;&#160;&#160; </a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
</b:if>

=============================================
Keterangan :
Sobat juga dapat menggantikan tulisan readmore   dengan tulisan lain seperti "Baca selengkapnya" .

5. Lihatlah PRATINJAU terlebih dahulu, jika sudah tidak terdapat kesalahan barulah sobat bisa menyimpan template dengan mengklik SAVE.

Dan lihat hasilnya...
Selamat mencoba dan semoga berhasil...
Demikian Cara mempersingkat postingan blog dengan Readmore,
Semoga bermanfaat... :-)

Leave a Reply

Subscribe to Posts | Subscribe to Comments

- Copyright © Defiana ˆ⌣ˆ) - Skyblue - Powered by Blogger - Designed by Johanes Djogan -