Home » » Cara Membuat Auto Read More Versi terbaru

Cara Membuat Auto Read More Versi terbaru

Fungsi Read More kali ini emang agak berbeda dengan versi Read More yang lama. 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 terbaru 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. Masih bingung maksudnya? sama..yang jelasin juga puyeng wkwkwkw Ya sudah, biar sama2 gak pusing langsung ke tutorialnya saja ok.

Penting! Yang sudah memasang Read More versi lama sebaiknya di kodenya kembalikan 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;'/>



OK, kalo sudah tinggal lanjutkan dengan tutorial dibawah.

Pertama, silahkan tuju langsung ke halaman EDIT HTML, Cari kode </head> kemudian letakan script dibawah ini di atas kode </head> Kalo sudah, jangan lupa di simpan terlebih dahulu.

Langsung copy paste aja kode dibawah ini:

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



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



silahkan disimpan 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)





Ingin tahu lebih cepat Tentang Artikel atau Info Terbaru yang di Publikasikan Oleh echa bintang timur ? Daftarkan e-mail anda di sini dengan secara otomatis anda dapat kiriman artikel terbaru dari echa bintang timur , Silahkan daftarkan email anda di sini ( Free )

Masukan email anda disini




Artikel Menarik Lainnya


8 komentar:

Rizky2009 mengatakan...

kayanya blog q juga dah pakai auto readmore

Rock mengatakan...

Aku gak begitu suka dengan readmore sob...

LL mengatakan...

Aku copy dulu kodenya kawand...
Thanks.

kdrama mengatakan...

izin sedot kodenya pren.salam.

diamondhe mengatakan...

kok punya saya g bisa ya, terpasang seh readmorenya cuma tulisannya udah tertampil semua..help me ouyyy......

rajacolek mengatakan...

diamondhe~~~

coba di cek ulang lebih teliti. mungkin ada kode yang terlewat...
moga membantu

anton cabon mengatakan...

cara buat blog jadi do Follow, atau cara mengetahui blog kita do follow atau ga, gimana ya gan? makasih

ABDUL AZIZ, S.Pd mengatakan...

data post body nya ada dua nich mana yang dihilangkan.......

Komentar anda tentang Artikel ini

Blog ini menggunakan Sistem DoFollow, jadi manfaatkan kesempatan ini untuk menempatkan link blog atau website anda agar di follow oleh bot mesin pencari. Sempatkanlah sedikit waktu untuk mengomentari Postingan Blogku, karna setiap kata yang anda berikan , sangatlah berharga untuk ku! Terima Kasih !!
Untuk yang tidak memiliki Account, silahkan pilih Beri komentar sebagai: Anomymous atau Name/URL

 

random post

My Link Banner

Pasang Iklan