Apakah blog anda sudah termasang Read More ( pemengalan artikel ) ? jika bloem silahkan baca postingannya di sini. - walaupun tulisan-nya acak-acak moga saja dapat membantu.
Namun jika anda sudah memasangnya, kepikiran tidak oleh anda untuk sedikit mempercatik tulisan " Read More " -nya ?.
Jika jawabannya " Ya " silahkan lanjutkan membaca tulisan ini.
Jika " Tidak " tolong tutup saja blog ini. hehehehehe..
Ok. yang akan saya tunjukan hanyalah satu variasi saja dari sekian kemungkinan-kemungkinan yang bisa kita lakukan untuk mempercantik tulisan "read more " ini. mudahan-mudahan dari yang satu ini anda dapat membuat konsep dan desain sendiri nantinya.
Dan read more style ini mengacu atau menjiplak pada tulisan "read more"-nya ala Yahoo. - yang posisinya di samping kanan.
Pertama : Memasukan kode Css.
Buka halaman Edit Html kemudian tandai tulisan Expand Template Widget.
Setelah itu simpan kode di bawah pada baris halaman kode Css.
.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;
}
atau bisa juga simpan atau letakan seperti pada ilustrasi gambar.
Kedua : Memasukan tag <p class='more'>..</p> pada elemen Html.
Kemudian cari tulisan " Read More " di antara kode ini.
<p><data:post.body/></p>
<span id='showlink'>
<a expr:href='data:post.url'>Read More......</a>
</span>
gunakan kotak pencarian browser ( Ctrl + F ). setelah ketemu.
ganti tulisan Read More...... –nya dengan kode di bawah.
<p class='more'>» Read More.... </p>
Silahkan lakukan inprovisasi pada tulisan " Read More " misalkan - "Countinue Reading" or " Baca Selanjutnya " dll.. terserah ente.
Setelah beres Simpan Perubahan.
Menambah Gambar.
Jika suka dengan gambar, kita pun bisa menambahkan gambar-nya.
Untuk melakukanya tambahkan saja properti Background:url ( alamat gambar ) no-repeat right;
.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 Yang 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;
}
Tulisan Yang Rada Nyambung.
1. membuat-read-more-di-new-blogger
0 comments:
Post a Comment