Memodifikasi tampilan read more

Untuk tutorial ini blog anda harus terpasang read more. Apakah blog anda sudah terpasang read more ? Jika belum, anda bisa baca disini.

Kesempatan kali ini, saya gunakan untuk penampilan perdana blog saya setelah custom domain kemarin. Nah ... untuk tampilan read standar di blogger new version cara memodifikasinyapun sangat bervariasi. Dari merubah posisi link read more, jenis font, background, dan lain - lain.


1. Mengubah style read more
Maksudnya mengubah style ? Nah ... pernah lihat link read more Yahoo! seperti ini » kan ... :). Kurang lebih menjadi seperi itu. Caranya : expand widget template kamu, lalu pasang kode ini diatas kode ]]></b:skin>.

.readmore {
bottom:5px;
font-family:verdana; ( jenis font )
font-size:80%; ( ukuran link read more / dalam satuan pixel )
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; ( posisi link read more - left,center, ... )
white-space:nowrap;
}

Lalu cari tulisan link read more anda ( read more, selengkapnya, atau tergantung punya anda ... :p ) . Lalu pasang kodenya seperi berikut : ( tambahkan kode yang dicetak tebal )

<a expr:href='data:post.url'><p class='readmore'>&#187;&#187; Selengkapnya ..... </p></a>

Ojo lali disimpen yo ... :D

2. Menambahkan background pada read more
Ini lebih mudah lagi, perhatikan saja kode CSS sebelumnya, lalu tambahkan kode yang berwarna merah ,

.readmore {
background:none;url(http://www.url image kamu.com/...... .gif) no-repeat right;
bottom:5px;
font-family:verdana; ( jenis font )
font-size:80%; ( ukuran link read more / dalam satuan pixel )
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
.....

Ojo lali disimpen maneh yo ... :D

3. Menambahkan Judul Post di Read more
Langusng saja cari kode berikut, dan tambahkan kode yang berwarna hijau.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<a expr:href='data:post.url'><p class='readmore'>&#187;&#187; Selengkapnya <data:post.title/> ..... </p></a>
</b:if>

Sekali lagi, ojo lali disimpen maneh yo ... :D

Semoga sedikit tutorial diatas membantu kalian. Happy blogging :$ !