[Tutorial] Memasang Carousel Bootstrap pada Blogspot

Pada postingan ini saya akan membahas tentang cara untuk memasang Carousel Bootstrap pada Blogspot.

Sebelum saya mulai menjelaskan, pastikan blog anda sudah terintegrasi dengan Bootstrap Framework. Hal ini karena caraousel bootstrap memerlukan fungsi javascript dan class css yang yang ada pada bootstrap framework. Jika anda belum mengetahui cara untuk mengintegrasikan blog dengan Bootstrap Framework, anda dapat memabaca pada postingan saya sebelumnya disini.



Berikut adalah langkah-langkah memasang Carousel Bootstrap pada blog :

1. Pilih menu Template, lalu klik tombol Edit HTML. Saya ingatkan selalu untuk melakukan backup pada kode HTML pada halaman edit ini.
   
   
2. Buka link carousel bootstrap, pada halaman tersebut dijelaskan struktur kode HTML untuk menampilkan carousel bootstrap.
3. Pada halaman Edit HTML blog anda, cari kode html <div class='region-inner header-inner'>
4. Tempelkan kode berikut ini tepat dibawah kode <div class='region-inner header-inner'>
   

   <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
   
     <!-- Indicators -->
   
     <ol class="carousel-indicators">
   
     <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
   
     <li data-target="#carousel-example-generic" data-slide-to="1"></li>
   
     <!-- tambah kan tag li seperti contoh ini sesuai jumlah gambar yang anda gunakan -->
   
     <li data-target="#carousel-example-generic" data-slide-to="2"></li>
   
     </ol>
   
   
   <!-- Wrapper for slides -->
   
     <div class="carousel-inner" role="listbox">
   
     <!-- item pertama -->
   
     <div class="item active">
   
     <img src="url_image_anda" alt="isi_ini_dengan_nama_file_gambar">
   
     <div class="carousel-caption">
   
     ini adalah caption pertama
   
     </div>
   
     </div>
   
     <!-- item selanjutnya -->
   
     <div class="item">
   
     <img src="url_image_anda_selanjutnya" alt="isi_ini_dengan_nama_file_gambar">
   
     <div class="carousel-caption">
   
     ini adalah caption selanjutnya
   
     </div>
   
     </div>
   
     </div>
   
   
   <!-- Controls -->
   
     <a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
   
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
   
     <span class="sr-only">Next</span>
   
     </a>
   
     </div>
   
   
   
   

5.  Ganti text  url_image_anda dengan url gambar yang ingin anda tampilkan. Saran saya gunakan gambar yang anda upload dari blog anda agar tidak memakan waktu lama saat me-load gambar tersebut.
6. Lakukan modifikasi CSS pada blog anda pada menu Template lalu klik tombol Costumize. Selanjutnya pilih Advanced dan scroll ke bawah dan klik Add CSS.

Sekian untuk tuturial cara memasang Carousel Bootstrap pada blog. Terimakasih sudah berkunjuang dan membaca tulisan di blog saya. :)