Code Html Untuk Membuat Template Toko online

Membuat Template Toko Online Dengan Bootstrap
Sobat weone kali ini kita akan membahas Code Html Untuk Membuat Template Toko online Template akan mempermudah kita dalam membuat tokoonline tapi tentu membuat template sendiri memiliki kelebihan karena kita memegang penuh atas front-end template toko online kita tanpa harus adanya copyright dari orang lain.

1. Teks editor html untuk membuat Template Toko Online
Teks editor html sendiri bisa notpad atau notepad++
saya sendiri menggunakan notepad++ karena notepad++ ringan dan cepat aplikasi dengan ukuran sekitar 5.5Mb ini memungkinkan kita untuk membuat program berbasis coding karena aplikasi ini support berbagai macam bahasa pemrograman.

2. Bootstrap
Bootstrap  sehingga memudahkan kita untuk membuat untuk membuat front-end template dari Toko Online. 
library bootstrap bisa di dapatkan di https://getbootstrap.com


ini dia code Membuat Template Toko Online Dengan Bootstrap



<!DOCTYPE html>

<html lang="en">

<head>

 <title>Toko Online wahid</title>

 <meta charset="utf-8">

 <meta name="viewport" content="width=device-width, initial-scale=1">

 <link rel="stylesheet" href="lib/bootstrap.min.css">

 <script src="lib/jquery.min.js"></script>

 <script src="lib/bootstrap.min.js"></script>

 <style>

 /*Remove Navbar's margin button and rounded border and incriase the bottom margin */

 .navbar {

 margin-bottom: 50px;

 border-radius: 0;

 }

 

 /*remove jumbotron's default bottom margin */

 .jumbotron {

 margin-bottom: 0;

 }

 

 /*add a gray background color and some padding to the footer */

 footer {

 background-color: #f2f2f2;

 padding: 25px;

}



 

 </style>

</head>

<body>



<nav class="jumbotron">

<div class="container text-center">

 <h3>TOKO ONLINE WAHID<h3>

 <p>prioritaskan kualitas</P>

 </div>

 </div>

 <nav class="navbar nav-inverse">

<div class="container-fluid">

<div class="navbar-header">

 <button type="button" class="navbar-toggle" data-toggle="collapse"

 data-target="#myNavbar">

 <span class="icon-bar"></span>

 <span class="icon-bar"></span>

 <span class="icon-bar"></span>

 </button>

 <a class="navbar-brand" href="#">logo</a>

 </div>

 <div class="collapse navbar-collapse" id="myNavbar">

  <ul class="nav navbar-nav">

  <li class="active"><a href="l1mat3.html">Home</a><li>

  <li><a href="latBprofile.html">Product</a></li>

  <li><a href="latBproduct.html">Deals</a></li>

  <li><a href="latBservice.html">Stores</a></li>

  <li><a href="latBpcontact.html">Contact</a></li>

  </ul>

  <ul class="nav navbar-nav navbar-right">

  <li><a href="#"><span class="glyphicon glyphicon-user"></span> Akun Anda</a></li>

  <li><a href="#"><span class="glyphicon glyphicon-shopping-chart"></span> Cart</a></li>

  </ul>

  </div>

  </div>

 </nav>

 <div class="container">

  <div class="row">

   <div class="col-sm-4">

   <div class="panel panel-primary">

   <div class="panel-heading">BLACK FRIDAY DEAL</div>

   <div class="panel-body"><img src="http://placehold.it/150x80?text=IMAGE"

 class="img-responsive" style="width:100%" alt="Image"></div>

  <div class="panel-footer">Beli 50 gratis 100 </div>

 </div>

 </div>

<div class="col-sm-4">

   <div class="panel panel-danger">

   <div class="panel-heading">BLACK FRIDAY DEAL </div>

   <div class="panel-body"><img src="http://placehold.it/150x80?text=IMAGE"

   class="img-responsive" style="width:100%" alt="Image"></div>

  <div class="panel-footer">Beli 50 gratis 100 </div>

 </div>

 </div>



