Membuat Display Produk dalam Layout Box 4 Kolom

Membuat Display Produk dalam Layout Box 4 Kolom Oleh: Debrian Ruhut Saragih

Selamat pagi Sobat sekalian, saat ini kita banyak menemukan toko online bertebaran di Internet. Saya sering memperhatikan bagaimana produk-produk tersebut di tampilkan dengan format layout yang berbeda-beda. Tahukan Sobat, layout untuk display suatu produk memiliki peran penting agar suatu produk terlihat m...

Selamat pagi Sobat sekalian, saat ini kita banyak menemukan toko online bertebaran di Internet. Saya sering memperhatikan bagaimana produk-produk tersebut di tampilkan dengan format layout yang berbeda-beda. Tahukan Sobat, layout untuk display suatu produk memiliki peran penting agar suatu produk terlihat menarik, dan pengunjung ikut mencari tahu isi detail produk tersebut. Kali ini saya akan memberikan satu referensi terkait display produk dengan menggunakan Layout Box 4 Kolom dengan menggunakan Bootstrap. Versi Bootstrap yang saya pakai adalah yang terbaru yaitu versi 3.3.4. Oke langsung saja..

Alat dan Bahan: 1. file jquery-1.10.2.min.js 2. file Bootstrap.js 3. file Bootstrap.css 4. file styles.css 5. file index.html

*) File Javascript diletakkan di folder js, file css diletakkan di folder css.

Cara Pembuatan 1. Buka file index.html lalu masukkan format default struktur HTML seperti di bawah: <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <script src="../js/jquery-1.10.2.min.js"> <script src="../js/bootstrap.js"> Contoh Produk Display Layout Box 4 Kolom Penjelasan: Secara garis besar, kode layout Box terdiri dari 4 blok kode yaitu dengan nama lalu di ikuti dengan blok kode dibawahnya untuk tujuan styiling CSS dengan class . Struktur class dan tag-nya dapat kita lihat sebagai berikut: Level 0 col-md-3 (Kolom 1) Level 1 ---- class "box" Level 1.1 --------------- Tag IMG Level 1.2 --------------- class "desc" Level 1.3 --------------- class "social" Level 1.3.1 ---------------------------- class "likes" Level 1.3.2 ----------------------------- class "prize" Level 0 col-md-3 (Kolom 2) Level 1 ---- class "box" Level 1.1 --------------- Tag IMG Level 1.2 --------------- class "desc" Level 1.3 --------------- class "social" Level 1.3.1 ---------------------------- class "likes" Level 1.3.2 ----------------------------- class "prize" ....... dan seterusnya sampai kolom keempat. 4. Buka file styles.css lalu isikan dengan kode CSS Berikut: .box{ background-color:#fff; overflow: hidden; height:350px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius:5px; -webkit-box-shadow: 0px 3px 2px 0px rgba(0,0,0,0.3); -moz-box-shadow: 0px 3px 2px 0px rgba(0,0,0,0.3); box-shadow: 0px 3px 2px 0px rgba(0,0,0,0.3); }

.box img{ width:101%; height:150px; } .box h3{ padding:15px; margin:0px; } .box p{ overflow:hidden; height:100px; padding-left:15px; padding-right:15px; margin:0px; } .desc{ height:150px; border-bottom:1px solid #ddd; } .likes{ float:left; padding:15px; margin:0px; } .prize{ float:right; padding:15px; margin:0px; } Penjelasan: 1. Untuk membuat kotak box rounded gunakan parameter border-radius, lalu untuk membuat efek bayangan pada box gunakan box-shadow. 2. Ubahlah parameter tinggi (height) sesuai kebutuhan Sobat. Yang tidak kalah penting lagi adalah pemilihan font yang cocok sehingga tampilan lebih menarik. Bila sudah berhasil membuat tampilan display produk dengan 4 kolom di atas, silakan dicoba agar tampilannya lebih menarik lagi seperti gambar di bawah ini:

Selamat Mencoba!

Tentang Penulis Debrian Ruhut Saragih JombloPedia.com