Mempercantik Sidebar dengan CSS

Mempercantik Border dengan CSS seperti postingan saya sebelumnya merupakan hiasan atau kreasi untuk TAB menu Horizontal, Judul di dalam sidebar dan lain sebagainya, seperti contoh tampilan Blog saya ini.

Lihat contoh disamping.

Seumpama kawan bertanya apakah bisa untuk mempercantik Sidebar ??!!  jawabnya tentu bisa, yang penting kawan sedikit mengerti  struktur template yang kawan pakai, dan saya sudah mencobanya pada sidebar Blog atau apalah namanya pada umumnya berbentuk segi empat atau segi empat dan keempat sudutnya melengkung, saya kasi contoh gambar :

Tapi yang ingin saya bicarakan sekarang adalah merubah bentuk sidebar segi empat polos menjadi segi empat dengan sudut melengkung baik satu sudut, dua sudut maupun tiga sudut melengkung silahkan kawan mencoba untuk berkreasi, cara membuatnya selengkapnya silahkan baca atau lihat disini



Okey langsung saja ke TKP :

• Seperti biasa masuk ke account Blogger dengan ID kawan 


• Pada Dasbor pilih atau Klik Edit HTML


• Simpan / Download template kawan dulu untuk antisipasi


• Cari bagian Sidebar keberadaannya sebelum  ]]></b:skin>  


• Perhatikan ciri-cirinya kurang lebih seperti berikut :

/* Sidebar Content */

.sidebar {color: #666666;line-height: 1.5em;font-family: Helvetica;}

#sidebar .widget{border:1px solid #390;background:#DDEEDD; padding:0px;margin-bottom:10px;}

#sidebar .widget-content{border:1px solid #B7B7B7;padding:2px;} dan seterusnya

• Tulisan berwarna merah ( border:1px solid #390; ) ganti dengan css sudut melengkung postingan saya sebelumnya.

Gambar disamping kiri ini adalah tampilan sidebar Blog saya. cara pembuatannya adalah menggabungkan 2 css sudut melengkung yang kiri atas dan kanan bawah.

Biar kawan tak bingung seperti saya ini bingung cara menyampaikan sebaiknya saya beri contoh yang sudah ada sebelumnya :

<div style="border:2px solid #000000;-moz-border-radius-topleft: 10px 10px;-moz-border-radius-bottomleft: 0px 0px; -webkit-border-top-left-radius: 10px 10px;-webkit-border-bottom-left-radius: 0px 0px; -border-top-left-radius: 10px 10px;-border-bottom-left-radius: 0px 0px;">

<center>CONTOH</center>

<div style="border:2px solid #000000;-moz-border-radius-topright: 0px 0px;-moz-border-radius-bottomright: 10px 10px; -webkit-border-top-right-radius: 0px 0px;-webkit-border-bottom-right-radius: 10px 10px; border-top-right-radius: 0px 0px;border-bottom-right-radius: 10px 10px; ">

<center>CONTOH</center>

Cara penggabungan :

border:2px solid #000000;-moz-border-radius-topleft: 10px 10px;-moz-border-radius-bottomleft: 0px 0px; -webkit-border-top-left-radius: 10px 10px;-webkit-border-bottom-left-radius: 0px 0px; -border-top-left-radius: 10px 10px;-border-bottom-left-radius: 0px 0px; -moz-border-radius-topright: 0px 0px;-moz-border-radius-bottomright: 10px 10px; -webkit-border-top-right-radius: 0px 0px;-webkit-border-bottom-right-radius: 10px 10px; border-top-right-radius: 0px 0px;border-bottom-right-radius: 10px 10px; ">

Sebelum kawan bertanya : mengapa banyak sekali topleft 10px 10px dan bottomleft 0px 0px  ????? 

Sesuai Table pada postingan saya yang lalu tujuannya agar tampilan Border jadi sama (baik di google chrome, mozilla, Opera maupun yang lainnya) sebagai contoh perbedaan tampilan dengan css sama :

-moz-border-radius-topright: 10px 10px;-moz-border-radius-bottomright: 0px 0px; -webkit-border-top-left-radius: 10px 10px;-webkit-border-bottom-left-radius: 0px 0px; border-top-right-radius: 10px 10px;border-top-left-radius: 10px 10px; ">

Cara merubah sudut melengkung yang di kiri menjadi di kanan hanya merubah right menjadi left begitu pula sebaliknya contoh :

-moz-border-radius-topright: 10px 10px;-moz-border-radius-bottomright: 0px 0px; -webkit-border-top-right-radius: 10px 10px;-webkit-border-bottom-right-radius: 0px 0px; -border-top-right-radius: 10px 10px;-border-bottom-right-radius: 0px 0px;"

Okey saya cukupkan sampai disini dulu, untuk menambah wawasan kawan silahkan kreasikan sendiri biar Blog kawan tampil beda.