Read More Dengan Teknik Gambar

Sebelumnya menggunakan Read More Dengan Teknik Gambar Bila Sobat belum pernah membuat read more seharusnya membaca dulu disini.
Setelah itu baru sobat lanjutkan Read More Dengan Teknik Gambar.
Tutorial ini saya dapat dari kang jaloe nih, Baiklah saya buat tutorialnya dengan lebih mudah.

• Login ke blogger.com

• Klik Tata Letak/Layout

• Klik Edit HTML-->Sebelumnya terlebih dahulu anda backup dulu templatenya dengan mengklik Download Template Lengkap.Supaya bila terjadi kesalahan maka bisa diulang kembali.

• Kemudian Centang Expand Widget Template

• Masukkan Kode Ini :

  .more {
  background:url(http://img412.imageshack.us/img412/8126/reedmorebgvk0.gif) no-repeat right;
  bottom:5px;
  font-family:verdana;
  font-size:80%;
  font-size-adjust:none;
  font-stretch:normal;
  font-style:normal;
  font-variant:normal;
  font-weight:bold;
  line-height:normal;
  padding-right:10px;
  text-align:right;
  white-space:nowrap;
  }

  Di atas kode ]]></b:skin>

klik gambar untuk perbesar

• Cari kode

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

• Kemudian lihat tulisan ini :

  <p><data:post.body/></p>
  <span id='showlink'>
  <a expr:href='data:post.url'>Read More......</a>
  </span>

• Ganti tulisan Read More...... dengan <p class='more'>&#187; Read More.... </p>

• Read More...... bisa sobat ganti dengan Lanjutkan membaca... Klik Membaca... atau sebagainya
  

• Klik Simpan Template

Keterangan Tidak Penting :

.more {
bottom:5px;
font-family:verdana;
font-size:80%; = ukuran teks bisa juga pake satuan fixel misal 12px.
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold; = ukuran tebal teks lawannya Normal
line-height:normal;
padding-right:10px;
text-align:right; = posisi teks di samping kanan lawanya left or center
white-space:nowrap;
}

Ya begitulah semoga sobat berhasil deh.