Selasa, 07 Februari 2012

Membuat Read More Otomatis Tanpa Mempengaruhi Struktur Laman

Sahabat masih Ingin Belajar yang ingin merapihkan atau meminimalis tampilan postingan nya kini kita akan membahasa cara Membuat Read More Otomatis Tanpa Mempengaruhi Struktur Laman yang biasanya saya temukan di berbagai artikel orang lain itu setiap hasil read more nya itu selalu berpengaruh terhadap laman atau jika di laman read more nya tidak terbuka atau tidak berjalan perintah scriptnya, atau mungkin saya yang kurang teliti dalam hal melakukan langkah-langkahnya,,, hee hee maklum saya juga masi pemula.. ok langsung aja ya ke langkah-langkahnya ;
1. Login Ke Blogger
2. Klik Rancangan
3. Klik Edit HTML
4. Centang Expand Template Widget
5. Download template lengkap untuk jaga-jaga bila mana terjadi kesalahan
6. Cari kode </head> dengan bantuan Ctrl + F atau F3
7. Letakan Script Read More di bawah kode </head>


<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes-dengan gambar,no-tanpa gambar
summary_noimg = 345
summary_img = 345
img_thumb_height = 120;
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(thumbnail_mode == "yes") {
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:
summary_noimg = 345 adalah jumlah ringkasan tulisan jika tidak ada gambarnya
summary_img = 345 adalah jumlah ringkasan tulisan jika ada gambarnya
img_thumb_height = 120; adalah tinggi gambar
img_thumb_width = 120; adalah lebar gambar


8. Temukan kode <data:post.body/> kemudian ganti kode tersebut dengan kode di bawah ini

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<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>
<a class='more' expr:href='data:post.url'>Baca Selengkapnya &gt;&gt;</a>
</b:if>
</b:if>

9. Simpan dan lihat tampilannya,

1 komentar:

  1. reed more'y se jadi, tapi knpa ya mass setiap saya buat halaman baru kok ada reed morenya jga..
    saya tu pengen reed more cukup di beranda doakk,
    kos saya punya halaman contac US'y jadi rusak

    BalasHapus

Jangan lakukan spam pada komentar dan bila anda ingin beriklan gratis atau hanya sekedar membuat backlink anda bisa melakukannya di beriklanbersama.blogspot.com dan hanya dengan sekali pasang maka akan terpasang di 10 website.