Tuesday, May 06, 2008

Membuat Rounded Corner di Template Blogger

Ingin tampilan yang agak lentur/ tidak kaku, gunakan rounded corner. Selain kotak biasa, ada pilihan untuk kotak bergaris.Mana yang lebih baik, rounded corner atau kotak biasa? Ini sangat relatif, tergangung desain, juga selera.

Desain yang compact, kubic, tentu lebih tepat menggunakan kotak biasa, tapi untuk tampilan yang bisa match dengan huruf-huruf lengkung, gambar lengkung, tentu lebih tepat menggunakan rounded corner.

Bagaimana membuat rounded corner? Saya akan menunjukkan cara membuat rounded corner di template new blogger. Cara yang sederhana, tanpa manipulasi script, hanya html css biasa saja.

Pertama, buatlah kotak dengan sudut rounded seperti gambar di bawah.

rounded corner box

Kemudian dengan perintah slice, pisahkan menjadi tiga bagian: bagian atas, tengah , dan bawah. Ini juga bisa manual dengan cropping bagian per bagian kemudian simpan memenjadi file sendiri-sedniri. Namun cara yang lebih mudah adalah dengan slice.

Setelah diseleksi dengan slice, simpan sebagai web file, save for web --> beri nama file --> simpan di folder. Maka akan terbentuk folder images di folder penyimpanan. File yang erbentuk dari perintah slice adalah 3 buah file dengan nama file_1.jpg, file_2.jpg, dan file_3.jpg.

Bentuknya seperti ini:
File rounded atas:
rounded corner top

File garis tengah:
rounded corner tengah

File rounded bawah:
rounded corner bottom

Gunakan file 1 untuk rounded atas, file 2 untuk garis tengah dan file tiga untu penutup bawah.

perintah sederhana htmlnya adalah sebagai berikut:
buat tiga buah div:

[div]rounded atas[/div]
[div class="tengah">[ --- semua isi sidebar di sini ---] [/div]
[div]rounded bawah[/div]

untuk properties tengah.div pakai properties sebagai beikut:

.tengah { background-image=url("folder/file_2.jpg"); background-repeat:repeat-y;)

Bagimana memasangnya dalam template blogger? untuk template default, kita harus melihat properties dari sidebarnya. Kita harus membuat file roundednya lebarnya sama dengan lebar sidebar. Kita ambil contoh template minima:

Perhatikan bagian berikut:

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
properties diatas adalah untuk kerangka meletakkan div sidebar yang akan kita isi dengan rounded.

buat properties untuk masing-masing bagian:

.atas {backgorund-image:url(folder/file_1.jpg); background-repeat:no-repeat; backgorund-posistion:bottom; }
.sidebar {backgorund-image:url(folder/file_2.jpg); background-repeat:repeat-y; }
.bawah {backgorund-image:url(folder/file_3.jpg); background-repeat:no-repeat; backgorund-posistion:top; }

measang pada template code:

<div id='sidebar-wrapper'>
<div class='atas'></div>
<b:section class='sidebar' id='sidebar' preferred='yes' />
</div>
<div class='bawah'></div>


untuk yang belum begitu paham cara memasang style, silakan lihat pada posting terdahulu sekali: tutorial css.

11 comments:

Dikna said...

Wah ini yang saya suka, belajar dgn bahasa program yg susah dicerna. (kok sy suka yg susah? iyalah ... sesuatu yang susah dipelajari pasti akan lebih mengasah skill kita pada akhirnya) setuju kan?.. Saya yakin ni artikel sgt berguna buat sy n' tmn2 yg lain.Thanks bgt buat pencerahan hari ini. Sy akn trs bljr.

Anonymous said...

Apakah rounded corner bisa berdampak pada performance dari AdSense ?

meds said...

saya kira rounded corner tak ada hubungannya dengan performance adsense, ini hanya masalah desain. nah, dari desain yang pas itu, bisa berpengarus pada kesan orang. mungkin efeknya juga bisa ke adsense.

Jaloee said...

terkadang mendesain gaya ini susah2 gampang . terutam untuk ie 6 ngga gampang di cerna.. boss

meds said...

benar mas jaloe, itu khan cara dasar. untuk yang expert seperti anda, ada teknik lebih canggih dong. tapi untuk latihan, lumayan bisa kok, asal diperhatikan perlakuan terhadap lebar komponen antara IE dan Mozila yang sedikit berbeda.

Anonymous said...

Thanks, tutorialnya sangat menarik.
Sangan bagus jika kita ingin membuat template agak berbayang atau (shadow). Tapi klo ingin yang polos, bisa juga dengan hanya menggunakan css saja tanpa image.

Follow my Nick jika ingin belajar.

il_divino said...

langsung dicoba mas..
thanks infonya yah..

indera said...

Thank u atas infonya..

bloggerkampungan said...

ada gak boss yang tidak usah pakai image,...jadi langsung bisa lengkung

Unknown said...

Thanks atas infonya, bermanfaat banget..., boleh nanya ndak mas? Selain bikin rounded, klo bikin sidebar sprti punya mas bergaris-garis ( kolom tulisan terdahulu punya mas), bagaimana yach? Boleh minta penjelasannya?

meds said...

u caplin, itu pakai properties ul dan li

ul { margin:0, padding:15px;}

li {color:red; display:block; border-bottom:1px solid #ccffff;}

border-bottom: ini properties untuk garis. coba pelajari kode warna html. misal: putih: #ffffff; hitam: #000000; dll.