Friday, January 18, 2013

Membuat garis tepi blog tidak bersudut lancip.

Hari Jam
Banyak blogger yagn ingin membuat blognya tampil indah , menarik dan tentu saja terkesan lebih profesional.
Berikut ini sumbertips membagikan tips dan trik mengenai cara membuat header blog tidak bersudut lancip.
Memasang garis pembatas atau garis tepi dalam tempalte blog dapat di lakukan dengan kode css yang dapat di tambahkan pada deretan kode yang telah ada di template bloger.
Coba perhatikan kode di bawah ini;
 #outer-wrapper{width:950px;background:#FFFFFF;padding:0;text-align:left;font:$bodyfont;background: url() left 14px repeat-x;}

di tambahkan kode untuk membuat garis sudut melengkung, berikut kode tambahan pada template untuk menghasilkan kode tanpa sudut;
margin:0px auto 0px;margin-top:0px;
border:0px solid #d3d3d3;border-top-left-radius: 13px;border-top-right-radius: 15px;border-bottom-left-radius: 12px;border-bottom-right-radius: 13px;

Setelah kode di tambah dengan perintah baru maka garis sudut akan berubah.
Berikut kode yang telah di tambahkan kode css tanpa sudut;
#outer-wrapper{width:950px;margin:0px auto 0px;margin-top:0px;
border:0px solid #d3d3d3;border-top-left-radius: 15px;border-top-right-radius: 15px;border-bottom-left-radius: 15px;border-bottom-right-radius: 15px;
background:#FFFFFF;padding:0;text-align:left;font:$bodyfont;background: url() left 14px repeat-x;}

Garis lengkung tanpa sudut
Garis melengkung

Catatan: Tulisan merah dapat anda ganti sesuai kebutuhan anda.
Untuk membuatnya di header dapat mengubah nilai di atas bagian kiri maupun di atas bagian kanan kemudian di bottom nilainnya 0 agar garis yang melengkung hanya di bagian atas saja.
Semoga tips ini dapat bermanfaat dan memberikan secuil pengetahuan bloging, salam sumbertips.

Di publikasikan oleh: Admin, Sumber Tips Webmaster
Membuat garis tepi blog tidak bersudut lancip. di Publikasi pada hari: Friday, January 18, 2013
Previous Next Home