Search

Memuat...

Berlanggan Via Email

Enter your email address:

My Friend

Cara Membuat Slideshow Photo Menggunakan Tombol Navigasi Pada Postingan Blog

Untuk memenuhi jawaban dari permintaan sobat pengunjung Blog Rangga pada postingan sebelum nya pada judul post  Cara Membuat Slide Show Foto / Gambar Pada Postingan Blog yang meminta supaya di bagikan Cara Membuat Slideshow Photo Menggunakan Tombol Navigasi Pada Postingan Blog , kali ini saya mencoba untuk memenuhi permintaan itu seperti contoh slideshow nya dibawah ini

Supaya slideshow nya berfungsi seperti di atas saya menggunakan kode yang saya dapat dari postingan nya Mas Noer Cholis yang mempunyai website keren http://www.carabuatwebgratis.com/ yaitu dengan langkah2 sebagai berikut :
  1. Login dulu ke blogger.
  2. Pilih Template di dasbor blog.
  3. Pilih Edit HTML 
  4. Centang dulu Expand Template Widget.
  5. cari kode </head> gunakan Ctrl+F untuk memudahkan pencarian kode 
  6. Pasang kode di bawah ini sebelum kode </head>
<script src="https://raw.github.com/bkosborne/jQuery-Feature-Carousel/master/js/jquery-1.7.min.js"></script>
<script src="https://raw.github.com/bkosborne/jQuery-Feature-Carousel/master/js/jquery.featureCarousel.js"></script>
<script src="https://raw.github.com/bkosborne/jQuery-Feature-Carousel/master/js/jquery.featureCarousel.min.js"></script>

<script type="text/javascript">
      $(document).ready(function() {
        var carousel = $("#carousel").featureCarousel({
          // include options like this:
          // (use quotes only for string values, and no trailing comma after last option)
          // option: value,
          // option: value
        });

        $("#but_prev").click(function () {
          carousel.prev();
        });
        $("#but_pause").click(function () {
          carousel.pause();
        });
        $("#but_start").click(function () {
          carousel.start();
        });
        $("#but_next").click(function () {
          carousel.next();
        });
      });
    </script>


<style type='text/css'>
/********************
 * FEATURE CAROUSEL *
 ********************/
#carousel-container {
  position:relative;

padding:7px;
  background-color:#CCC;

}
#carousel {
  border:2px solid #fff;
  height:300px;
  background-color:#CCC;
  position:relative;
  font-size:12px;
  font-family: Arial;
}
#carousel .carousel-image {
  height:230px;
  width:400px;
box-shadow: 6px 6px 10px #818181;
-webkit-box-shadow: 6px 6px 10px #818181;
-moz-box-shadow: 6px 6px 10px #818181;
  border:0;
  display:block;
}
#carousel .carousel-feature {
  position:absolute;
  top:-1000px;
  left:-1000px;
  border:2px solid #5d5d5d;
  cursor:pointer;
}
#carousel .carousel-feature .carousel-caption {
  position:absolute;
  bottom:0;
  width:100%;
  background-color:#000;
}
#carousel .carousel-feature .carousel-caption p {
  margin:0;
  padding:5px;
  font-weight:bold;
  font-size:12px;
  color:white;
}
#carousel .tracker-summation-container {
  position:absolute;
  color:white;
  right:50px;
  top:212px;
  padding:3px;
  margin:3px;
  background-color:#000;
}
#carousel .tracker-individual-container {
  position:absolute;
  color:white;
  right:95px;
  top:218px;
  padding:0;
  margin:0;
}
#carousel .tracker-individual-container li {
  list-style:none;
}
#carousel .tracker-individual-container .tracker-individual-blip {
  margin:0 3px;
  padding:0 3px;
  color:#000;
  text-align:center;
  border:1px solid #5d5d5d;
  background-color:#DDD;
}
#carousel .tracker-individual-container .tracker-individual-blip-selected {
  color:#FFC600;
  font-weight:bold;
  border:1px solid #fff;
  background-color:#000;
}
#carousel-left {
  position:absolute;
  bottom:33px;
  left:200px;
  cursor:pointer;
}
#carousel-right {
  position:absolute;
  bottom:33px;
  right:200px;
  cursor:pointer;
}
</style>

 7. Simpan Template
 8. Copy kode di bawah ini dan pastekan ke halaman HTML Gadget atau Halaman HTML Postingan blog sobat
<div id="carousel-container">
<div id="carousel">
<div class="carousel-feature">
<a href="http://blog-rangga.blogspot.com/2013/03/cara-hidup-pintar-dengan-tablet-pc.html">
<img alt="Blog Rangga" class="carousel-image" src="http://2.bp.blogspot.com/-d8zjlpOHJ58/UUYBDjVuUAI/AAAAAAAAFos/s8OoVQ7fipk/s1600/Blog+Rangga.jpg" title="Cara Membuat Slideshow Photo Menggunakan Tombol Navigasi Pada Postingan Blog" /></a>
<br />
<div class="carousel-caption">
Acer kembali meluncurkan produk baru nya yang sangat luar biasa yaitu  yang menyatukan Tablet PC dengan netbook yang menyatukan dua gadget sekaligus yang sangat mudah di bawa kemanapun sangat cocok untuk semua kalangan dan pekerjaan
 </div>
