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 != "item"'>
.... 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'>»»  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.
Langganan:
Posting Komentar (Atom)
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 ...
-
Sebagaimana kita ketahui, bahwa dalam peradaban "JAWA" banyak kita jumpai aturan-aturan yang bersifat mengikat. Hal ini karena at...
-
Mengamankan data yang kita miliki dari Copas user lain itu sangat penting, terlebih jika data tersebut bersifat rahasia. Fasilitas yang ada...
-
Berikut ini adalah tutorial Efek Foto Fantasi dengan menggunakan Adobe Photoshop CS5, tutorial ini tidak terlalu panjang, sehingga tidak a...
Artikel dan blognya bagus juga, komentar juga ya ke blog saya www.infonotesharian.blogspot.com
BalasHapusterima kasih infonya..sob salam sukses.
BalasHapus