Kamis, 05 Maret 2009

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

Read More Menggunakan Gambar

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

5 komentar:

  1. wah berguna kali ne tutorial
    arigatou gozaimasu
    akan ku coba di blog kelas

    BalasHapus
  2. Cucok

    Salam dari LembarKreatif

    BalasHapus
  3. sebelumnya saya berterimakasih atas tutorial ini,,,saya mau tanya, maksud " URL tempat gambar kawan menaruh gambar ", itu kode direct link atau kode HTML atau alamat tempat meng upload??? terimakasih atas jawabnnya..mhn dibalas segera..

    BalasHapus

Sialahkan kawan berkomentar tentang artikelnya...karena komentar kawan sangat berarti bagi blog ini...^_^ salam Blogger