Membuat Website Online Shop dengan fitur video review produk
1. Download File Bootstrap di getbootstrap.com
2. Buat Folder untuk menyimpan halaman web beserta gambar dan video sebagai pelengkap nya
3. Ekstrak file Bootstrap yang telah di download kemudian copy folder js dan css ke folder yang telah dibuat
4. Siapkan text editor (disini saya menggunakan Sublime-Text)
5. Buat file baru dengan nama index.php simpan di folder yang sudah disiapkan
6. Buat struktur html biasa, kemudian panggil css dan js dari bootstrap
7. Buka website bootstrap dan cari bagian component navbar
2 8. Copy-kan source kode berikut
<div class="pos-f-r">
<div class="collapse"
id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h4 class="text-white">Ari Rudianto</h4>
<span class="text-muted">Kelas 12 RPL C</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button"
data-toggle="collapse"
data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<form class="form-inline
my-2 my-lg-0">
<div
class="input-group">
<input type="text" class="form-control"
style="width:500px;" placeholder="Cari"
aria-label="Search for...">
<span
class="input-group-btn">
<button class="btn
btn-secondary" type="button">Cari</button>
</span>
</div>
<div style="width:500px;display:inline-block;
">
</div>
</form>
</nav>
</div>
1.
Tampilan sementara sebagai berikut
2.
Buat div dengan class=”row” dan bagi div
tersebut ke dalam dua kolom
3.
ukurun
kolom ke dua diperkecil dengan mengganti selector class berikut <div
class="col-md-4">
Source Kode Untuk Menambahkan Video berikut
Form-nya
<div class="row">
<div
class="col-md" style="margin-left:41px;margin-right:55px;
">
<video
width="700" height="540" controls autoplay loop
style=""
poster="elif3.jpg">
<source
src="56.mp4" type="video/mp4">
</video>
<form
oninput="x.value=parseInt(a.value)*7" style="display:
inline-block;">
<h2
>Launching Mahshup Video</h2>
<p
style="color:grey;font-size: 17pt;"><output name="x"
for="a">0</output> Penonton</p>
<input
type="range" id="a" value="50"
style="width:90px;">
</form>
<div
class="form-group" style="margin-bottom: 0px;padding:6px;
">
<label for="exampleFormControlTextarea1"
style="float:right; font-size:17pt; ">65 Komentar</label>
<textarea class="form-control"
id="exampleFormControlTextarea1" rows="3"
style="resize: none;" placeholder="Masukan Komentar
Anda"></textarea>
</div>
<div align="right" style="background-color:
#F5F5F5;padding:6px; ">
<button type="button"
class="btn btn-info">Publish</button>
</div>
</div>
<div
class="col-md-4">
<div
class="jumbotron">
<h1 class="display-3">Selamat
Menyaksikan!</h1>
<p class="lead">Streaming
Video TV Show</p>
</div>
<div
class="container">
<div
class="row">
<div
class="col-md">
<div
class="card" style="width: 20rem;">
<img class="card-img-top"
src="2.jpg" alt="Card image cap" style="">
<div class="card-body">
<h4 class="card-title">CD
The Freaks</h4>
<p class="card-text">Gudang
Musik Populer Karya Agnez Mo.</p>
<a href="#" class="btn
btn-warning">Play</a>
</div>
</div>
</div>
<div
class="col-md">
<div
class="card" style="width: 20rem;">
<img class="card-img-top"
src="1.jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card
title</h4>
<p class="card-text">Some
quick example text to build on the card title and make up the bulk of the
card's content.</p>
<a href="#" class="btn
btn-warning">Go somewhere</a>
</div>
</div>
</div>
<div
class="col-md">
<div
class="card" style="width: 20rem;">
<img class="card-img-top"
src="1.jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card
title</h4>
<p class="card-text">Some
quick example text to build on the card title and make up the bulk of the
card's content.</p>
<a href="#" class="btn
btn-warning">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Tampilan akhir sebagai berikut
Terima Kasih Telah Menyempatkan waktu untuk
membaca Tutorial Ini
Semoga Bermanfaat !
Komentar
Posting Komentar