Posting Blog Tampil Dengan Border Melengkung

sekarang anda dapat menampilkan border post dalam bentuk kotak yang sudutnya melengkung.
contoh seperti gambar dibawah ini :

Caranya, anda hanya perlu menambahkan sedikit kode pada bagian post, maka blog andapun akan tampil dengan border melengkung.
Ikuti langkah=langkah dibawah ini :

• Masuk ke Blogger.
• Pilih Rancangan kemudian pilih Edit HTML.
• Cari kode seperti dibawah ini :

post {margin:.5em 0 1.5em;border-bottom:1px dotted $bordercolor;padding-bottom:1.5em

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;

Setelah selesai menambahkan kode border diatas, klik tombol Simpan Template.
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...!!!

• Tweet
• Share
• Share
• Share
• Share

Sign up here with your email