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 tulisan Expand 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'>» ..</p> seperti tulisan di bawah.
<a expr:href='data:post.url'> <p class='more'>» Read 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;
}
selamat mencoba
1. Memasukan kode
Login ke blogger, pilih layout, buka halaman Edit Html kemudian centang tulisan Expand 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'>» ..</p> seperti tulisan di bawah.
<a expr:href='data:post.url'> <p class='more'>» Read 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;
}
selamat mencoba
