Read More Style Ala yahoo

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'>&#187; 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

 

Technorati tags: Read More, Tutorial Blogger

Page views this post: reader