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.



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:


File garis tengah:


File rounded bawah:


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][/div]
[div class="tengah">[ --- semua isi sidebar di sini ---] [/div]
[div][/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.