Learn to Make Theme
With Multibisnisindo
        
We specialize in web site building and design themes
    

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:

  
  
  

  
  
  




    

        
Learn to Make Theme
With Multibisnisindo
        
We specialize in web site building and design themes

        

            
            Subscribe
        
    

 

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 , setelah tag .

  
About Company Page
  
Lorem ipsum..
  
Lorem ipsum..
  Get in Touch



  
Our Values
  
MISSION: Our mission lorem ipsum..
  
VISION: Our vision Lorem ipsum..
 

  Sehingga secara keseluruhan menjadi seperti berikut:

  
  
  
  
  
  






  
Learn to Make Theme
Together Multibisnisindo
  
We specialize in theme design


  

    
    Subscribe
  




  
About Company Page
  
Lorem ipsum..
  
Lorem ipsum..
  Get in Touch



  
Our Values
  
MISSION: Our mission lorem ipsum..
  
VISION: Our vision Lorem ipsum..



 

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:

10) Tambahkan Grid

1. Tambahkan sebuah icon(atau logo perusahaan) yang memiliki warna dengan menambahkan kode css "color: #f4511e;" pada css ".logo", untuk setiap kontainer.
2. Pisahkan icon dan "tentang teks" dengan menciptakan dua kolom (.col-sm-8 dan .col sm-4)
3. 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:

  

    

      
About Company Page
      
Lorem ipsum..
      
Lorem ipsum..
      Get in Touch
    
    

      
    
  



  

    

      
    
    

      
Our Values
      
MISSION: Our mission lorem ipsum..
      
VISION: Our vision Lorem ipsum..
    
  
 

Dan secara keseluruhan strukturnya menjadi sbb:

  
  
  
  
  
  





  
Learn to Make Theme
Together Multibisnisindo
  
We specialize in theme design
  

    
    Subscribe
  


  

    

      
About Company Page
      
Lorem ipsum..
      
Lorem ipsum..
      Get in Touch
    
    

      
    
  


  

    

      
    
    

      
Our Values
      
MISSION: Our mission lorem ipsum..
      
VISION: Our vision Lorem ipsum..
    
  


 

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

  
SERVICES
  
What we offer
  

  

    

      
      
POWER
      
Lorem ipsum dolor sit amet..
    
    

      
      
LOVE
      
Lorem ipsum dolor sit amet..
    
    

      
      
JOB DONE
      
Lorem ipsum dolor sit amet..
    
    
    


  

    

      
      
GREEN
      
Lorem ipsum dolor sit amet..
    
    

      
      
CERTIFIED
      
Lorem ipsum dolor sit amet..
    
    

      
      
HARD WORK
      
Lorem ipsum dolor sit amet..
    
  
 

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:

 


  
SERVICES
  
What we offer
  

  

    

      
      
POWER
      
Lorem ipsum dolor sit amet..
    
    

      
      
LOVE
      
Lorem ipsum dolor sit amet..
    
    

      
      
JOB DONE
      
Lorem ipsum dolor sit amet..
    
    
    


  

    

      
      
GREEN
      
Lorem ipsum dolor sit amet..
    
    

      
      
CERTIFIED
      
Lorem ipsum dolor sit amet..
    
    

      
      
HARD WORK
      
Lorem ipsum dolor sit amet..
    
  
 

14) Tambahkan Portofolio Container. Buat wadah baru dengan lebar-penuh/100%, dengan tiga kolom dengan lebar yang sama (.col-sm-4):

1. Di dalam setiap kolom, menambahkan gambar.
2. Kemudian, gunakan class img-thumbnail untuk membentuk gambar thumbnail.
3. Tambahkan container portfolio berikut dibawah container services:

 

  
Portfolio
  
What we have created
  

    

      

        
            
                
Belajar membuat tema bersama multibisnisindo
            
            
Yes, we build theme and website
        
    

    

        
        
            
Kerabat digital Marketing Online
        
        
We build websites as online marketing solution
    


    

        
        
            
Responsive, SEO and mobile friendly
        
        
Responsive, SEO and mobile friendly, is a must for every website we build.
    

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:

What our customers say about multibisnisindo?
 

  
  

    

    

    

  

  
  

    

    
"This company is the best. I am so happy with the result!"
Michael Roe, Vice President, Comment Box
  

"One word... WOW!!"
John Doe, Salesman, Rep Inc
    
    

"Could I... BE any more happy with this company?"
Chandler Bing, Actor, FriendsAlot




    
    Previous


    
    Next

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

  

  

    
Pricing
    
Choose a payment plan that works for you
  
  

    

      

        

          
Basic
        
        

          
20 Lorem
          
15 Ipsum
          
5 Dolor
          
2 Sit
          
Endless Amet
        
        

          
$19
          
per month
          Sign Up
        
      
    
    

      

        

          
Pro
        
        

          
50 Lorem
          
25 Ipsum
          
10 Dolor
          
5 Sit
          
Endless Amet
        
        

          
$29
          
per month
          Sign Up
        

      
    
   

      

        

          
Premium
        
        

          
100 Lorem
          
50 Ipsum
          
25 Dolor
          
10 Sit
          
Endless Amet
        
        

          
$49
          
per month
          Sign Up
        
      
    
  
 

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
:

 
 
  
CONTACT
  

    

      
Contact us and we'll get back to you within 24 hours.
      
 Citra Raya
Tangrang,
Indonesia
      
 +00 1515151515
      
 myemail@something.com
    
    

      

        

          
        
        

          
        
      
      

      

        

          Send
        
      
    
  
 

21) Tambahkan Google map agar customer/client dapat dengan mudah menemukan lokasi anda. Letakkan scrip untuk google map berikut di atas , dan sesuaikan value untuk garis lintangnya:

22) Tambahkan navbar dibagian atas halaman untuk logo company dan menu sbb: Tambahkan navbar container berikut dibawah

 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 , sehingga menjadi:

Tambahkan id pada container "about", sehingga menjadi:

Tambahkan id pada container "services", sehingga menjadi:

Tambahkan id pada container "portfolio", sehingga menjadi:

Tambahkan id pada container "pricing", sehingga menjadi:

Tambahkan id pada container "contact", sehingga menjadi:

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 :

27) Tambahkan Smooth Scrolling.  Gunakan jQuery untuk menambahkan Smooth Scrolling,
letakkan dibawah footer diatas:

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 :

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 ) atau sebelum/diatas .
 

 
  $(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:

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(http://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.