11 November 2010

Membenahi Read more

Bosan dengan tampilan Read more yang ada pada tampilan blog ini, saya mencoba memodifikasinya dengan tampilan image yang saya buat dengan adobe photoshop. Dan jika anda pernah download template hasil modifikasi minima yang saya beri nama "Thirteen Mag Blogger Template", maka tidak ada salahnya trik yang saya tulis dibawah ini dipraktekkan.

Pada Edit html, cari kode dibawah ini :

]]></b:skin>

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>

.... dst ( bagian ini tidak saya jelaskan)

.post {
width: 400px;
float: left;
}

.... dst ( bagian ini tidak saya jelaskan)

</b:if>
</style>

Nah, pada bagian .post tambahkan position: relative, sehingga setelah ditambahkan susunannya akan menjadi seperti dibawah ini :

.post {
width: 400px;
position: relative;
float: left;
}

Kemudian tambahkan kode berikut ini , sebelum kode  </b:if>

#showlink a {position: absolute; left:290px; padding-top:20px; display:block; background:url(http://1.bp.blogspot.com/_Tj_19swNuzI/TNt39oXVZYI/AAAAAAAABEc/zcUOX86C47M/s1600/selanjutnya.png) no-repeat; height:30px; width:100px; padding:0 0 0 0;}
#showlink a:hover {background:url(http://4.bp.blogspot.com/_Tj_19swNuzI/TNt4B6brbnI/AAAAAAAABEg/IDziv-Ac9SI/s1600/selanjutnya2.png) no-repeat;}

Simpan dulu template  yang telah diubah, kemudian centang Expand Widget Templates dan cari kode dibawah ini :

<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>&#187;&#187;&#160;&#160;read more</a></span>

Ganti kode diatas dengan kode dibawah ini :

<span id='showlink'><a expr:href='data:post.url'/></a></span>

Klik pratinjau dulu untuk memastikan hasilnya baru kemudian simpan template yang telah diubah.

Untuk masalah gambar, silahkan dibuat sesuai selera yang penting ukuran gambar adalah 30 X 100px.
Dengan tampilan Readmore yang sekarang, blog ini terasa beda.  Harapan saya, semoga bagi pengguna template "Thirteen Mag Blogger Template" semoga sukses mengganti readmore anda.

3 komentar:

yuniico mengatakan...

Job Feed Aggregator : wah informasi yang diberikan sangat berguna sekali, terimakasih sekali untuk artikelnya :) General Forum Discussion

salam

Indonesia News Aggregator

Yogi M mengatakan...

Artikel dan blognya bagus juga, komentar juga ya ke blog saya www.infonotesharian.blogspot.com

kartu kredit mengatakan...

terima kasih infonya..sob salam sukses.

Posting Komentar

 
Foto saya
Ketidaktahuan anda adalah kepedulianku untuk selalu memberikan informasi, meski hanya sekedar hilangkan rasa ingin tahu saja.