Selamat Datang Di www.catatan-yahya.blogspot.com, Atas Kunjungan Anda Kami Ucapkan Terimakasih...

Senin, 21 Januari 2013

Cara Membuat Read More Yahoo! Style


Blog anda sudah mengaplikasi Read More dan anda ingin membuat variasinya? Read more Yahoo! style ini mengacu pada tulisan "read more"-nya ala Yahoo. - yang posisinya di samping kanan. Variasi ini kelihatannya belum banyak yang mengaplikasikan. Anda mau mencoba? Ok, ikuti langkah-langkahnya ya?!

1. Memasukan kode 
Login ke blogger, pilih layout, buka halaman Edit Html kemudian centang tulisanExpand Template Widget.
Setelah itu taruh kode ini di bawah ]]></b:skin>

.more {
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;
}

2. Memasukan tag <p class='more'>..</p> pada elemen Html.
Cari tulisan "Read More" atau ”Selengkapnya” atawa ”Baca Selengkapnya”! Kamu bisa gunakan kotak pencarian browser ( Ctrl + F ).
Can you find it? Good…

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

Tambahkan tag <p class='more'>&#187; ..</p> seperti tulisan di bawah.

<a expr:href='data:post.url'> <p class='more'>&#187Read More...</p></a>

Silahkan berimprovisasi sendiri pada tulisan " Read More " misalkan diganti dengan“Baca Selanjutnya"“Seterusnya”“teruskan bacanya ya?!…” dll. Up to you dech!!!
Ok beres. Simpan Perubahan.

3. Menambah Gambar.
Anda pun bisa menambahkan dengan gambar.

Tambahkan saja properti Background:url (alamat gambarmu) no-repeat right; di bawah kode more {

.more {
background:none;url(http://i120.photobucket.com/albums/o190/jaloewig/blogger/reedmore-bg.gif) no-repeat right;
bottom:5px;
font-family:verdana;
font-size:80%;

Penjelasan.
.more {
bottom:5px;
font-family:verdana;
font-size:80%; = ukuran teks bisa juga pake satuan pixel misal 10px.
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;

Hoi bro, coba donk

0 Responses to “Cara Membuat Read More Yahoo! Style”

Posting Komentar

All Rights Reserved RISKA GROUP | Blogger Template by Bloggermint