Kamis, 10 Februari 2011

Membuat Border Sudut Melengkung pada Setiap Widget Blog (Membuat Rounded Corner )

Membuat Rounded Corner / Sudut Melengkung Pada Border Blog



Memang betul ya sob,sebuah blog yang kurang memperhatikan tampilan blog agar lebih menarik,dapat mempengaruhi kejenuhan pengunjung karena blog terkesan acak-acakan.
Alangkah baiknya jika blogspot yang kita miliki memiliki tampilan yang lebih menarik,misal dengan membuat border atau kotak-kotak pada setiap widget yang kita miliki,entah widget pada sidebar maupun widget diatas maupun dibawah posting.

Cara membuat sudut melengkung pada blog widget ini bisa kita ciptakan dengan bantuan CSS,dan hal ini saya kira sudah banyak tutorial blog kaitannya membuat border sudut melengkung pada setiap widget / element halaman yang akan kita tambahkan nanti.

Untuk gambar screenshotnya,sobat bisa lihat gambar dibawah ini:

cara membuat border sudut melengkung atau rounded corner.


Gimana sob,tertarik untuk membuatnya juga?
Langkahnya sangat sederhana,sobat pilih Dashboard lalu pilih Tata Letak / Rancangan(1) kemudian pilih tab Edit HTML(2),lalu seperti biasa contreng tulisan Exspand Widget Templates(3).
Lihat Gambar ya :D


Cara membuat sudut melengkung pada blog.
(1)



Sudut Melengkung ( Rounded Corners ) pada CSS.
(2)



Membuat Sudut Border Melengkung pada blog.
(3)


Nah,selanjutnya cari kode ]]></b:skin> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode ]]></b:skin> tersebut.

}
.membuatbordermelengkungroundedcorner {border: 3px solid #EFF0F1;
padding: 5px;
background: #ffffff;-moz-border-radius:5px;}

.membuatbordermelengkungroundedcorner a {background:none;}
img.float-right {margin: 5px 0px 0 10px;}
img.float-left {margin: 5px 10px 0 0px;
}


Lihat gambar (4)

Rounded Corner (Sudut melengkung).
(4)


Selanjutnya,Simpan Templates sobat ya.

Nah,untuk menampilkannya pada widget coba pilih Tata Letak / Rancangan seperti gambar no (1),dan klik tulisan Add New Widget atau Tambah Gadget,lihat Gambar no (5)


Cara Membuat Border pada Widget / Border Sudut Melengkung.
(5)


Selanjutnya pilih HTML/Javascript Gb(6) dan letakkan kode berikut diantara widget kode HTML yang akan ditambahkan lihat Gb.(7).

<div class='membuatbordermelengkungroundedcorner'>
Disini kode yang akan ditambahkan (bisa kode html iklan ataupun kode javascript dan sejenisnya)
</div>


Cara Membuat Border pada Widget / Border Sudut Melengkung.
(6)


Cara Membuat Border Kotak-Kotak pada Sidebar Blog.
(7)
Lihat Gambar Lebih Besar


Setelah itu,tinggal klik Simpan dan blog sobat sudah memiliki border melengkung pada widget yang diinginkan :D.

Tidak ada komentar:

Poskan Komentar