Macam Cara Membuat Read More di Blogspot

sambil menyelam minum aer, sambil searching2 buat blog sendiri sekalian gue posting juga, bingung lumayan banyak tutorial tentang "cara membuat read more di blogspot".
langsung aja nyokkkkk...
capcyusssss cyinnn....

1. Dapet dari http://fuadpahing.blogspot.com/2008/03/membuat-read-more-pada-blogger.html 

Untuk membuat readmore ikuti langkah dibawah ini :

Langkah Pertama:
Buka Template --> Edit HTML -->Berikan tanda centang pada "Expand widget template"

Langkah Kedua:

Jangan Lupa backup blogger dengan mengklik "dowlnoad template lengkap" ntar kalo ada kesalahan, huhehe

Langkah Ketiga:

Cari kode dibawah ini:
<div class='post-header-line-1'/>
<div class='post-body'>

Tips :
Untuk mempermudah pencarian kode diatas sebaiknya ikuti tips berikut ini. pertama kamu buka program text editor misalnya notepad.exe ( Pada MS Windows tekan menu Start -> Proggram -> Accessories -> Notepad) kemudian kopy/paste kode HTML tadi ke notepad. kemudian pada notepad pilih Menu Edit -> Find. pada box find masukan kode ini
<div class='post-header-line-1'/>
kemudian klik tombol Find next. (jika masih gak ketemu terpaksa kita melakukan pencarian secara manual)
Jika sudah menemukan kode diatas, Copy-Paste kode dibawah ini kemudian letakan kode tersebut dibawah kode diatas.

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>


Kemudian dibawah kode diatas kita akan menemukan kode:
<p><data:post.body/></p>
Lakukan Copy-Paste kode dibawah ini dibawah code diatas

<a expr:href='data:post.url'>Readmore »»</a></b:if>


Tips: Kode Readmore diatas bisa ganti dengan kalimat sendiri (contoh "Baca Selanjutnya", "Baca berikutnya", "Selengkapnya")
Kode selengkapnya jika dilihat akan tampak sebagai berikut:
<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 kita mengedit langsung pada halaman blogger Edit HTML dan semua kode diatas sudah dilakukan perubahan, jangan lupa disimpan ya :)
Ini jika kita menggunakan Text Editor Notepad : Setelah melakukan pengeditan kode pada notepad, lalu hapus semua kode yang ada pada halaman edit blogger, kemudian masukan seluruh kode pada notepad tadi dengan cara copy/paste) Sampai disini pengeditan kode selesai, jangan lupa disimpan.
Langkah Empat
Setelah kode diatas disimpan kita kembali dan masuk ke tab Pengaturan--> Format--> dan cari "Post Template" Kemudian pada kotak masukan kode dibawah ini

<div class="fullpost">
</div>

Jangan lupa disimpan :)

Langkah Kelima :
Disini saya akan menjelaskan cara penggunaan readmore pada halaman posting. Ketika kita melakukan posting pertama kali kita akan melihat kode:


<div class="fullpost">
</div>
ingat jangan hapus kode diatas karena kode tersebut merupakan kode yang akan kita gunakan dalam pemenggalan posting nantinya. Dan cara memposting adalah:
POSTINGAN AWAL

<div class="fullpost">
POSTINGAN SELANJUTNYA
</div>

2. Dapet dari http://www.belajarngeblog.com/cara-membuat-read-more-di-blogspot

Membuat Read More di Blogspot

• Login ke akun blogger anda, pilih blog yang ingin anda edit, klik link Layout kemudian masuk ke Edit HTML
• Jangan lupa centang/tandai/aktifkan Expand Widget Templates Untuk bisa mengedit template secara keseluruhan.
• Masukkan kode berikut sebelum tag </head> atau tepat sesudah kode } ]]></b:skin>seperti dibawah ini :

<style> <b:if cond='data:blog.pageType == "item"'> span.fullpost {display:inline;} <b:else/> span.fullpost {display:none;} </b:if> </style>
• Selanjutnya mengatur supaya postingan terpotong, cari kode <p><data:post.body/></p> dalam template anda dan tambahkan kode berikut tepat dibawahnya:

