Cara membuat efek bulat pada sudut sidebar

Bagi yang ingin membuat blog-nya kelihatan menarik, mungkin artikel Cara membuat efek bulat pada sudut sidebar ini sangat berguna sekali.

Efek ini dapat mempercantik blog anda dengan sedikit teknik simpel yang bisa anda praktekkan.
anda bisa lihat contoh pada gambar di samping. indah bukan ?

Tapi sebelumnya saya sarankan untuk back-up template anda, jika belum tau cara back-up template, silahkan baca artikel saya yang berjudul Cara aman mengedit template blog

atau jika disaat mencari kode tersebut dan ternyata belum bisa menemukan kode-kode yang saya tuliskan, mungkin sebaiknya anda membaca artikel saya yang berjudul Mengapa kita tidak bisa menemukan kode HTML blog yang kita cari terlebih dahulu.

Disini anda hanya tinggal menyisipkan kode :

-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 20px;
-moz-border-radius-bottomright: 20px;

dan kenali struktur sidebar anda.

yang saya lakukan pada template saya adalah menyisipkan pada sidebar sebelah kanan atas dan 2 anak sidebar di bawah nya, maka saya mencari kode :

#sidebar2 .widget {
margin: 0px 0px 4px 0px;
padding: 15px 15px 15px 15px;
background: $sidebar1bgColor;
border: 1px solid $sidebar1BorderColor;

-moz-border-radius-topleft: 20px;

-moz-border-radius-topright: 20px;

}

#sidebar3 .widget, #sidebar4 .widget {
margin: 0px 0px 4px 0px;
padding: 15px 15px 15px 15px;
background: $sidebar1bgColor;
border: 1px solid $sidebar1BorderColor;

-moz-border-radius-topleft: 20px;

-moz-border-radius-topright: 20px;

}

lalu scroll di bawahnya akan ketemu kode :

#sidebar1 h2, #sidebar2 h2, #sidebar3 h2, #sidebar4 h2 {
margin: -15px -15px 10px -15px;
padding: 5px 15px 5px 15px;
text-align: center;
color: $sidebar1HeaderColor;
font: $sidebarHeaderFont;
text-transform: uppercase;
text-decoration: none;
background: $sidebar1HeaderBgColor;
border-bottom: 1px solid $sidebar1BorderColor;

-moz-border-radius-topleft: 20px;

-moz-border-radius-topright: 20px;

}

Panjang ya ? hehee..nggak kok, tugas kita cuma menyisipkan, bukan merancang.

Perhatikan pada tulisan merah pada kode diatas.
Itulah sisipan kode yang saya lakukan pada template saya, karena saya hanya ingin sudut bulat tersebut hanya ada pada atas sidebar.

jika anda ingin melakukan nya, inilah cara membuat nya:

1.Login ke blogger
2.menuju rancangan => edit HTML & centang pada Expand Template Widget
3.carilah kode #sidebar2 .widget { dan scroll ke bawah untuk kode sidebar lainnya sesuai keinginan anda untuk menata sudut bulat di sidebar mana saja (silahkan mencoba dari kode yang saya lakukan seperti pada kode diatas).
4.Simpan template & lihat hasil nya.

Semoga sharing saya tentang Cara membuat efek bulat pada setiap sudut sidebar blog anda bisa bermanfaat.

Review:

Judul	Cara membuat efek bulat pada sudut sidebar
Deskripsi	Bagi yang ingin membuat blog-nya kelihatan menarik, mungkin artikel Cara membuat efek bulat pada sudut sidebar ini sangat berguna sekali. ...
Author	Unknown
Author Rating	4/ 5 Suara Dari 1001 Ulasan

Dapatkan artikel menarik lainnya : Klik disini

1 komentar... Terima Kasih Menjadi Pengomentar Pertama