</div>
<div class="carousel-feature">
<a href="http://blog-rangga.blogspot.com/2013/02/cara-memasang-readmore-otomatis-dengan.html">
<img alt="Image Caption" class="carousel-image" src="http://2.bp.blogspot.com/-i-EfRR8rUuo/UUYF-P3L26I/AAAAAAAAFo0/Ny2L-kDdB18/s1600/Blog+Rangga.jpg" /></a>
<br />
<div class="carousel-caption">
blog rangga
Cara Membuat Readmore Otomatis Pada Blog Dengan Teks pernah saya bagikan di blog sebelum nya dan kali ini masih tutorial yang sama yaitu Cara Memasang
</div>
</div>
<div class="carousel-feature">
<a href="http://blog-rangga.blogspot.com/2013/02/download-gratis-skin-dan-aimp-terbaru.html">
<img alt="Image Caption" class="carousel-image" src="http://3.bp.blogspot.com/-9D6oWeDW6PA/UUYHvg8AsKI/AAAAAAAAFo8/2yYkcr4LdeI/s1600/Blog+Rangga.jpg" /></a>
<br />
<div class="carousel-caption">
Aplikasi Audio Player yang satu ini memang tidak di ragukan lagi kualitas nya , selain hadir dengan berbagai macam tampilan nya yang menarik AIMP juga menghasilkan suara yang
</div>
</div>
<div class="carousel-feature">
<a href="http://blog-rangga.blogspot.com/2013/02/cara-memasang-widget-back-top-icon.html">
<img alt="Image Caption" class="carousel-image" src="http://1.bp.blogspot.com/-SI4cF5w7Pn0/UUYKya77MzI/AAAAAAAAFpI/D9EQMtfJD1k/s1600/Blog+Rangga.jpg" /></a>
<br />
<div class="carousel-caption">
Widget ini berguna untuk mempercepat kembali ke halaman bahagian atas dengan hanya mengklik icon Back Top , Cara Memasang Widget Back Top Icon Animasi Pada Blog ini
</div>
</div>
<div class="carousel-feature">
<a href="http://blog-rangga.blogspot.com/2013/01/cara-memasang-kamera-cctv-di-blog.html">
<img alt="Image Caption" class="carousel-image" src="http://3.bp.blogspot.com/-2crKs_fKEa4/UUYNty3ImWI/AAAAAAAAFpU/P6KysUoQpPI/s1600/Blog+Rangga+copy.jpg" /></a>
<br />
<div class="carousel-caption">
Kamera CCTV di gunakan untuk memantau setiap kegiatan di suatu tempat seperti di Mall , Toko , Rumah Dll supaya aman dan bisa melihat dengan detail semua kejadian yang telah di
</div>
</div>
</div>
<div id="carousel-left">
<img src="https://github.com/bkosborne/jQuery-Feature-Carousel/raw/master/images/arrow-left.png" /></div>
<div id="carousel-right">
<img src="https://github.com/bkosborne/jQuery-Feature-Carousel/raw/master/images/arrow-right.png" /></div>
</div>
9. Klik simpan untuk melihat hasil nya di blog

Keterangan :
  • Kode yang di tandai warna merah adalah kode URL gambar
  • Kode yang di tandai warna merah adalah Link tautan gambar
  • Kode yang di tandai warna kuning adalah deskripsi atau judul gambar
Semoga artikel ini bermanfaat dan selamat berexperiment ........


Klik tombol berbagi :

14 komentar:

Anonim mengatakan...

For the reason that the admin of this site is working, no question very quickly it will be famous, due to its feature contents.


my website: get more facebook likes

Fian Walk mengatakan...

tipsx keren mas, kunjungan balik ya
http://www.fianetmu.com/

hengki saelah mengatakan...

terima kasih gan , atas kunjungan dan komentar nya , ok gan ...

Blogger Batak mengatakan...

Kalo membuat berita foto/gambar pake navigasi caranya gimana sob?

Blogger Template mengatakan...

Hmm... saya coba dulu sob.. kyknya menarik deh

hengki saelah mengatakan...

Silahkan di coba gan dan terima kasih atas komentar dan kunjungan nya...

sigit septianto mengatakan...

cara mendapatkan url gambarnya gimana sob

hengki saelah mengatakan...

Buka gambar nya di tab baru lalu copy code di tool bar nya dan pastekan atau gantikan code yang sudah di tandai dengan warna merah di atas mas.....

elhaq mengatakan...

top

Sinar Terang mengatakan...

Gan, gambarnya sih berhasil di slide, tp kok deskripsinya kagak nampil ya????
mohon bimbingannya reply ke sintec663@gmail.com makasih..

Vandra Septian mengatakan...

gANTI BG nya biar gak abu abu gimana gan

Edi Muslim mengatakan...

Kode yang di tandai warna merah adalah kode URL gambar
Kode yang di tandai warna merah adalah Link tautan gambar
maksudnya.... warna merahnya cuma satu mas

shakeitoffshoes mengatakan...

langsung praktek, mantep poolll

Dagul Blog mengatakan...

sblmnya mksi sob.. sy uda coba kok gk brpungsi ya ? mhon pncrhnnya sob .