إنضم لنا

Membuat gambar slide keren responsiv di blog





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://1.bp.blogspot.com/-UsJbM0IsXNI/WkPwpCh0uMI/AAAAAAAABrk/Ggj85NjUla8jLPftYNmKmEbq6W6SvdACgCLcBGAs/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://3.bp.blogspot.com/-hoEBQE9_7Ko/WkPwbCqG99I/AAAAAAAABrg/WS6pdpA4FRosWpbo23hmlo8m-o64YsD7QCLcBGAs/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://3.bp.blogspot.com/-7XT5HWY715A/WkPwWq7YRbI/AAAAAAAABrc/ULy7ie6PHpUoMQQDUr041ebMk2Vgy74qwCLcBGAs/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://2.bp.blogspot.com/-sM-BDQGaYRE/WkPwSULOWKI/AAAAAAAABrY/Cdb-xgN04ZcUw5NZrMmq8Wk5WfeTabAlgCLcBGAs/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
Penulis:

Seorang Penulis Asal Tegal jawa tengah 


PENTING !!!
Untuk pertanyaan di luar topik silahkan Gunakan Komentar Facebook atau Google+ sengaja Kami sediakan Untuk komentar random Dan untuk pertanyaan seputar article gunakan komentar disqus Terimakasih...

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments:

This site uses cookies from Google to deliver its services, to personalise ads and to analyse traffic. Information about your use of this site is shared with Google. By using this site, you agree to its use of cookies. Detail