Cara Pasang Auto Read More

Fungsi Read More kali ini emang agak berbeda dengan versi yang lain. Bila versi terdahulu kita harus meng-cut tulisan menggunakan cara manual dengan melakukan pemangilan fungsi <div class="fullpost">..</div> atau <span class="fullpost">..</span> dimana kode ini biasanya kita tanamkan secara manual kedalam halaman postingan. Untuk versi Auto Read More yang baru kali ini sepertinya lebih canggih lagi, karena fungsi pemenggalan kalimat langsung bekerja secara otomatis tanpa harus menambahkan kode diatas.
Trus..hebatnya lagi, fungsi Read More ini mampu menampilkan image pertama dalam postingan dan mem-fload image tersebut di awal paragraf awal, meskipun gambar yang kita letakan berada di tengah atau akhir postingan. Mungki lebih nyaman saya sebut saja dengan fasilitas image thumbnail.

Tidak hanya itu saja, kita dapat juga pengatur jumlah karakter yang ditampilkan. Disini ada 2 pilihan untuk jumlah karakter. Yang pertama, jumlah karakter yang ditampilkan jika ada image yang diikutsertakan dalam postingan dan yang kedua jumlah karakter tanpa image.


Catatan Yang sudah memasang Read More versi lama sebaiknya di kodenya kembalikan dulu ke seperti semula.

- Klik menu Design -> Edit HTML
- Jangan lupa untuk membackupnya/ "Download Full Template"
- Cari kode </head>
- Copy - Paste kode dibawah ini kemudian letakan script dibawah ini DIATAS kode </head>.

<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 dibawah

<data:post.body/>

Lalu 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 == &quot;item&quot;'><data:post.body/></b:if>

- Save tamplate.


CATATAN :


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)

Hasilnya sama kayak blog ini. "Good Luck"

3 Comments

sang pemikir said... [Reply Comment]

berbagi pengalaman sob,ane pernah di bikin pusing ngakalin read more neeh,sampe nemuin blog yg cm nyuruh nempatin doank,nempatinnya bebas di mana postingan mau di penggal,awalnya ga percaya mlah gw ketawain he..hee..
iseng2 gw coba eeee berhasil...nahhh gimana tu sob gw ga abis pikir jd malu ma yg punya blog hee..hee..hasilnya ky di blog gw.tinggal tata letaknya yg masih kacau, bantuin donk sob.... thanks

Ex - Dot said... [Reply Comment]

coba deh sob read more yang pnya ente di delete aja ganti ama read more yang ini... lebih rapih mengenai contoh sama seperti blog ini sob... :)

Anonymous said... [Reply Comment]

Bank Ex-Dot,,,mohon Tutorial Bikin Search kayak punya mas Ex-dot..Please..keuren bgt blog mas Ex-dot..jadi bahan Referensi ane buat blog ne..Tolong Mas ex-Dot..

Post a Comment - Back to Content

Gunakan kata-kata sopan dalam berkomentar. Komentar yang mengandung SPAM, SARA, Pornografi dsb yang mengandung kata-kata yang tidak patut untuk di komentarkan (mohon maaf) akan kami hapus.