Cara Membuat Read More Otomatis

Viyan Pradita Senin, Agustus 30, 2010

Meneruskan cara membuat readmore, sebenarnya ada bermacam-macam cara untuk membuat readmore/baca selengkapanya, tentunya dengan gaya tersendiri. Kali ini saya akan membahas tentang bagaimana cara membuat readmore otomatis. dan pada fungsi read more kali ini sedikit berbeda dan lebih modern dengan memudahkan kita untuk tidak lagi membatasi artikel dengan panggilan kode script, dan sobat tidak akan repot membagi 2 postingan sobat dengan kode manual.

Kali ini script read more diletakkan langsung di template tanpa menggunakan hosting untuk mencegah error saat webhosting yang kita gunakan untuk menyimpan kode script-nya sedang down/error.

Buat Sobat blogger baru, saya sarankan menggunakan read more otomatis saja ketimbang read more yang biasa. Karena tentunya sobat tidak akan repot membagi 2 postingan sobat dengan kode manual. seperti pada blog saya ini.
Oke langsung saja,

Berikut langkah – langkah dalam membuat read more otomatis :

1. Silahkan login ke blogger terlebih dahulu.

2. Klik Tata Letak.

3. Kemudian klik Edit HTML.

4. Centang Expand Template Widget.

5. Letakkan kode berikut ini tepat diatas kode </head>

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

6. Penting : Untuk yang sudah pernah menggunakan read more versi lama (manual), sebaiknya sobat kembalikan dulu kodenya seperti semula. Hapus kode yang saya tandai dengan warna biru di bawah ini, sesuaikan dengan template sobat, karena setiap template berbeda - beda :

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

7. Kemudian cari kode di bawah ini :

<data:post.body/> atau <p><data:post.body/></p>

8. Gantilah kode tersebut dengan kode di bawah 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:right'>
<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>

9. Simpan template 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 = 500; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)

summary_img = 400; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)

img_thumb_height = 150; (Thumbnail 'tinggi dalam piksel)

img_thumb_width = 150; (Thumbnail 'lebar dalam piksel)

Read More… = bisa sobat ganti dengan tulisan Baca Selengkapnya / Baca Selanjutnya / atau apa saja yang sobat inginkan.

Selamat mencoba.


Ditulis Oleh :

Artikel Cara Membuat Read More Otomatis ini dipublish pada hari: Senin, Agustus 30, 2010. Semoga artikel ini bermanfaat untuk Anda. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

4 komentar
Terjun Ke Kolom Komentar

  1. gan ane mau nanya, gimana kalo kita klik readmore harus login dulu, jadi ga bisa dilanjutin bacanya kecuali sudah login.
    gimana caranya gan???

    BalasHapus
    Balasan
    1. Login kemana dulu sob, login (harus follow blog baru bisa baca) atau premission baca artikel di blog kita ??

      Hapus
  2. apakah isi postingan di readmore ini letaknya rata kanan-kiri ? (justify) :D maklum .. newbie..

    BalasHapus
  3. gan, ane dulu pernah pasang kode readmore yang manual, tapi sekarang kode tersebut g ada di edit html (ketika dicari pake Ctrl+F kodenya ada, tapi sepertinya disembunyikan) padahal Expand Widget templatenya sudah dicentang
    gimana solusinya gan?

    BalasHapus

Catatan:
Link hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS DI SINI...</i>


web design blogs Bloggers - Meet Millions of Bloggers