Riky Metall's Blog di Facebook!

Like Page halaman rikymetalist.blogspot.com di Facebook!
Dan Update status kamu via rikymetalist.blogspot.com disini!

INFO

- Mohon dibaca : Cara download di Blog ini. (rikymetall's Blog)
- Mohon dibaca : CARA DOWNLOAD via TUSFILES.NET
- Jika terdapat Link Download yang rusak, silahkan laporkan kepada saya melalui
email saya di : rikymetal10@gmail.com

Jasa Pemasangan Iklan

Jasa Pemasangan Iklan

PERHATIAN

Perhatian. Khusus Untuk Daerah MEDAN dan SEKITARNYA. Bagi Anda Mahasiswa/Mahasiswi yang sedang menyelesaikan SKRIPSI ataupun Tugas Akhir tetapi Anda Merasa Bingung, Tidak Sempat dan banyak kesibukan untuk mengerjakannya, Anda bisa Hubungi di

rikymetal10@gmail.com

(Jasa Pengerjaan Skripsi). Hanya Menangani Skripsi Mahasiswa dengan Jurusan sbb :

- Bahasa Indonesia - PBSI
- PKn
- Matematika
- Kimia
- Biologi
- Sejarah

TIDAK MELAYANI Jurusan : Bahasa Inggris, Telekomunikasi, Manajemen dan Teknik Informatika, Komputer.
Untuk Harga Bisa Di Negosiasi kepada Bpk. Sarwono. Alamat silahkan tanya melalui EMAIL yang tercantum di atas.
Namun yang terpenting Anda juga harus Membantu walaupun sedikit agar Anda paham apa isi Skripsi Anda.
Beberapa mahasiswa/i dari kampus terkenal di Medan telah menyelesaikan skripsinya disini. :)

Jika Ada pertanyaan, silahkan kirim pesan Anda di : rikymetal10@gmail.com

Saturday, April 12, 2014

Membuat Image Slider dengan Bootstrap Carousel Slider


Kita lanjutkan bagian keenam dari artikel Mendesain Web dengan Bootstrap. Lanjutan dari artikel pertama Starter Template Bootstrap dan Kedua Mendesain Layout Grid dan Container dengan Bootstrap dan Ketiga Mendesain Layout Table dengan Bootstrap dan Keempat Membuat Navbar dengan Bootstrap dan Kelima Membuat Navlist dengan Bootstrap dan Keenam Menampilkan Source Program di Halaman Web dengan Pretty Print Bootstrap.

Kali ini sangat menarik, yaitu Membuat Image Slider dengan Carousel Bootstrap. Ternyata Bootstrap juga mempunyai kemampuan untuk Menampilkan Carousel atau yang biasa disebut Image Slider. Style dari Carousel ini ada yang Tidak Full Screen dan Tidak Mentok di Atas Halaman Web atau ada yang Carousel Full Screen dan Mentok di Atas (Top) Halaman Web.

Ok, dari file Starter Template bisa dikembangkan sehingga menjadi file carousel.html berikut ini :



 
   
    Bootstrap, from Twitter
   
   
   


   
   
   

   
   

   
     
     
     
     
     
 


 

   


     

Bootstrap starter template


      Dokumen kosong dengan library Bootstrap siap digunakan.

       
       
         
           

             
             

               
                 

Example headline.


                 
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

                  Sign up today
               
             
           
           

             
             

               
                 

Another example headline.


                 
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

                  Learn more
               
             
           
           

             
             

               
                 

One more for good measure.


                 
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

                  Browse gallery
               
             
           
         
         
         
       
        
   

   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

 


Hasilnya sebagai berikut :


Kemudian bisa dicoba juga Carousel yang Top dan Ful Screen. Dari file Starter Template bisa dikembangkan sehingga menjadi file carouseltop.html berikut ini :



 
   
    Bootstrap, from Twitter
   
   
   

   
   
   

   
   

   
     
     
     
     
     
 

 



   
     
       

         
         

           
             

Example headline.


             
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

              Sign up today
           
         
       
       

         
         

           
             

Another example headline.


             
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

              Learn more
           
         
       
       

         
         

           
             

One more for good measure.


             
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

              Browse gallery
           
         
       
     
     
     
   

   


     

Bootstrap starter template


      Dokumen kosong dengan library Bootstrap siap digunakan.
        
   

   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

 


Hasilnya :


Desain selengkapnya dapat didownload disini. Klik link ini, kemudian klik File-Download (Unduh)

Semoga berguna :) 
Sumber : link

Komentar Terakhir