Xx+==x(EXPLORATION)Xx==+==x

Home » Tips Blogger » Posting Blog Tampil Dengan Border Melengkung

Posting Blog Tampil Dengan Border Melengkung

Caranya adalah sebagai berikut :

1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Cari kode seperti dibawah ini :

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

7. 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;

8. Setelah selesai menambahkan kode border diatas, klik tombol Simpan Template.

♂ Good Luck ♀

Semua ini adalah apa yang pernah aku cobain sendiri . . dan aku dapat/mengerti dari teman2 blogger lainnya karena aku hanya seorang blogger pemula yang ingin mengetahui lebih banyak hal lagi . . . . Thank's