Ensiblogpedia: Cara membuat "read more" pada blogger

Tidak perlu saya jelaskan lagi sudah berapa banyak postingan yang menjelaskan mengenai hal ini, tapi tetap saya tulis guna memenuhi arsip ensiblogpedia ini. Banyak referensi yang saya ambil mengenai pembuatan readmore ini. Secara garis besar, saat ini membuat readmore dapat dilakukan dengan 3 cara. Cara-cara tersebut terbagi menjadi 2 jenis, yaitu cara langsung dengan fitur yang sudah di sediakan oleh blogger itu sendiri, atau dengan cara pihak ketiga yang sering disebut css-hack. Berikut ini penjelasannya.

CARA PERTAMA : Membuat readmore dengan jump-break dari blogger.

Login ke blogger seperti biasa.
Masuk ke menu Layout, Edit HTML lalu centang box "Expand widget template".
Cari kode <data:post.body/>, lalu copas kode berikut dibawahnya.

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'>

<data:post.jumpText/></a> </div> </b:if >

Simpan editan kamu lalu beralih ke Page element atau Elemen Halaman.
Pada bagian posting, klik edit lalu masukkan kata-kata readmore-nya sesuai dengan keinginan kamu. Boleh Bersambung, dll. Lihat gambar dibawah.
Pada saat kamu membuat postingan baru, maka kamu tinggal memenggal kalimat/paragraf yang ingin di sembunyikan dengan menekan tombol jumpbreak.
Percantik tampilan readmore kamu ??? Tambahkan beberapa kode berikut untuk membuat tampilan readmore-nya sedikit berbeda.
- Membuat latar belakang warna untuk tulisan readmore.
  Tambahkan kode berikut tepat setelah kode <b:skin>
  
  .jump-link a {
  background: #ffff00;
  padding: 3px;
  color: #fff;
  }
  .jump-link a:hover {
  background: #000000;
  padding: 3px;
  color: #ccc;
  }
  
  Yang berwarna merah dapat kamu ganti dengan warna kesukaan kamu sendiri.
- Mengganti tulisan readmore dengan gambar. Caranya kamu tinggal mengganti kode yang paling pertama saya berikan diatas dengan kode berikut ini,
  
  <b:if cond='data:post.hasJumpLink'>
  <div class='jump-link'>
  <a expr:href='data:post.url + "#more"'>
  <Url alamat dari gambar yang ingin dijadikan readmore/></a>
  </div>
  </b:if >