Cara Membuat Read More Otomatis
Cara membuat read more otomatis ini sebenarnya sudah lama sekali ada tapi aku baru beberapa hari ini memakainya di blog newbieku ini. Kelebihan dari Read More otomatis ini adalah yang pertama kita ngga perlu repot-repot lagi melakukan pemenggalan kalimat dengan menggunakan kode <div class=”fullpost”>..</div> atau <span class=”fullpost”>..</span> seperti yang biasa dilakukan pada fungsi read more yang lama dan yang kedua yaitu jika didalam postingan kita terdapat gambar maka otomatis gambar tersebut akan berada di paragraf awal meskipun sebenarnya gambar tersebut kita letakkan di tengah atau akhir postingan. Sebelum masuk ke Cara membuat read more otomatis lebih lanjut perlu diperhatikan bagi yang sudah memasang Read More versi lama sebaiknya di kodenya dikembalikan dulu ke seperti semula, caranya hapus kode yang berwarna merah dibawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja) :
<div class=’post-header-line-1′/>
<div class=’post-body’>
<b:if cond=’data:blog.pageType == “item”‘>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href=’data:post.url’>Readmore</a>
</b:if>
<div style=’clear: both;’/>
Jika sudah lanjutkan ke Cara membuat read more otomatis :
- Cari kode </head> kemudian letakan script dibawah ini di atas kode </head> Kalo sudah, jangan lupa di simpan terlebih dahulu.
<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>
- Masih pada halaman EDIT HTML, Beri tanda centang pada “Expand widget template” lalu temukan kode seperti ini : <data:post.body/> Kalo sudah, ganti kode <data:post.body/> dengan semua kode dibawah ini :
<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/>
<style>.fullpost{display:inline;}</style></b:if>
- Klik Simpan dan lihat hasilnya
Keterangan :
var thumbnail_mode = “float”; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail ‘tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail ‘lebar dalam piksel)
Untuk cara pasang iklan didalam postingan atau dibawah postingan saat read more diklik pada fungsi read more yang baru ini tunggu postingan selanjutnya . . . ok
Popularity: 3% [?]
