Tutorial Komputer, Website, Blogger dan Surat

10 March 2011

Membuat sudut border lengkung layout blogger

Membuat variasi bingkai template blogger di blogspot banyak caranya.  Bisa menggunakan gambar yang dirancang di Photosop atau bisa juga menggunakan perintah CSS.  Nah berikut ini adalah cara membuat bingkai dengan bentuk lengkung di sudut atau pojok seperti yang anda lihat di blog ini.



Kita akan menggunakan perintah CSS untuk memformat kotak yang akan dibentuk sudutnya menjadi lengkung tersebut.  Seperti biasa masuk ke blogger anda, pilih Rancangan, dan pilih Edit HTML.


Setelah itu tentukan kotak/border yang akan kita lengkungkan sudutnya.  Misalnya kalau contoh diatas adalah :
#Left-sidebar . widget (yang artinya kotak untuk widget sebelah kiri). cari di kode tersebut di blog anda.
Kemudian tambahkan kode berikut dibawahnya sebelum tanda tutup kurung kurawal  } .

-moz-border-radius:5px 5px 5px 5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
background:none repeat scroll 0 0 #2F5632;
float:left;
overflow:hidden;


Catatan :
Setiap perintah CSS diawali dengan tanda buka kurung kurawal { dan diakhiri juga dengan tutup kurung kurawal  } , jadi untuk contoh diatas selengkapnya berikut ini.


Kode sebelum di tambah :

#left-sidebar .widget {width:156px;background:#7D929A no-repeat top left ; float:left;display:inline;padding:15px;font-size:12px;margin-bottom:12px;}


Kode setelah tambah menjadi :

#left-sidebar .widget {width:156px;background:#7D929A no-repeat top left ; float:left;display:inline;padding:15px;font-size:12px;margin-bottom:12px;
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
background:none repeat scroll 0 0 #2F5632;
float:left;
overflow:hidden;






Perhatikan kurung kurawalnya  }


"Selamat mencoba semoga berhasil"


Share:

4 comments:

Pages

Featured Post

Konsistensi

Konsistensi atau konsisten adalah sesuatu yang dilakukan terus menerus sampai batas waktu yang ditentukan atau tidak ada batas sama sekali....

Total Pageviews

Popular Posts

Blog Archive

Support