Rounded Corner for Blogger

Trik kali ini adalah tentang Rounded Corner for Blogger. Maksud Ayas disini adalah membuat element blog menjadi tidak bersudut lancip atau melingkar.

Agak susah ya jelasinnya. hehehe9. Supaya lebih jelas hasil dari trik rounded corner ini, silahkan Sodara langsung liat aja disini.

Bisa Sodara liat, pada blog tersebut, sudut sidebar tidak lancip (kotak), tetapi melingkar. Itulah yang dimaksud dengan rounded corner.

Bagaimana trik untuk membuat rounded corner seperti itu? Tenang aja, trik ini ternyata sama sekali tidak susah lo..

Yuk kita pelajari bareng...


Sebagai contoh kasus, kita gunakan trik rounded corner ini pada blog ini. Silahkan dibuka.

Bisa kita lihat, background blog berwarna putih, dan sidebar berwarna abu2.

Selanjutnya, kita harus menyediakan gambar untuk memanipulasi sudut sidebar tersebut. Contoh untuk sidebar di blog tadi, Ayas menyediakan 4 gambar sebagai berikut :

Gambar untuk sudut kiri bawah


Gambar untuk sudut kanan bawah


Gambar untuk sudut kanan atas


Gambar untuk sudut kiri atas

Bisa kita lihat, gambar disesuaikan dengan warna sidebar. Kecil aja gambarnya, cukup 10x10 px misalnya.

Selanjutnya, tentunya upload gambar2 tersebut.

Lalu, copy kode berikut :

.corner {
background: #ebebeb;
}
.cornertop {
background: url(http.gif) no-repeat top right;
}
.cornertop div {
font-size: 0;
height: 10px;
background: url(http.gif) no-repeat top left;
}
.cornerbottom {
background: url(http.gif) no-repeat bottom right;
}
.cornerbottom div {
font-size: 0;
height: 10px;
background: url(http.gif) no-repeat bottom left;
}
.cornercontent {
padding: 0px 10px 0px 10px;
}

Kode berwarna merah, ganti dengan kode gambar untuk sudut kanan atas.
Kode berwarna hijau, ganti dengan kode gambar untuk sudut kiri atas.
Kode berwarna putih, ganti dengan kode gambar untuk sudut kanan bawah.
Kode berwarna ungu, ganti dengan kode gambar untuk sudut kiri bawah.
Sedangkan untuk kode background, sesuaikan dengan background sidebar Sodara.

Paste di atas kode

]]></b:skin>

Jika sudah, tinggal menuju pada kode sidebar.

Cari kode ini (kode sidebar) :

<div id='sidebar-wrapper'>

Maka Sodara akan melihat kode2 untuk sidebar, contohnya seperti ini :

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
<b:widget id='Followers2' locked='false' title='Pengikut' type='Followers'/>
<b:widget id='HTML5' locked='false' title='Recent Post' type='HTML'/>
<b:widget id='Feed1' locked='false' title='Recent Comment' type='Feed'/>
</b:section>

</div>

Ga sah bingung pren! cukup perhatikan kode berwarna merah dan hijau aja. Kode warna merah adalah awal dari kode untuk sidebar, sedangkan kode berwarna hijau adalah akhir dari kode.

Selanjutnya, kopi kode berikut :

<div class='corner'> <div class='cornertop'><div/></div> <div class='cornercontent'>

Paste kode tersebut di BAWAH kode

<div id='sidebar-wrapper'>

Selanjutnya copy kode berikut :

</div> <div class='cornerbottom'><div/></div> </div>

Lalu paste di ATAS kode

</div>

Sehingga, keseluruhan kode sidebar Sodara menjadi seperti ini :

<div id='sidebar-wrapper'>

<div class='corner'> <div class='cornertop'><div/></div> <div class='cornercontent'>

<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
<b:widget id='Followers2' locked='false' title='Pengikut' type='Followers'/>
<b:widget id='HTML5' locked='false' title='Recent Post' type='HTML'/>
<b:widget id='Feed1' locked='false' title='Recent Comment' type='Feed'/>
</b:section>

</div> <div class='cornerbottom'><div/></div> </div>

</div>

Klo dah, simpen, trus preview.

Sekarang, sidebar Sodara dah Rounded Corner tuh!!

Oya, selain sidebar, trik rounded corner ini juga bisa diterapkan pada main-wrapper atau header juga lo..