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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBPniH-K49uW7_I55lPHKOSN6RS9D32Q0UolIB-E0jJ4ZBujxWRKlVoKN3axAZHkjVnjAW_m2GImDZZAH-iOrun9pN04Qtlgy04XGWy9muuU-jyuSfMtP5dEJa4RY5HHMWuJeXhbVc3gXf/s1600/selanjutnya.png) no-repeat; height:30px; width:100px; padding:0 0 0 0;}
#showlink a:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPUGX2Moa1hLa7zDUqPWXaGePOa2uSINT4_X5DHLLdwc-yF6X1FAQ50c462A_wm5CbJlznUMTpx4FLxq5CFQMUlb5p7NDceAin2mBCC-kBkltbV7cajuYmLsnzFzOoEF2JwtW2WtRjsX9S/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.

2 komentar:

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

    BalasHapus
  2. terima kasih infonya..sob salam sukses.

    BalasHapus

Mockup Hijab Adobe Photoshop Tutorial - FREE FILE PSD

  Mockup Hijab Adobe Photoshop adalah tutorial tentang bagaimana cara merubah warna hijab maupun coraknya. Jika anda ingin mendownload file ...