Home

Membuat gambar slide keren responsiv di blog

toat sarang
toat sarang
Halo Gan Slamat Pagi ...


Mungkin kalian pngin membuat sbuah web atau blog namun kalian butuh sarana gambar yang akan di jadikan media promosi produk yang akan kalian jual tidak ada salahnya kalo kalian mencoba mempromosikan produk dengan sbuah cara yang unik .dengan sbuah gambar slide yang akan memberikan detail produk kalian .gmanah kalian tertarik .langsung sajah di bawah ini ada lah detail kodenya .kalian bisa pasang di mana sajah sesuai yang kalian inginkan .karna ini responsiv .cocok buat web atau pun blog







Silahkan kalian copas code di bawah ini


<div class='post-body entry-content' id='post-body-4650546841133243850' itemprop='articleBody'>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<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>.carousel-inner > .item > img,.carousel-inner > .item > a > img { width: 90%; margin: auto;}</style>
<br />
<div class="container">
<br />
<div class="carousel slide" data-ride="carousel" id="WJSlider">
<!-- Indicators -->
    <br />
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#WJSlider"></li>
<li data-slide-to="1" data-target="#WJSlider"></li>
<li data-slide-to="2" data-target="#WJSlider"></li>
<li data-slide-to="3" data-target="#WJSlider"></li>
</ol>
<!-- Wrapper for slides -->
    <br />
<div class="carousel-inner" role="listbox">
<div class="item active">
<img alt="slide1" height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR8DZjkMqQPtfF2Ks0CuEIt3wSU3NuOUz8yO5rX9cCljvf8NqPnQPxBLSVJMJh-Ijf7tLFFHpyN76NX7RvpBn-BtdllIQRKz0K45kuyj_1-F-1hp9Zmbup2v4TpC1AVoCZ_tiak0UtsIk/s320/Penginapan-Murah-di-Wisata-Guci-Tegal-2.jpg" width="280" />
        <br />
<div class="carousel-caption">
<h3>
GUCI Di Arah Jembatan</h3>
Ini Akan Terihat Dari Arah Barat</div>
</div>
<div class="item">
<img alt="slide2" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghEf-tvHiTmdfbU_5A5VhE5fBQ1CDnhJDBNFZV-pXaeRfitijevKPU-tNoDpYo11XmeC1-4KbOuNJu6tznpdVVLAhFpMw4Bln2bYPNONk65wqFe0CN0GAIrg-gWU6kCuAW6Y1n2_OEmP8/s320/guci1.jpg" width="280" />
        <br />
<div class="carousel-caption">
<h3>
Taman Wisata Air Panas Guci</h3>
Ini Akan trlihat Ketika Kita Berada Di Bawah Jalan Raya</div>
</div>
<div class="item">
<img alt="slide3" height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYE-ZME6F7SuU31ZWFNYTgJW2td0rafSTv1DsiFZHI1n5XQoOnumBUhv5kcoaMS8queIqaToVp-i8bvjGuf3E3Zd4IIh8YQ-EEzZ7iQxjUuMT2tMZ_KLlLBaIJ_kaBTCxVH7cvAcRUDFU/s320/guci2.jpg" width="260" />
        <br />
<div class="carousel-caption">
<h3>
pemandian Air Panas GUCI</h3>
Ini Adalah Pemandian Air Panas GUCI Jika Di lihat pada Sore Hari.</div>
</div>
<div class="item">
<img alt="slide4" height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiifcAc9v___oI3ON-pbTFK-weJRKlUd8WdxZDkOOZ3uaCkYHq7lhOvTDZW4xOb4eiHG3U9RkDfQgcXS9xL33XNtjbNGDKO5T_f-qNrBmcPyBxx74XujxvD8Wub51QDuPhAUUMXS7UNbDg/s320/guci4.jpg" width="280" />
        <br />
<div class="carousel-caption">
<h3>
Pintu Masuk Wisata Guci</h3>
Ini Dalah Pintu Masuk Pemandian Air Panas GUCI.</div>
</div>
</div>
<!-- Left and right controls -->
    <a class="left carousel-control" data-slide="prev" href="#WJSlider" role="button">
      <span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Kembali</span>
    </a>
    <a class="right carousel-control" data-slide="next" href="#WJSlider" role="button">
      <span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Lanjut</span>
    </a>
  </div>
Peringatan...



Kalian gantu Url Gambar Dengan Url gambar kalian

Dan Deskripsi Kambar .Juga Bisa di ganti Sesua Gambar

Jika Ada Pertanyaan Silahkan Berkomentar di bwah Ini


Tank You

Baca juga