POSTING BLOG TAMPIL DENGAN BORDER MELENGKUNG

Setelah tutorial menampilkan postingan dalam bentuk kotak , sekarang anda dapat menampilkan border post dalam bentuk kotak yang sudutnya melengkung. Sebagai contoh, coba anda perhatikan border post EPG Studio yang telah diatur sehingga tampilannya berupa kotak melengkung pada keempat sudutnya.
Caranya, anda hanya perlu menambahkan sedikit kode pada bagian post, maka blog andapun akan tampil dengan border melengkung.
Ikuti langkah=langkah dibawah ini :

1. Masuk ke Blogger.
2. Pilih Rancangan kemudian pilih Edit HTML.
3. Cari kode seperti dibawah ini :
   
   post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em
4. Copy kode dibawah ini, dan paste tepat dibawahnya
   
   
   • Untuk tampilan border melengkung pada seluruh (4) sudut :
     
     
     -moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px
   • Untuk tampilan border melengkung pada 2 sudut bagian atas :
     
     
     
     -moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-radius-topleft: 10px;
-webkit-border-radius-topright: 10px;
-khtml-border-radius-topleft: 10px;
-khtml-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
   • Untuk tampilan border melengkung pada 1 sudut bagian kiri atas :
     
     
     -moz-border-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-radius-topleft: 10px;
-khtml-border-radius-topleft: 10px;
border-top-left-radius: 10px
   • Untuk tampilan border melengkung pada 2 sudut bagian bawah :
     
     
     -moz-border-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-radius-bottomleft: 10px;
-webkit-border-radius-bottomright: 10px;
-khtml-border-radius-bottomleft: 10px;
-khtml-border-radius-bottomright: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
   • Border melengkung pada bagian atas kiri dan kanan bawah
     
     
     -moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-radius-topleft: 10px;
-webkit-border-radius-bottomright: 10px;
-khtml-border-radius-topleft: 10px;
-khtml-border-radius-bottomright: 10px;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
5. Setelah selesai menambahkan kode border diatas, klik tombol Simpan Template.
6. Lihat perubahan blog anda sekarang.

Trik diatas dapat juga anda gunakan pada bagian blog yang lain, misalnya sidebar, komentar pengunjung atau bagian apa saja yang penting anda memahami dan mengetahui kode HTML bagian-bagian tersebut.
Selamat mencoba, semoga bermanfaat...!!!

PENTING UNTUK ANDA BACA