cara membuat background widget menarik dan keren

Salah satu cara para blogger mempercantik blog untuk menarik pengunjung datang dan betah berlama-lama yaitu background yang bermacam warna dan bentuknya.
ayo dicoba jangan sungkan-sungkan gan,ikuti tutorialnya langsung ke tkp...

copy semua code yang ada lalu pastekan di posting blog atau bisa juga di widget blog yang agan suka kemudian silahkan save/simpan...

---Tepi Kiri Kanan Melengkung,,

Kode:

<div style="-moz-border-radius: 20px 10px 20px 10px; -webkit-border-radius: 20px 10px 20px 10px; background-color: white; border-radius: 20px; border: 2px solid black; box-shadow: 10px 10px 5px #888888; color: black; font-family: Arial; padding: 10px;">
Tepi Kiri Kanan Melengkung</div>

contoh:

Tepi Kiri Kanan Melengkung

--Pojok Kiri Atas Melengkung,,

Kode:

<div style="-moz-border-radius: 1em 0em 0em 0em; background-color: orange; border-radius: 1em 0em 0em 0em; border: 2px solid #000; box-shadow: 10px 10px 5px #888888; color: white; height: auto; margin: 0 auto; overflow: hidden;">
Pojok Kiri Atas Melengkung</div>

contoh:

Pojok Kiri Atas Melengkung

--Pojok Kiri Bawah Melengkung,,

Kode:

<div style="-moz-border-radius: 0em 0em 0em 1em; background-color: green; border-radius: 0em 0em 0em 1em; border: 2px solid #000; color: white; height: auto; margin: 0 auto; overflow: hidden;">
Pojok Kiri Bawah Melengkung</div>

contoh:

Pojok Kiri Bawah Melengkung

--Pojok Kanan Atas Melengkung,,

Kode:

<div style="-moz-border-radius: 0em 1em 0em 0em; background-color: red; border-radius: 0em 1em 0em 0em; border: 2px solid #000; color: white; height: auto; margin: 0 auto; overflow: hidden;">
Pojok Kanan Atas Melengkung</div>

contoh:

Pojok Kanan Atas Melengkung

--Pojok Kanan Bawah Melengkung,,

Kode:

<div style="-moz-border-radius: 0em 0em 1em 0em; background-color: blue; border-radius: 0em 0em 1em 0em; border: 2px solid #000; color: white; height: auto; margin: 0 auto; overflow: hidden;">
Pojok Kanan Bawah Melengkung</div>

contoh:

Pojok Kanan Bawah Melengkung

--Tepi Kiri Melengkung,,

Kode:

<div style="-moz-border-radius: 1em 0em 0em 1em; background-color: gold; border-radius: 1em 0em 0em 1em; border: 2px solid #000; color: white; height: auto; margin: 0 auto; overflow: hidden;">
Tepi Kiri Melengkung</div>

contoh:

Tepi Kiri Melengkung

--Tepi Kanan Melengkung,,

Kode:

(<div style="-moz-border-radius: 1em 0em 0em 1em; background-color: royalblue; border-radius: 1em 0em 0em 1em; border: 2px solid #000; color: white; height: auto; margin: 0 auto; overflow: hidden;">
Tepi Kanan Melengkung</div>

contoh:

Tepi Kanan Melengkung

Untuk membuat tampilan seperti diatas. Anda cukup menambahkan kode-kode yang ada diatas untuk setiap jenis garis border melengkung kedalam artikel gambar di area postingan

Itulah cara membuat garis border melengkung. Untuk tampilan yang lebih dan memiliki keunikan tersendiri, silahkan atur kode-kode berikut yang ada didalam kode diatas

-moz-border-radius: 0em 0em 0em 1em;
border-radius: 0em 0em 0em 1em;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 20px;
background-color: #ccc;
border: 2px solid black;
color: #000;
padding: 5px;

Silahkan ganti dan atur setiap skala (nomer ukuran) yang ada diatas dan lihat hasilnya dengan perubahan yang anda lakukan.

semoga bermanfaat,,,

Tweet

Share

Subscribe Untuk Mendapatkan UPDATE Artikel Terbaru!