Jumat, 21 Januari 2011 -

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.







4 komentar:

  1. waah boleh di coba niih

    Bikers Indonesia - http://bikersindo.blogspot.com

    Follow ya

    BalasHapus
  2. Terimakasih buat tutorialnya. Salam sukses

    BalasHapus
  3. aku merasa seperti anak kelas 1 dapet soal kelas 6 blas ndak nyantol, tapi trims infonya saya buat latihan di blog saya

    BalasHapus
  4. @Lasino dulu dan sampai saat ini saya sama kawan, masih tetap belajar, cuma kalau kawan mau belajar jangan cepat prustasi dan harus rutin
    -Karena kalau kita mau merubah tampilan Blog sedikit tidaknya kita harus tahu struktur / bagannya Blog kita, saya sudah berapa kali ganti template [sebenarnya ini tidak baik - dan JANGAN DITIRU] :z

    BalasHapus