Home » » Membuat sudut border lengkung layout blogger

Membuat sudut border lengkung layout blogger

Written By Parmin Prim on 10 Maret 2011 | 07.18

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 this article :

4 komentar:

Popular Posts

Posting Update

Chat Langsung

Diberdayakan oleh Blogger.

Follow by Email

 
Support : Primaya | Masprim | My Facebook
Redesain © 2015. primaya.blogspot.co.id - All Rights Reserved
Template Source from Creating Website
Proudly powered by Blogger