Membuat Tema Bootstrap
- Administrator
- Theme, Theme popojicms, Create themes, Make theme,
- 2522 Kali Dilihat
- 0 Komentar
Membuat Tema Bootstrap
Artikrel cara Membuat Tema Bootstrap ini akan memberikan petunjuk bagi teman-teman, terutama yang masih pemula. Bagaimana membuat struktur HTML dan melengkapi dengan CSS serta JS yang memiliki beberapa fungsi didalamnya. Satu hal kecil dalam tutorial cara Membuat Tema Bootstrap juga dapat teman-teman jadikan solusi untuk memecahkan serta mengatasi masalah tentang penambahan peta google map yang tidak tampil. Selamat belajar Membuat Tema Bootstrap, mudah-mudahan artikel ini berguna.
Buatlah struktur kerangka HTML seperti berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Learn to Make Company Theme Together Multibisnisindo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Learn to Make Company Theme<br/>Together Multibisnisindo</h1>
<p>We specialize in web site building and design themes</p>
</body>
</html>
2) Pada tag <h1>...</h1>
tambahkan tag <div>
dan tambahkan class “jumbotron”
di
dalamnya , tag penutup hendaknya diletakan setelah tag paragraph <p>
.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Learn to Make Company Theme Together Multibisnisindo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="jumbotron">
<h1>Learn to Make Theme<br/>Together Multibisnisindo</h1>
<p>We specialize in web site building and design themes</p>
</div>
</body>
</html>
3) Tambahkan pada tagdan, tepatnya dibawahcontent="width=device-width, initial-scale=1">
Tambahkan:
(bootstrap 3. 3. 6/css) bootstrap. min. css
(j query 1. 12. 0) jquery. min. js
(bootstrap 3. 3. 6/js) bootstrap. min. js
Sehingga menjadi seperti berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Learn to Make Theme Together Multibisnisindo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron">
<h1>Learn to Make Theme<br/>Together Multibisnisindo</h1>
<p>We specialize in web site building and design themes</p>
</div>
</body>
</html>
4) Sekarang kita akan menambahkan css pada theme yang sedang kita buat. Sisipkan kode
css di bawah ini diatas tag </head>
:
<style>
.jumbotron {
background: url(https://cdn.jordymeow.com/wp-content/uploads/2011/10/tokyo-tower-nightroppongi-hills.jpg);
background-color: #000;
opacity: 0.6;
color: #ffffff;
}
</style>
Silahkan berkreasi dan menyesuaikan css ini dengan selera/kebutuhan anda.
5) Pada tag <body>
, tepatnya pada elemen <div class="jumbotron">
, tambahkan kode "textcenter"
sehingga menjadi:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Learn to Make Theme Together Multibisnisindo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.jumbotron {
background: url(https://cdn.jordymeow.com/wp-content/uploads/2011/10/tokyo-tower-nightroppongi-hills.jpg);
background-color: #000;
opacity: 0.6;
color: #ffffff;
}
</style>
</head>
<body>
<div class="jumbotron text-center">
<h1>Learn to Make Theme<br/>With Multibisnisindo</h1>
<p>We specialize in web site building and design themes</p>
</div>
</body>
</html>
6) Sekarang kita akan menambahkan sarana pengunjung untuk berlangganan informasi
dari website kita, maka kita tambahkan form dalam theme yang sedang kita buat. Letakan
form setelah tag paragraf. Sehingga menjadi seperti berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Learn to Make Theme Together Multibisnisindo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.jumbotron {
background: url(https://cdn.jordymeow.com/wp-content/uploads/2011/10/tokyo-towernight-roppongi-hills.jpg);
background-color: #000;
opacity: 0.6;
color: #ffffff;
}
</style>
</head>
<body>
<div class="jumbotron text-center">
<h1>Learn to Make Theme<br/>With Multibisnisindo</h1>
<p>We specialize in web site building and design themes</p>
<form class="form-inline">
<input type="email" class="form-control" size="50" placeholder="Email Address">
<button type="button" class="btn btn-danger">Subscribe</button>
</form>
</div>
</body>
</html>
7) Pada tahap ke-4 kita telah memiliki/menambahkan kode css, tambahkan kode berikut
pada css tersebut :
.bg-grey {
background-color: #f6f6f6;
}
8) Kemudian tambahkan dua kontainer (.container-fluid), dan menambahkan kelas kustom untuk wadah kedua (BG-grey - menambahkan warna latar belakang grey/abu-abu).
Tambahkan container berikut dalam tag <body>
, setelah tag <div1> </div1>
.
<div class="container-fluid">
<h2>About Company Page</h2>
<h4>Lorem ipsum..</h4>
<p>Lorem ipsum..</p>
<button class="btn btn-default btn-lg">Get in Touch</button>
</div>
<div class="container-fluid bg-grey">
<h2>Our Values</h2>
<h4><strong>MISSION:</strong> Our mission lorem ipsum..</h4>
<p><strong>VISION:</strong> Our vision Lorem ipsum..
</div>
Sehingga secara keseluruhan menjadi seperti berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Learn to Make Theme Together Multibisnisindo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.jumbotron {
background: url(https://cdn.jordymeow.com/wp-content/uploads/2011/10/tokyo-towernight-roppongi-hills.jpg);
background-color: #000;
opacity: 0.6;
color:#ffffff;
}
.bg-grey {
background-color: #f6f6f6;
}
</style>
</head>
<body>
<div class="jumbotron text-center">
<h1>Learn to Make Theme<br/>Together Multibisnisindo</h1>
<p>We specialize in theme design</p>
<form class="form-inline">
<input type="email" class="form-control" size="50" placeholder="Email Address">
<button type="button" class="btn btn-danger">Subscribe</button>
</form>
</div>
<div class="container-fluid">
<h2>About Company Page</h2>
<h4>Lorem ipsum..</h4>
<p>Lorem ipsum..</p>
<button class="btn btn-default btn-lg">Get in Touch</button>
</div>
<div class="container-fluid bg-grey">
<h2>Our Values</h2>
<h4><strong>MISSION:</strong> Our mission lorem ipsum..</h4>
<p><strong>VISION:</strong> Our vision Lorem ipsum..
</div>
</body>
</html>
9) Sekarang kita akan membuat/mengatur tag
/jumbotron dan container menjadi lebih baik dengan menambahkan padding. Pada css (.jumbotron) tambahkan (padding: 250px 25px;
), Lalu kita tambahkan css untuk container-fluid sbb:
.container-fluid {
padding: 60px 50px;
}
Sehingga kode css secara keseluruhan menjadi sbb:
<style>
.jumbotron {
background: url(https://cdn.jordymeow.com/wp-content/uploads/2011/10/tokyo-towernight-roppongi-hills.jpg);
background-color: #000;
opacity: 0.6;
color: #ffffff;
padding: 100px 25px;
}
.bg-grey {
background-color: #f6f6f6;
}
.container-fluid {
padding: 60px 50px;
}
</style>
10) Tambahkan Grid
- Tambahkan sebuah icon(atau logo perusahaan) yang memiliki warna dengan menambahkan kode css "
color: #f4511e;
" pada css ".logo
", untuk setiap kontainer. - Pisahkan icon dan "tentang teks" dengan menciptakan dua kolom (
.col-sm-8 dan .col sm-4
) - Tambahkan kueri media ke pusat kolom "logo" di layar lebih kecil dari 768 pixel. Yang pertama kita tambahkan kode css sbb:
.logo {
font-size: 200px;
color: #f4511e;
}
@media screen and (max-width: 768px) {
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
}
Lalu kita tambahkan sebuah ikon pada setiap container, pisahkan icon dan "tentang teks"
dengan menciptakan dua kolom (.col-sm-8 dan .col-sm-4). Tambahkan kueri media ke pusat
kolom "logo" di layar lebih kecil dari 768 pixel.
Sehingga susunan setiap container menjadi sbb:
<div class="container-fluid">
<div class="row">
<div class="col-sm-8">
<h2>About Company Page</h2>
<h4>Lorem ipsum..</h4>
<p>Lorem ipsum..</p>
<button class="btn btn-default btn-lg">Get in Touch</button>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-signal logo"></span>
</div>
</div>
</div>
<div class="container-fluid bg-grey">
<div class="row">
<div class="col-sm-4">
<span class="glyphicon glyphicon-globe logo"></span>
</div>
<div class="col-sm-8">
<h2>Our Values</h2>
<h4><strong>MISSION:</strong> Our mission lorem ipsum..</h4>
<p><strong>VISION:</strong> Our vision Lorem ipsum..</p>
</div>
</div>
</div>
Dan secara keseluruhan strukturnya menjadi sbb:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Learn to Make Theme Together Multibisnisindo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.jumbotron {
background: url(https://cdn.jordymeow.com/wp-content/uploads/2011/10/tokyo-towernight-roppongi-hills.jpg);
background-color: #000;
opacity: 0.6;
color: #ffffff;
padding: 100px 25px;
}
.bg-grey{
background-color: #f6f6f6;
}
.container-fluid{
padding: 60px 50px;
}
.logo {
font-size: 200px;
color: #f4511e;
}
@media screen and (max-width: 768px){
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
}
</style>
</head>
<body>
<div class="jumbotron text-center">
<h1>Learn to Make Theme<br/>Together Multibisnisindo</h1>
<p>We specialize in theme design</p>
<form class="form-inline">
<input type="email" class="form-control" size="50" placeholder="Email Address">
<button type="button" class="btn btn-danger">Subscribe</button>
</form>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-8">
<h2>About Company Page</h2>
<h4>Lorem ipsum..</h4>
<p>Lorem ipsum..</p>
<button class="btn btn-default btn-lg">Get in Touch</button>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-signal logo"></span>
</div>
</div>
</div>
<div class="container-fluid bg-grey">
<div class="row">
<div class="col-sm-4">
<span class="glyphicon glyphicon-globe logo"></span>
</div>
<div class="col-sm-8">
<h2>Our Values</h2>
<h4><strong>MISSION:</strong> Our mission lorem ipsum..</h4>
<p><strong>VISION:</strong> Our vision Lorem ipsum..</p>
</div>
</div>
</div>
</body>
</html>
11) Tambahkan Services Container dengan menambahkan container baru, lebar 2x3
columns dengan lebar yang sama (.col-sm-4) yang dibungkus dengan container-fluid,
dimana css untuk container-fluid telah kita buat seelumnya. Tambahkan container services
berikut setelah container ke-3(dibawah container-fluid).
<div class="container-fluid text-center">
<h2>SERVICES</h2>
<h4>What we offer</h4>
<br>
<div class="row">
<div class="col-sm-4">
<span class="glyphicon glyphicon-off"></span>
<h4>POWER</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-heart"></span>
<h4>LOVE</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-lock"></span>
<h4>JOB DONE</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
</div>
<br><br>
<div class="row">
<div class="col-sm-4">
<span class="glyphicon glyphicon-leaf"></span>
<h4>GREEN</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-certificate"></span>
<h4>CERTIFIED</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-wrench"></span>
<h4>HARD WORK</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
</div>
</div>
12) styling/Pengaturan Ikon. Menambahkan kustom class(.logo-small) untuk setiap glyphicon pada cantainer "Services", dengan menambahkan css sbb:
/* Add an orange color to all icons and set the font-size */
.logo-small {
color: #f4511e;
font-size: 50px;
}
.logo {
color: #f4511e;
font-size: 200px;
}
13) Berdasarkan kode css no.12 diatas, pada masing-masing glyphicon di setiap container "Sevices", tambahkan kode pemanggil css "logo-small". Sehingga menjadi seperti dibawah ini:
<div class="container-fluid text-center">
<h2>SERVICES</h2>
<h4>What we offer</h4>
<br>
<div class="row">
<div class="col-sm-4">
<span class="glyphicon glyphicon-off logo-small"></span>
<h4>POWER</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-heart logo-small"></span>
<h4>LOVE</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-lock logo-small"></span>
<h4>JOB DONE</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
</div>
<br><br>
<div class="row">
<div class="col-sm-4">
<span class="glyphicon glyphicon-leaf logo-small"></span>
<h4>GREEN</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-certificate logo-small"></span>
<h4>CERTIFIED</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-wrench logo-small"></span>
<h4>HARD WORK</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
</div>
</div>
14) Tambahkan Portofolio Container. Buat wadah baru dengan lebar-penuh/100%, dengan tiga kolom dengan lebar yang sama (.col-sm-4):
- Di dalam setiap kolom, menambahkan gambar.
- Kemudian, gunakan class img-thumbnail untuk membentuk gambar thumbnail.
- Tambahkan container portfolio berikut dibawah container services:
<div class="container-fluid text-center bg-grey">
<h2>Portfolio</h2>
<h4>What we have created</h4>
<div class="row text-center">
<div class="col-sm-4">
<div class="thumbnail">
<img src="https://lh3.ggpht.com/5GVXDHGskWk/UEO7Wcre_wI/AAAAAAAAAIA/y_tNO1ROXt4/Membuat-wordpress-theme-sendiripart-3.png" alt="Belajar membuat tema bersama multibisnisindo">
<a href="https://www.multibisnisindo.com" target="_blank">
<p><strong>Belajar membuat tema bersama multibisnisindo</strong></p>
</a>
<p>Yes, we build theme and website</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="https://www.multibisnisindo.com/po-content/poupload/medium/medium_multibisnisindo-menggenggam_dunia.png" alt="Kerabat digital Marketing Online">
<a href="https://www.multibisnisindo.com" target="_blank">
<p><strong>Kerabat digital Marketing Online</strong></p>
</a>
<p>We build websites as online marketing solution</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="https://3ogsj5k3uzl2yjyib21uef91.wpengine.netdna-cdn.com/wpcontent/uploads/2012/09/artifex-pro-portfolio-wordpress-theme.png"
alt="Responsive, SEO and mobile friendly">
<a href="https://www.multibisnisindo.com" target="_blank">
<p><strong>Responsive, SEO and mobile friendly</strong></p>
</a>
<p>Responsive, SEO and mobile friendly, is a must for every website we build.</p>
</div>
</div>
</div>
15) Styling Gambar Thumbnail. Tambahkan css berikut pada tempatnya:
.thumbnail {
padding: 0 0 15px 0;
border: none;
border-radius: 0;
}
.thumbnail img {
width: 100%;
height: 100%;
margin-bottom: 10px;
}
16) Tambahkan sebuah carousel tentang pendapat customer/client. Tambahkan container
berikut dibawah container portfolio:
<h2>What our customers say about multibisnisindo?</h2>
<div id="myCarousel" class="carousel slide text-center" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<h4>"This company is the best. I am so happy with the result!"<br><span style="fontstyle:normal;">Michael Roe, Vice President, Comment Box</span></h4>
</div>
<div class="item">
<h4>"One word... WOW!!"<br><span style="font-style:normal;">John Doe, Salesman, Rep Inc</span></h4>
</div>
<div class="item">
<h4>"Could I... BE any more happy with this company?"<br><span style="fontstyle:normal;">Chandler Bing, Actor, FriendsAlot</span></h4>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
17) Memberi pengaturan pada carousel agar lebih responsive serta menambah gaya dan
keindahan dengan menambah kode css:
.carousel-control.right, .carousel-control.left {
background-image: none;
color: #f4511e;
}
.carousel-indicators li {
border-color: #f4511e;
}
.carousel-indicators li.active {
background-color: #f4511e;
}
.item h4 {
font-size: 19px;
line-height: 1.375em;
font-weight: 400;
font-style: italic;
margin: 70px 0;
}
.item span {
font-style: normal;
}
18) Tambahkan Container untuk Pricing/harga. Buat wadah lebar penuh, dengan tiga
kolom dengan lebar yang sama (.col-sm-4), tambahkan kolom pada setiap panel:
Tambahkan container berikut di atas </body>
<div class="container-fluid">
<div class="text-center">
<h2>Pricing</h2>
<h4>Choose a payment plan that works for you</h4>
</div>
<div class="row">
<div class="col-sm-4">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h1>Basic</h1>
</div>
<div class="panel-body">
<p><strong>20</strong> Lorem</p>
<p><strong>15</strong> Ipsum</p>
<p><strong>5</strong> Dolor</p>
<p><strong>2</strong> Sit</p>
<p><strong>Endless</strong> Amet</p>
</div>
<div class="panel-footer">
<h3>$19</h3>
<h4>per month</h4>
<button class="btn btn-lg">Sign Up</button>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h1>Pro</h1>
</div>
<div class="panel-body">
<p><strong>50</strong> Lorem</p>
<p><strong>25</strong> Ipsum</p>
<p><strong>10</strong> Dolor</p>
<p><strong>5</strong> Sit</p>
<p><strong>Endless</strong> Amet</p>
</div>
<div class="panel-footer">
<h3>$29</h3>
<h4>per month</h4>
<button class="btn btn-lg">Sign Up</button>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h1>Premium</h1>
</div>
<div class="panel-body">
<p><strong>100</strong> Lorem</p>
<p><strong>50</strong> Ipsum</p>
<p><strong>25</strong> Dolor</p>
<p><strong>10</strong> Sit</p>
<p><strong>Endless</strong> Amet</p>
</div>
<div class="panel-footer">
<h3>$49</h3>
<h4>per month</h4>
<button class="btn btn-lg">Sign Up</button>
</div>
</div>
</div>
</div>
</div>
19) Beri pengaturan panel pricing menggunakan css:
.panel {
border: 1px solid #f4511e;
border-radius:0;
transition: box-shadow 0.5s;
}
.panel:hover {
box-shadow: 5px 0px 40px rgba(0,0,0, .2);
}
.panel-footer .btn:hover {
border: 1px solid #f4511e;
background-color: #fff !important;
color: #f4511e;
}
.panel-heading {
color: #fff !important;
background-color: #f4511e !important;
padding: 25px;
border-bottom: 1px solid transparent;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.panel-footer {
background-color: #fff !important;
}
.panel-footer h3 {
font-size: 32px;
}
.panel-footer h4 {
color: #aaa;
font-size: 14px;
}
.panel-footer .btn {
margin: 15px 0;
background-color: #f4511e;
color: #fff;
}
20) Tambahkan pembungkus/wadah baru untuk Contact Container sebagai antar
muka/sarana komunikasi dengan pengunjung website: Tambahkan container berikut diatas</body>
:
<div class="container-fluid bg-grey">
<h2 class="text-center">CONTACT</h2>
<div class="row">
<div class="col-sm-5">
<p>Contact us and we'll get back to you within 24 hours.</p>
<p><span class="glyphicon glyphicon-map-marker"></span> Citra Raya<br/>Tangrang,
Indonesia</p>
<p><span class="glyphicon glyphicon-phone"></span> +00 1515151515</p>
<p><span class="glyphicon glyphicon-envelope"></span> myemail@something.com</p>
</div>
<div class="col-sm-7">
<div class="row">
<div class="col-sm-6 form-group">
<input class="form-control" id="name" name="name" placeholder="Name" type="text"
required>
</div>
<div class="col-sm-6 form-group">
<input class="form-control" id="email" name="email" placeholder="Email" type="email"
required>
</div>
</div>
<textarea class="form-control" id="comments" name="comments" placeholder="Comment"
rows="5"></textarea><br>
<div class="row">
<div class="col-sm-12 form-group">
<button class="btn btn-default pull-right" type="submit">Send</button>
</div>
</div>
</div>
</div>
</div>
21) Tambahkan Google map agar customer/client dapat dengan mudah menemukan lokasi anda. Letakkan scrip untuk google map berikut di atas </body>
, dan sesuaikan value untuk garis lintangnya:
<!-- Set height and width with CSS -->
<div id="googleMap" style="height:400px;width:100%;"></div>
<!-- Add Google Maps -->
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(-6.256880, 106.517279);
function initialize() {
var mapProp = {
center:myCenter,
zoom:12,
scrollwheel:false,
draggable:false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapP
var marker = new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
22) Tambahkan navbar dibagian atas halaman untuk logo company dan menu sbb: Tambahkan navbar container berikut dibawah <body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" datatarget="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="https://www.multibisnsindo.com" target="_blank">Multibisnisindo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#about">ABOUT</a></li>
<li><a href="#services">SERVICES</a></li>
<li><a href="#portfolio">PORTFOLIO</a></li>
<li><a href="#pricing">PRICING</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
23) Tambahkan customisasi untuk navbar dengan css berikut:
.navbar {
margin-bottom: 0;
background-color: #f4511e;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing: 4px;
border-radius: 0;
}
.navbar li a, .navbar .navbar-brand {
color: #fff !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: #f4511e !important;
background-color: #fff !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
24) Tambahkan scrollspy untuk secara otomatis memperbarui link navbar ketika bergulir. Tambahkan id pada masing2 container berikut:
Tambahkan id pada tag <body>
, sehingga menjadi:
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
Tambahkan id pada container "about", sehingga menjadi:
<div id="about" class="container-fluid">
Tambahkan id pada container "services", sehingga menjadi:
<div id="services" class="container-fluid">
Tambahkan id pada container "portfolio", sehingga menjadi:
<div id="portfolio" class="container-fluid">
Tambahkan id pada container "pricing", sehingga menjadi:
<div id="pricing" class="container-fluid">
Tambahkan id pada container "contact", sehingga menjadi:
<div id="contact" class="container-fluid">
25) Tambahkan "Go to Top" icon untuk footer, yang akan membawa pengguna ke bagian
atas halaman ketika diklik:
Tambahkan kode css berikut pada tempatnya:
footer .glyphicon {
font-size: 20px;
margin-bottom: 20px;
color: #f4511e;
}
26) Tambahkan footer berikut diatas </body>
:
<footer class="container-fluid text-center">
<a href="#myPage" title="To Top">
<span class="glyphicon glyphicon-chevron-up"></span>
</a>
<p>Bootstrap Theme Made By <a href="https://www.multibisnisindo.com" title="Visit
Multibisnisindo">→Multibisnisindo</a></p>
</footer>
27) Tambahkan Smooth Scrolling. Gunakan jQuery untuk menambahkan Smooth Scrolling,
letakkan dibawah footer diatas:
<script>
$(document).ready(function(){
// Add smooth scrolling to all links in navbar + footer link
$(".navbar a, footer a[href='#myPage']").on('click', function(event) {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (900) specifies the number of milliseconds it takes to scroll to the
specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
});
})
</script>
28) Personalisasi Tema Anda dengan menambahkan font yang Anda sukai. Kami telah
menggunakan "Montserrat" dan "Lat" dari Font Perpustakaan Google. Tambahkan Link
untuk font pada tag <head>
:
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"
type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
29) Tambahkan kode css berikut pada tempatnya:
body {
font: 400 15px Lato, sans-serif;
line-height: 1.8;
color: #818181;
}
.jumbotron {
font-family: Montserrat, sans-serif;
}
.navbar {
font-family: Montserrat, sans-serif;
}
h2 {
font-size: 24px;
text-transform: uppercase;
color: #303030;
font-weight: 600;
margin-bottom: 30px;
}
h4 {
font-size: 19px;
line-height: 1.375em;
color: #303030;
font-weight: 400;
margin-bottom: 30px;
}
30) Slide Dalam Elements. Jika mungkin dibutuhkan tambahkan juga efek animasi yang akan meluncur pada elemen pada gulungan. Jika Anda ingin menggunakannya, cukup tambahkan class ".slideanim
" pada elemen dimana anda inginkan, dan tambahkan berikut untuk CSS dan jQuery (merasa bebas untuk mengubah durasi, opacity, dimana untuk memulai, ketika meluncur di, dan seterusnya):
Penambahan kode css:
.slideanim {visibility:hidden;}
.slide {
/* The name of the animation */
animation-name: slide;
-webkit-animation-name: slide;
/* The duration of the animation */
animation-duration: 1s;
-webkit-animation-duration: 1s;
/* Make the element visible */
visibility: visible;
}
/* Go from 0% to 100% opacity (see-through) and specify the percentage from when to slide in
the element along the Y-axis */
@keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateY(70%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
@-webkit-keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateY(70%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
Penambahan jquery(letakkan pada <script>....</script>
) atau sebelum/diatas </script>
.
$(window).scroll(function() {
$(".slideanim").each(function(){
var pos = $(this).offset().top;
var winTop = $(window).scrollTop();
if (pos < winTop + 600) {
$(this).addClass("slide");
}
});
});
})
31) Sehingga secara keseluruhan, script menjadi sbb:
<script>
$(document).ready(function(){
// Add smooth scrolling to all links in navbar + footer link
$(".navbar a, footer a[href='#myPage']").on('click', function(event) {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (900) specifies the number of milliseconds it takes to scroll to the
specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
});
$(window).scroll(function() {
$(".slideanim").each(function(){
var pos = $(this).offset().top;
var winTop = $(window).scrollTop();
if (pos < winTop + 600) {
$(this).addClass("slide");
}
});
});
})
</script>
32) Complete, secara keseluruhan theme yang kita buat memiliki struktur sbb:
Learn to Make Theme Together Multibisnisindo
body {
font: 400 15px Lato, sans-serif;
line-height: 1.8;
color: #818181;
}
.jumbotron {
font-family: Montserrat, sans-serif;
}
.navbar {
font-family: Montserrat, sans-serif;
}
h2 {
font-size: 24px;
text-transform: uppercase;
color: #303030;
font-weight: 600;
margin-bottom: 30px;
}
h4 {
font-size: 19px;
line-height: 1.375em;
color: #303030;
font-weight: 400;
margin-bottom: 30px;
}
.jumbotron {
background: url(https://cdn.jordymeow.com/wp-content/uploads/2011/10/tokyo-towernight-roppongi-hills.jpg);
background-color: #000;
/*
Black
*/
opacity: 0.8;
color: #ffffff;
padding: 250px 25px;
}
.bg-grey
{
background-color: #f6f6f6;
}
.container-fluid {
padding: 60px 50px;
}
.logo {
font-size: 200px;
color: #f4511e;
}
@media screen and (max-width: 768px) {
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
}
/*
Add an orange color to all icons and set the font-size
*/
.logo-small {
color: #f4511e;
font-size: 50px;
}
.logo {
color: #f4511e;
font-size: 200px;
}
.thumbnail {
padding: 0 0 15px 0;
border: none;
border-radius: 0;
}
.thumbnail img {
width: 100%;
height: 100%;
margin-bottom: 10px;
}
.carousel-control.right, .carousel-control.left {
background-image: none;
color: #f4511e;
}
.carousel-indicators li {
border-color: #f4511e;
}
.carousel-indicators li.active {
background-color: #f4511e;
}
.item h4 {
font-size: 19px;
line-height: 1.375em;
font-weight: 400;
font-style: italic;
margin: 70px 0;
}
.item span {
font-style: normal;
}
.panel {
border: 1px solid #f4511e;
border-radius:0;
transition: box-shadow 0.5s;
}
.panel:hover {
box-shadow: 5px 0px 40px rgba(0,0,0, .2);
}
.panel-footer .btn:hover {
border: 1px solid #f4511e;
background-color: #fff !important;
color: #f4511e;
}
.panel-heading { color: #fff !important;
background-color: #f4511e !important;
padding: 25px;
border-bottom: 1px solid transparent;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.panel-footer {
background-color: #fff !important;
}
.panel-footer h3 {
font-size: 32px;
}
.panel-footer h4 {
color: #aaa;
font-size: 14px;
}
.panel-footer .btn {
margin: 15px 0;
background-color: #f4511e;
color: #fff;
}
.navbar {
margin-bottom: 0;
background-color: #f4511e;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing: 4px;
border-radius: 0;
}
.navbar li a, .navbar .navbar-brand {
color: #fff !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: #f4511e !important;
background-color: #fff !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
footer .glyphicon {
font-size: 20px;
margin-bottom: 20px;
color: #f4511e;
}
.slideanim {visibility:hidden;}
.slide {
/* The name of the animation */
animation-name: slide;
-webkit-animation-name: slide;
/* The duration of the animation */
animation-duration: 1s;
-webkit-animation-duration: 1s;
/* Make the element visible */
visibility: visible;
}
/* Go from 0% to 100% opacity (see-through) and specify the percentage from when to slide in
the element along the Y-axis */
@keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateY(70%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
@-webkit-keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateY(70%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
MultibisnisindoABOUTSERVICESPORTFOLIOPRICINGCONTACTLearn to Make Theme
With MultibisnisindoWe specialize in theme design SubscribeAbout Company PageLorem ipsum..Lorem ipsum..Get in Touch
Our ValuesMISSION: Our mission lorem ipsum..VISION: Our vision Lorem ipsum..SERVICESWhat we offer
POWERLorem ipsum dolor sit amet..LOVELorem ipsum dolor sit amet..JOB DONELorem ipsum dolor sit amet..
GREENLorem ipsum dolor sit amet..CERTIFIEDLorem ipsum dolor sit amet..HARD WORKLorem ipsum dolor sit amet..PortfolioWhat we have created Belajar membuat tema bersama multibisnisindoYes, we build theme and website Kerabat digital Marketing OnlineWe build websites as online marketing solution
Source lengkap dapat anda unduh di halaman unduhan - .
Baca Juga artikel terkait Cara Membuat Template berikut:
- Materi 1 Cara Membuat Template Blog Responsive dan Ringan
- Materi 2 Cara Membuat Template Blog Responsive dan Ringan 2
- Materi 3 Cara desain Main Content Blog dan Sidebar
- Materi 4 Cara membuat Header 2 kolom dalam 2 Langkah Praktis
- Materi 5 Cara membuat Footer 3 kolom dalam 2 langkah Praktis