<b:if cond='data:blog.pageType != "item"'> <a expr:href='data:post.url'> Read More..</a> </b:if>
• Nah supaya terpotong, setiap kali anda menulis artikel posting, klik pada bagian artikel dimana anda  pengen tulisan Read More.. muncul, lalu  ketik <span class=”fullpost”> kemudian lanjutkan sisa artikel  sampai selesai, akhiri dengan mengetik  </span>.  Untuk menmbahkan kode ini, ketika menulis artikel, anda harus dalam mode Edit HTML bukan Compose
• Tulisan Read More.. seperti yang berwarna merah pada kode diatas, bisa anda ganti dengan tulisan lain seperti Baca Selengkapnya.. atau Lanjut Baca..

Contoh Penulisan Posting

Ini adalah awal berita yang ingin saya potong karena terlalu panjang kalo postingan muncul semua, oleh karena itu saya perlu memotong berita sampai disini saja. <span class=”fullpost”> Dan ini adalah sisa postingan saya yang akan saya sembunyikan dan hanya muncul pada saat post page atau link read more.. diklik </span>

Hasil akhir posting akan tampak seperti ini :

Ini adalah awal berita yang ingin saya potong karena terlalu panjang kalo postingan muncul semua, oleh karena itu saya perlu memotong berita sampai disini saja. Read more..

3. Dapet dari  http://m-wali.blogspot.com/2011/04/membuat-readmore-otomatis-di-blog.html

Membuat Readmore Otomatis di Blog - Fungsi Readmore/baca selengkapnya pada posting adalah untuk menghemat halaman depan website/blog agar tidak terlalu panjang, selain itu juga dapat merangsang pengunjung untuk membaca salah satu posting di halaman depan website/blog tersebut.

Nah jika berkeinginan untuk pasang readmore otomatis pada blogspot Anda, silahkan ikuti langkah-langkahnya sebagai berikut:

Sebelum memulai memasang readmore otomatis pada blogspot/blogger Anda, ada baiknya perhatikan hal-hal sebagai berikut :

1. Download dan simpan template Anda terlebih dahulu, karena jika pemasangan gagal anda masih bisa mengembalikan blog anda seperti semula;
2. Jangan lupa untuk memberi tanda centang pada tulisan Expand widget template;
3. Untuk memudahkan pencarian code, gunakan tombol Find, caranya pada browser Anda klik pada menu Edit lalu pilih Find atau melalui keyboard komputer Anda, tekan Ctrl + F, lalu copy paste code yang mau dicari ke dalam kotak Find lalu Enter/Next;
4. Ini yang paling penting, apabila sebelumnya Anda sudah menggunakan Readmore versi lama, maka hapus dulu codenya.

Adapun langkah-langkah Cara Pasang Readmore Otomatis adalah sebagai berikut:

1. Login ke Account Blogger Anda;
2. Masuk ke halaman Edit HTML, lalu diatas kode </head> letakkan script di bawah 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[
   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>
3. Cari dan 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'>READMORE - <data:post.title/></a></span>
   </b:if>
   <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
   
   Keterangan:
   
   Biasanya kode: <data:post.body/> berada di bawah kode: <div class='post-body'>, maka untuk memudahkan pencarian kode tersebut gunakan tombol Find seperti penjelasan di atas.
4. Simpan/Save Template, selesai.

Keterangan:

Kita dapat menentukan letak tumbnail (gambar), jumlah karakter tulisan baik tanpa maupun dengan tumbnail serta tinggi dan lebar tumbnail pada postingan dengan cara merubah kode merah tebal di atas dan berikut penjelasannya :

1. var thumbnail_mode = "float";: Letak thumbnail berada di “float” kiri atau jika tidak silahkan ganti dengan “no-float”;
2. summary_noimg = 250;: Jumlah karakter yang akan ditampilkan di posting tanpa gambar / thumbnail;
3. summary_img = 250;: Jumlah karakter yang akan ditampilkan di posting dengan gambar / thumbnail;
4. img_thumb_height = 120;: Tinggi thumbnail dalam ukuran piksel;
5. img_thumb_width = 120;: Lebar thumbnail dalam ukuran piksel;
6. READMORE-<data:post.title/>: Tulisan READMORE bisa diganti misalnya dengan “Baca Selengkapnya” dan apabila anda tidak ingin menampilkan judul dibelakang Readmore, Anda bisa menghapus code script ini <data:post.title/>.

naaahhh,, sekarang tinggal dipilih cara 1, 2, atau 3 yang mau loe pakke.

GudLak guyzzz ....