Read More Menggunakan Gambar

Kali ini saya akan membahas cara mengganti tulisan read more atau baca selengkapnya menggunakan gambar atau icon. Saya buat posting ini karena kawan Kurochan pernah bertanya cara mengganti tulisan buat read more dengan gambar, untuk membuatnya cukup mudah, ikuti langkah2 berikut :

(--)Bagi kawan yang belum membuat read more silahkan klik disini (untuk template klasik) dan disini (untuk template baru)

1. Login ke blogger
2. Klik Tata Letak ( layout)
3. Edit HTML
4. Beri tanda centang pada tulisan Expand Your Widget Template
5. Cari kode di bawah ini

<a expr:href='data:post.url'>Read More......</a>

Ganti tulisa Read More..... dengan kode html dari penyedi tempat upload foto contohnya photobucket.com, ini salah satu contoh kode html dari photobucket

<a href="http://s654.photobucket.com/albums/uu263/lawuh/?action=view&current=panah.jpg" target="_blank"><img src="http://i654.photobucket.com/albums/uu263/lawuh/panah.jpg" border="0" alt="Photobucket"></a>

gambarnya seperti ini



Klik pratinjau--> lalu klik simpan

---

Jika masih tidak berhasil gunakan saja cara ini :

---

Pada menu CSS, kawan cari kode ini

]]></b:skin>

Lalu tambahkan kode berikut di atas kode tadi

.more {
background:url(URL tempat gambar kawan menaruh gambar)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;
}

Ganti kode URL tempat gambar kawan menaruh gambar dengan kode link tempat kawan menaruh gambar kawan

Carilah kode ini

<a expr:href='data:post.url'>Read More......</a>

Lalu ganti tulisan Read More.... dengan kode di bawah ini

<p class='more'>&#187; Read More.... </p>

Tulisan Read More masih bisa diganti dengan Baca Selengkapnya atau apalah terserah kawan.


Tambahan :

.more {
bottom:5px;
font-family:verdana;
font-size:80%; = ukuran teks bisa diganti menggunakan satuan pixel misal 12px.
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold; = ukuran tebal teks bisa diganti Normal
line-height:normal;
padding-right:10px;
text-align:right; = posisi teks di samping kanan, lawanya left atau center (tengah)
white-space:nowrap;
}


Ingat kawan dapat memodifikasi dan mengganti kode-kode tersebut. So, Happy Blogging...