<div class="col-sm-4">

   <div class="panel panel-succes">

   <div class="panel-heading">BLACK FRIDAY DEAL </div>

   <div class="panel-body"><img src="http://placehold.it/150x80?text=IMAGE"

 class="img-responsive" style="width:100%" alt="Image"></div>

  <div class="panel-footer">Beli 50 gratis 100 </div>

 </div>

 </div>

 </div>

 </div><br>

 <div class="container">

  <div class="row">

   <div class="col-sm-4">

   <div class="panel panel-primary">

   <div class="panel-heading">BLACK FRIDAY DEAL</div>

   <div class="panel-body"><img src="http://placehold.it/150x80?text=IMAGE"

 class="img-responsive" style="width:100%" alt="Image"></div>

  <div class="panel-footer">Beli 50 gratis 100 </div>

 </div>

 </div>

<div class="col-sm-4">

   <div class="panel panel-danger">

   <div class="panel-heading">BLACK FRIDAY DEAL </div>

   <div class="panel-body"><img src="http://placehold.it/150x80?text=IMAGE"

   class="img-responsive" style="width:100%" alt="Image"></div>

  <div class="panel-footer">Beli 50 gratis 100 </div>

 </div>

 </div>



<div class="col-sm-4">

   <div class="panel panel-succes">

   <div class="panel-heading">BLACK FRIDAY DEAL </div>

   <div class="panel-body"><img src="http://placehold.it/150x80?text=IMAGE"

 class="img-responsive" style="width:100%" alt="Image"></div>

  <div class="panel-footer">Beli 50 gratis 100 </div>

 </div>

 </div>

 </div>

 </div><br><br>

 <footer class="container-fluid text-center">

 <p>Copyrigth toko online</p>

 <form class="form-inline">Get deals:

 <input type="Email" class="form-control"size="50" placeholder="Alamat Email">

 <button type="button" class="btn btn-danger">Sign Up</button>

 </form>

</footer>



 </body>

 </html>



setelah script code Template TokoOnline Dengan Bootstrap diatas telah di paste jangan lupa untuk menyimpannya dengan format .html
contoh : template.html

Tampilan Template Toko Online Dengan Bootstrap versi dekstop :

gambar Template TokoOnline Dengan Bootstrap versi dekstop



penjelasan tentang Template Toko Online Dengan Bootstrap :

Script kode template TokoOnline  di atas di link ke Bootstrap library yang sudah di dapatkan lalu di ekstrak di simpan dalam 1 folder baru

<meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">

 <link rel="stylesheet" href="lib/bootstrap.min.css">

 <script src="lib/jquery.min.js"></script>

 <script src="lib/bootstrap.min.js"></script>






pada code heading di atas silhakan teman ganti sesuai nama tokoonline pribadi teman-teman


//<h3>TOKO ONLINE WAHID<h3>

 <p>prioritaskan kualitas</P>
pada code navigasinya juga bisa diganti sesuai page teman-teman sekalian
<div class="collapse navbar-collapse" id="myNavbar">
  <ul class="nav navbar-nav">

  <li class="active"><a href="latB.html">Home</a><li>

  <li><a href="latBprofile.html">profile</a></li>

  <li><a href="latBproduct.html">product</a></li>

  <li><a href="latBservice.html">service</a></li>

  <li><a href="latBpcontact.html">contact</a></li>

  </ul>

  <ul class="nav navbar-nav navbar-right">

  <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> login</a></li>

  </ul>

  </div>





cukup sekian artikel  tentang code html untuk Membuat Template TokoOnline Dengan Bootstrap

No comments:

Post a Comment

Iklan Atas Artikel

Meta Propeller atas artikel

cara mudah turial kode Java blog website grafika komputer jaringan komputer dan Arduino

Iklan Tengah Artikel 2

Iklan Bawah Artikel