Membuat tema dengan bootstrap untuk Popoji Cms

Administrator
Create themes, Theme popojicms, Make theme
6909 Kali Dilihat
7 Komentar

Gambar 79. Make Theme With bootstrap for Popoji Cms

Membuat Tema Bootstrap

PopojiCms merupakan sebuah platform CMS yang dibut oleh developer Indonesia, yaitu om Dwira Survivor. PopojiCms dibangun menggunakan framework Popoji yang sangat mudah untuk digunakan untuk pembuatan berbagai website sesuai keinginan. Untuk melengkapi dokumentasi PopojiCms, berikut saya buat tutorial cara Membuat tema dengan bootstrap untuk Popoji Cms. Agar para developer khususnya developer pemula dapat berkreasi dengan kemampuanya sendiri Membuat tema dengan bootstrap untuk Popoji Cms. Website yang dibuat menggunakan platform PopojiCms hanya dapat menggunakan tema yang memang khusus untuk PopojiCms. Oleh karenanya artikel Membuat tema dengan bootstrap untuk Popoji Cms ini akan sangat membantu kalian dalam pembuatan tema untuk PopojiCms. Untuk memulai tutorial dalam pembuatan tema silahkan ikuti setiap petunjuk dalam artikel ini.

1) 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.

Ini adalah artikel khusus untuk pengguna platform PopojiCms, jika kalian sedang mencari artikel Cara Membuat Template untuk blogspot silahkan baca artikel 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 3 langkah Praktis

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">&rarr;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>

Source lengkap dapat anda unduh di halaman unduhan.

7 Komentar

18 Nov 2018 03:11:am

So.... please wait next article about it.

Reed

29 Sep 2016 11:15:am

Tidak bisa di download Min...

Super Administrator

29 Sep 2016 05:09:am

Ok .... Link download telah saya perbaharui, silahkan download.

29 Sep 2016 04:09:am

Bentar saya cek ya .... nanti saya infokan.

Layanan Perancang Website Batuceper Di Jamin Terdaftar Google

Layanan Perancang Website Company Profile Di Jamin Muncul Di Pencarian

Jasa Perancang Website Katalog Produk Dapat Di Lihat Di Mesin Pencari Google

Cara Membuat Tombol Kontak WhatsApp Melayang Muncul Pada Setiap Halaman Di Berbagai Platform Website

Cara Mengatasi Error Wordpress Akibat Gagal Update Tanpa Kehilangan Konten Website

Theme Divi Pro Hanya 50 Ribu Untuk 10 Orang Tercepat

Membuat tema dengan bootstrap untuk Popoji Cms

Membuat Tema Bootstrap

Administrator

Status Akun Iklan 11 Juni 2024

7 Komentar

adnan

Administrator

Cathleen

Administrator

Reed

Super Administrator

Super Administrator

Cara Setting Iklan Google untuk Jasa Service AC: Panduan Lengkap

Mengatasi iklan AdWords yang tayang lambat

Mengoptimalkan Bisnis Teknisi AC Melalui Jasa Pembuatan Website Service AC

Cara Sederhana Untuk Mempelajari Cara Membuat Situs Website Khusus Untuk Pemula

Semua Kategori

Populer

Layanan Perancang Website Batuceper Di Jamin Terdaftar Google

Layanan Perancang Website Company Profile Di Jamin Muncul Di Pencarian

Jasa Perancang Website Katalog Produk Dapat Di Lihat Di Mesin Pencari Google

Cara Membuat Tombol Kontak WhatsApp Melayang Muncul Pada Setiap Halaman Di Berbagai Platform Website

Cara Mengatasi Error Wordpress Akibat Gagal Update Tanpa Kehilangan Konten Website

Theme Divi Pro Hanya 50 Ribu Untuk 10 Orang Tercepat

Membuat Tema Bootstrap

Administrator

Status Akun Iklan 11 Juni 2024

7 Komentar