Membuat Display Produk dalam Layout Box 4 Kolom

Ukuran: px

Mulai penontonan dengan halaman:

Download "Membuat Display Produk dalam Layout Box 4 Kolom"

Sugiarto Johan
7 tahun lalu
Tontonan:

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.

2 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 Oke langsung saja.. Alat dan Bahan: 1. file jquery 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: <!

3 *) 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: <!DOCTYPE html> <html lang="id"> <head> <title>tutorial Bootstrap Box 4 Kolom</title>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content="">  <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/styles.css" rel="stylesheet"> </head> <body> <div class="container">... isi kode display 4 box...   <script src="../js/jquery min.js"></script> <script src="../js/bootstrap.js"></script> </body> </html 2. Kode layout tampilan box 4 kolom akan kita letakkan di baris... isi kode display 4 box Masukkan di baris tersebut, kode di dibawah ini: <h2><center>contoh Produk Display Layout Box 4 Kolom</center></h2> <img src="images/1.jpg" alt="" />

4 <h3>pizza Papa</h3> <div class="likes">5 Likes <div class="prize" > <img src="images/2.jpg" alt="" /> <h3>pancake Honey</h3> <div class="likes">5 Likes <div class="prize" > <img src="images/3.jpg" alt="" /> <h3>meat Smoke</h3> <div class="likes">5 Likes <div class="prize" > <img src="images/4.jpg" alt="" /> <h3>pacaroni</h3> <div class="likes">5 Likes <div class="prize" >

5 Penjelasan: Secara garis besar, kode layout Box terdiri dari 4 blok kode yaitu dengan nama <div class="col-md-3"> 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 class "box" Level Tag IMG Level class "desc" Level class "social" Level class "likes" Level class "prize" Level 0 col-md-3 (Kolom 2) Level class "box" Level Tag IMG Level class "desc" Level class "social" Level class "likes" Level 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);

6 .box img{ width:101%; height:150px;.box h3{ padding:15px;.box p{ overflow:hidden; height:100px; padding-left:15px; padding-right:15px;.desc{ height:150px; border-bottom:1px solid #ddd;.likes{ float:left; padding:15px;.prize{ float:right; padding:15px; 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:

7 Selamat Mencoba! Tentang Penulis Debrian Ruhut Saragih JombloPedia.com

dokumen-dokumen yang mirip

KAJIAN 3 Web Responsive

KAJIAN 3 Web Responsive Modul 10 Pengantar Web Responsive Modul 11 Perancangan Web Responsive 73 KAJIAN 3 Web Responsive MODUL 10 Pengantar Web Responsive 10.1. TUJUAN Mengetahui dan memahami dasar perancangan