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
BLOGGER
- Cara menghapus blog dengan mudah dan singkat
- Cara modifikasi template blog kreasi sendiri
- Cara membetulkan histats yang error
- Memantau trafik lewat facebook insights
- Cara membuat 2, 3, 4 kolom footer blog
- Bagaimana Cara saya menjadi blogger master
- Komentar admin menjorok ke dalam seperti wordpress
- Cara membuat komentar blogspot seperti wordpress
- Efek CSS mempercantik link di sidebar
- Membuat navigasi horizontal sublevel sesuai selera
- Cara membuat efek air pada gambar blog
- Ikon cantik pada older newer post
- Cara menampilkan foto di komentar blog
- Cara membuat buku tamu di blog
- Cara mendapatkan alamat feed blog
- Cara menghapus entri blog
- Panduan untuk meringankan blog anda
- Cara cek loading blog
- Cara mendapatkan hadiah dari google
- Cara berhenti menjadi followers blog
- Cara manual menjadi followers blog
- Tips nge-blog: ingat sekarang era panda !
- Cara membuat blog gratis dalam 3 langkah mudah
- Cara alami menghadapi google panda
- Cara membuat template blog kreasi sendiri
langsung praktek sob