Membuat Read More Otomatis Tanpa Edit Saat Posting

Read More yang akan kita bahas kali ini ialah Read More yang sifatnya otomatis atau dengan kata lain, nggak perlu setting-setting dulu waktu mosting tulisan.  Bila versi terdahulu kita harus meng-cut tulisan menggunakan cara manual dengan menggunakan fungsi <div class="fullpost">..</div> atau <span class="fullpost">..</span> dimana kode ini biasanya kita tanamkan secara manual ke dalam halaman postingan. Jadi kesimpulannya, Read More ini tinggal pasang, udah. Saat posting biasa aja.Enjoy!

Tambah 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. 

Note: Yang sudah memasang Read More versi lama sebaiknya diformat ulang kode-kodenya, 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;'/>

Kemudian, 

Buka  EDIT HTML,

 Cari kode </head>

 kemudian letakan script di bawah ini di atas kode </head>  save

Copy-Paste Code berikut,

<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 di bawah

<data:post.body/>

Kalo sudah, ganti kode <data:post.body/> dengan semua 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: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 /Simpan, Tinggal di preview

NB:

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)

Read More Problem

Jika Kamu pernah mengeluh, kenapa sih kalau mau pasang Read More harus mengedit dulu saat posting? kenapa sih kalau potingannya sedikit, read more tetap muncul? Itulah keluhan beberapa blogger yang sering kudengar. Nah, setelah surving ke sana ke sini, akhirnya dapat jawabannya . . . .

Untuk membuat Read More Otomatis, alias tanpa edit-edit dulu waktu posting ,Kamu bisa baca di sini.
Lalu, yang problem kenapa Read More tetap muncul pada postingan yang sedikit, di postingan ini akan kita bahas nareng-bareng . . . .Yuk ! Perhatikan ya

1. Masuk ke blogger, buka Layout => Edit HTML
2. Backup template dulu, nanti mbok ada kesalahan . . .(caranya : baca di sini)
3. Selanjutnya, cetang pada  "Expand Widget Template"
4. Letakkan kode di bawah ini,  di atas kode (Gunakan Ctrl + F)

<script type='text/javascript' src='http://www.geocities.com/kendhin_x/Readmore.js' />

5. Cari script berikut

<div class='post-body'>

kalo tidak ada coba cari yang ini

<div class='post-body entry-content'>

6. Trus ganti script tadi sehingga menjadi seperti ini

<div class='post-body' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>

7. Nha dibawahnya kan ada script seperti ini;

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

8. Taruh script berikut dibawah script diatas

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:href='data:post.url'>Read More......</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>

9. Keseluruhan script akan menjadi seperti ini:

<div class='post-body' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:href='data:post.url'>Read More......</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>

10. Terus simpan pekerjaanmu.

Langkah berikutnya:

1. Pergi ke menu "Setting --> Formatting" 
2. Dibagian bawah ada kota yang bertuliskan "Post Template"
3. Bagi yang belum pernah pake read more maka didalam kotak tersebut akan kosong. tapi bagi pake "Read More Versi 1" dulu tulisannya seperti ini :

<span class="fullpost">

</span>

4. Nha kalo yang sekarang ganti/isi kotak tersebut dengan kode berikut:

<span id="fullpost">

</span>

5. Terus Klik Tombol "Save".

Nha Waktu posting pilih Tabs "HTML", JIka pingin Tulisan "Read More" tidak muncul maka hapus script ini:

<span id="fullpost">

</span>

Jika kode tersebut sudah dihapus, maka Read More tidak akan tampil

Selamat Mencoba

Cara Membuat Read More Versi Dulu

Menulis potingan dengan isi yang banyak memang sulit, apa lagi menulis postingan yang benar-benar berbobot. Dalam dunia posting-memosting dikenal istilah "Read More", yaitu kata yang mengarahkan supaya pembaca melanjutkan untuk membaca artikelnya sampai habis. Untuk "Read More Versi Lama" berikut langkah-langkahnya :

1. Buka menu Layout kemudian pilih Edit HTML.
2. Kasih tanda cek (centang) pada cekbox "expand widget template"
3. Cari kode berikut di Template blog kamu (tempatnya kira-kira pada 1/4 bagian bawah kode hmtl) :

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

4. Kalau sudah ketemu, Ganti kode kode tersebut sehingga menjadi seperti ini:

<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'>Read More......</a>
</b:if>

Tulisan "Read More....." itu bisa kamu rubah, misalnya jadi "Baca Selengkapnya".

5. Simpan hasil pengeditan.
6. Kemudian pilih menu Setting lalu pilih Formatting
7. Pada kotak Post Template isikan kode berikut:

<span class="fullpost">


</span>

8. Kemudian Simpan.
9. Ketika memposting, kan disana ada 2 tab pilihan tuh, yang "Compose" dan "Edit Html", Nha km pilih Yang "Edit HTML", Maka secara otomatis akan tampak kode seperti berikut :

<span class="fullpost">


</span>

10. Letakkan abstraksi posting atau artikel yang akan ditampilkan dihalama utama (sebelum tulisan "Redmore") diatas kode ini :<span class="fullpost"> sementara sisanya yaitu keseluruhan posting letakkan di antara kode <span class="fullpost"> dan</span>


(update : Pasang Read More Otomatis )