MEMBUAT SUDUT TUMPUL/ROUNDED CORNER
Bagaimana membuat sudut blog menjadi tumpul? ok, kita bincangkan di sini. Membuat sudut-sudut blog menjadi tumpul sangatlah mudah, kita hanya menambahkan beberapa kode ke bagian edit HTML blog. Dan sudut-sudut tumpul dalam blog itu dinamakan "rounded corner". Pada postingan kali ini kita bahas bagaimana membuat sudut tumpul tanpa gambar.
Ok, kita langsung ke pokok bahasan...
Full Rounded Corner
Rounded Corner Kiri Atas
- Untuk Rounded Corner kiri bawah tinggal mengganti kode topleft menjadi bottomleft.
- Untuk Rounded Corner kanan bawah tinggal mengganti kode topleft menjadi bottomright.
Rounded Corner Atas
Rounded Corner Bawah
Ok, kita langsung ke pokok bahasan...
Full Rounded Corner
background-color:#ddd;
border:3px solid #ffcc00;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px;
border:3px solid #ffcc00;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px;
Rounded Corner Kiri Atas
background-color:#ddd;
border:3px solid #ffcc00;
-moz-border-radius-topleft: 15px;
-webkit-border-radius-topleft: 15px;
-khtml-border-radius-topleft: 15px;
border-top-left-radius: 15px;
- Untuk Rounded Corner kanan atas tinggal mengganti kode topleft menjadi topright.border:3px solid #ffcc00;
-moz-border-radius-topleft: 15px;
-webkit-border-radius-topleft: 15px;
-khtml-border-radius-topleft: 15px;
border-top-left-radius: 15px;
- Untuk Rounded Corner kiri bawah tinggal mengganti kode topleft menjadi bottomleft.
- Untuk Rounded Corner kanan bawah tinggal mengganti kode topleft menjadi bottomright.
Rounded Corner Atas
background-color:#ddd;
border:3px solid #ffcc00;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
-webkit-border-radius-topleft: 15px;
-webkit-border-radius-topright: 15px;
-khtml-border-radius-topleft: 15px;
-khtml-border-radius-topright: 15px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border:3px solid #ffcc00;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
-webkit-border-radius-topleft: 15px;
-webkit-border-radius-topright: 15px;
-khtml-border-radius-topleft: 15px;
-khtml-border-radius-topright: 15px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
Rounded Corner Bawah
background-color:#ddd;
border:3px solid #ffcc00;
-moz-border-radius-bottomleft: 15px;
-moz-border-radius-bottomright: 1px;
-webkit-border-radius-bottomleft: 15px;
-webkit-border-radius-bottomright: 15px;
-khtml-border-radius-bottomleft: 15px;
-khtml-border-radius-bottomright: 15px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
border:3px solid #ffcc00;
-moz-border-radius-bottomleft: 15px;
-moz-border-radius-bottomright: 1px;
-webkit-border-radius-bottomleft: 15px;
-webkit-border-radius-bottomright: 15px;
-khtml-border-radius-bottomleft: 15px;
-khtml-border-radius-bottomright: 15px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
- Untuk warna background dan warna border bisa sobat sesuaikan dengan selera.
- Semakin besar nilai ( 15px ) maka semakin tumpul sudut tersebut.
Selamat mencoba......
- Semakin besar nilai ( 15px ) maka semakin tumpul sudut tersebut.
Selamat mencoba......
7 komentar — Skip to Comment
makasi byk tipsnya :)
Boleh juga tu infonya gan. cuma gimana cara meletakkannya. or posisi untuk meletakkan rounded corner tsb.
Sekedar sharing, saya juga telah menyediakan tutorial tentang Cara Membuat Postingan Rata Kanan-Kiri (Auto Justify)silahkan klik aja judul di atas
Mau tanya, untuk template klasik (mudah), kodenya ditolak karena kontra ama variablenya yg ada. tolong solusinya. Terima kasih.
yuup corner outer wrapper blog saya sekarang jadi tumpul gan... makasih...
ada gk template sperti :
http://suryasindhu.com/index.php
web_mulia@ymail.com
oh tq!
Hmm . . pasangny di Template > Edit HTML yah?
Posting Komentar — or Back to Content