Cara Buat Efek Gambar Slide Bootstrap Keren Di Blog

Cara Buat Efek Gambar Slide Bootstrap Keren Di Blog - Oke Gan Akhirnya Saya Bisa Update Post Lagi..
Kali Ini Saya Akan Memberikan Tutorial Bagaimana Cara Buat Efek Gambar Slide Bootstrap Keren Di Blog, Padahal Ini Sangat Gampang Dan Tak Ribet Pula #Wkwkwkw,,,, Anak Zaman Kiwari Hayang Na Instan Waenyah ,

Mau Langsung Tutorial nya, Tunggu Dlu, Admin Sudah Membuat Link Demo Efek Seperti Ini
Nah Bila Sudah Lihat DEMOnya Silahkan Ikuti Tutorial Berikut : Jangan Tuncal Ye!!

1. Login Blogger
2. Pilih Blog
3. Dasboard
4. Entri Baru / Widget / Template ( Terserah ) Bisa Di Pasang Di Mana Saja
5. Copy Kode Di Bawah Ini > Paste Ke HTML

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container-fluid">
       
<!-- Carousel container -->
<div id="my-pics" class="carousel slide" data-ride="carousel" style="width:300px;margin:auto;">

<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#my-pics" data-slide-to="0" class="active"></li>
<li data-target="#my-pics" data-slide-to="1"></li>
<li data-target="#my-pics" data-slide-to="2"></li>
</ol>

<!-- Content -->
<div class="carousel-inner" role="listbox">

<!-- Slide 1 -->
<div class="item active">
<img src="URL-Gambar" alt="Sunset over beach">
</div>

<!-- Slide 2 -->
<div class="item">
<img src="URL-Gambar" alt="Rob Roy Glacier">
</div>

<!-- Slide 3 -->
<div class="item">
<img src="URL-Gambar" alt="Longtail boats at Phi Phi">
</div>

</div>

<!-- Previous/Next controls -->
<a class="left carousel-control" href="#my-pics" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#my-pics" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>

</div>

</div>
       
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<!-- Initialize Bootstrap functionality -->
<script>
// Initialize tooltip component
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

// Initialize popover component
$(function () {
  $('[data-toggle="popover"]').popover()
})
</script>

Nah Kode " URL-Gambar " Ganti Dengan Url Gambar Kamu Dan Lihat Hasilnya

Read More