Artikel ini menjelaskan bagaimana cara menggunakan CSS3 box-sizing dalam mempermudah pembuatan template blogger/blogspot

CSS3 box-sizing Mempermudah Pembuatan Template - MKR site | Berbagi Tanpa Batas, Blogger Tips, Widget, Template

Artikel ini menjelaskan bagaimana cara menggunakan CSS3 box-sizing dalam mempermudah pembuatan template blogger/blogspot

CSS3 box-sizing Mempermudah Pembuatan Template

CSS3 box-sizing Mempermudah Pembuatan Template

box-sizing merupakan CSS3 yang sering saya gunakan dalam membuat template blogspot/blogger. Karena menurut saya CSS3 ini dapat membantu dalam mengatur ukuran dari lebar area/tag div sehingga jika dilakukan penambahan padding maka lebar dari kotak div tidak berubah.
box-sizing atribut yang sering saya gunakan yaitu border-box. Box-sizing dengan atribut border-box kompatibel untuk IE8+, Firefox 2+ (-moz-), dan google chrome (-webkit-).
Secara default bentuk area box div dapat digambarkan seperti berikut:
Default bentuk area box div tanpa box-sizing

Setelah pemberian box-sizing dengan atribut border-box akan menjadi seperti ini:
Box-sizing dengan atribut border-box

Dari gambar terlihat dengan pemberian box-sizing dengan atribut border-box maka jika sebuah box ditambahkan padding maka padding tersebut berada dibagian dalam box. Sehingga bila disebuah template ada daerah sudah ditentukan lebarnya maka ketika ditambahkan padding maka lebarnya tidak berubah.
box-sizing sendiri memiliki attribut default yaitu content-box, dan ada juga padding-box (tapi padding-box tidak kompatibel untuk FF).
Untuk penerapan disebuah kode html bentuk CSSnya bisa seperti ini:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Artinya semua tag akan terkena box-sizing dengan atribut border-box.

Jika ingin memberikan efek box-sizing pada area tertentu misalnya: <div id="main"></div> maka kode CSSnya seperti ini:
#main {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Nah itulah sedikit penjelasan tentang box-sizing semoga dapat dimengerti.
Serta dapat membantu Anda dalam mempercantik tampilan blog anda.
Satank Mkr Beri Komentar
Bagikan kepada teman!
Garis

3 comments:

  1. kalau kita mau box halaman postingan gimana..?

    BalasHapus
  2. Wah.. bermanfaat sekali sob..
    http://center60.blogspot.com/

    BalasHapus
  3. Jangankan membuat, edit2 aja saya pening.. hihi

    Thanks You Very Much

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB: Jangan menuliskan link aktif karena akan terhapus secara automatis.

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah

 
Design by MKR Copyright © 2012 ~ 2013 Powered by Blogger
TOP