blog tutorial
blog tutorial |
Customisasi Tampilan Read more Posted: 10 Sep 2009 08:13 PM PDT Customisasi Tampilan Read more - Mumpung masih anget tentang tersedianya sistem read more di blogger, maka posting seputar inipun masih dianggap menarik untuk di bahas. Pada kesempatan ini kang Rohman mencoba untuk memberi gambaran bagaimana cara customisasi tulisan " Read more » " atau " Baca Selengkapnya » " agar menjadi sesuatu bentuk lain yang bisa dianggap lebih menarik dari tampilan sebelumnya. Secara default, tampilan " Read more » " atau " Baca Selengkap » " adalah seperti ini "
Besarnya huruf ( font ) akan mengikuti besarnya font yang di setting dalam template anda, begitupun dengan warna link akan sama dengan warna link yang dipakai. Tampilan tersebut sebenarnya bisa anda kreasikan menjadi bentuk lain yang mungkin akan dianggap lebih menarik sehingga akan sedikit menambah keindahan tampilan blog anda.
Sebagai dasar pengetahuan, kode read more blogger adalah seperti ini :
<b:if cond='data:post.hasJumpLink'>
Dengan mengetahui kode dasarnya, maka tentu saja kita dapat membuat berbagai kreasi.
Secara default " Read more " akan tampil di sebelah kiri. Jika anda berkeinginan agar read more tampil di sebelah kanan, anda bisa menambahkan kode tambahan seperti ini :
<b:if cond='data:post.hasJumpLink'> <a expr:href='data:post.url + "#more"'><data:post.jumpText/></a> </div> </div>
Atau jika anda lebih suka memasang pada CSS, bisa seperti ini ;
Simpan ini di atas kode ]]></b:skin>
.readmore { float:right;padding: 10px 0px 5px 0px; }
dan pasang ini di bagian body nya ;
<b:if cond='data:post.hasJumpLink'> <a expr:href='data:post.url + "#more"'><data:post.jumpText/></a> </div> </div>
Agar tampilan " Read more » " atau " Baca Selengkapnya » " bisa tampil dengan huruf tebal, anda cukup menambahkan kode <strong> … </strong> atau <b> … </b>. Contoh : <b:if cond='data:post.hasJumpLink'> <div class='jump-link'> <strong><a expr:href='data:post.url + "#more"'><data:post.jumpText/></a> </strong> </div> </b:if>
<b:if cond='data:post.hasJumpLink'> <a expr:href='data:post.url + "#more"'><data:post.jumpText/> → 
Format kodenya seperti ini ;
<b:if cond='data:post.hasJumpLink'> </div>
Contoh nyata seperti ini :
<b:if cond='data:post.hasJumpLink'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWOUKykHcT1WBgww8tCjwreYPvIDTTJ3GbLxKWw25aCWWhcSN5wh6CSHdlZG6ye7HudNck60Lth8lT_niP24kQKR70KTLFMMUXi_TFqE3DrSQp7gQxaNkXew_x9gPw_fDUjYcpVWIY54E/[1].png' alt='read more'/></a> </div>
Dan anda bisa menciptakan puluhan atau bahkan ratusan kreasi untuk tampilan read more ini agar blog anda tampil menarik.
Masih pusing dimana menempatkan hasil kreasi read more mu? berikut gambaran langkah-langkahnya :
Selamat berkreasi! |
You are subscribed to email updates from Kolom Tutorial To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
Google Inc., 20 West Kinzie, Chicago IL USA 60610 |
0 komentar:
Posting Komentar