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 :
<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
Keterangan :
Acer kembali meluncurkan produk baru nya yang sangat luar biasa yaitu yang menyatukan Tablet PC dengan netbook
blog rangga
Cara Membuat Readmore Otomatis Pada Blog Dengan Teks pernah saya bagikan di blog sebelum nya
Aplikasi Audio Player yang satu ini memang tidak di ragukan lagi kualitas nya , selain hadir dengan berbagai macam tampilan
Widget ini berguna untuk mempercepat kembali ke halaman bahagian atas dengan hanya mengklik icon Back Top
Kamera CCTV di gunakan untuk memantau setiap kegiatan di suatu tempat seperti di Mall , Toko , Rumah Dll supaya
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 :
- Login dulu ke blogger.
- Pilih Template di dasbor blog.
- Pilih Edit HTML
- Centang dulu Expand Template Widget.
- cari kode </head> gunakan Ctrl+F untuk memudahkan pencarian kode
- Pasang kode di bawah ini sebelum kode </head>
<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">9. Klik simpan untuk melihat hasil nya di blog
<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG4ubPorw_zXx83S6PCRGgikiPjhAa85FW6nV2JrI8eou34Xz5Z14trUgVK13jI_iw0BfDjw1K7jTKp-kOYVI05N_zvQ7JeFsIW0_CNANogQaegH7R5HNkATVJW1fOoFDsD3N0bTFRKTwV/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVh4j77lnbF5ekE7-fK60MYGAFRGmQEK56OM8j6l4jI-KzkcSv9bARFcIxabU2wlAF7373sA4xTJ-5rPXHbIdDHYni1ilLZSGw7DcU3cjHWx9c51lm9f7fOh6nSG0K8t2ImY5iMYSCLULu/s1600/Blog+Rangga.jpg" /></a>
<br />
<div class="carousel-caption">
blog ranggaCara 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKcCGyKsW5POJT5lUUM8TNtZEU5FPRjfMpntbTvi0MY8SLPOqOzwpvgm2HO0QLjS6GEZs3mrTQ5Q0MYlza8WJLKy5UbEkHQMJn7TaibTPwcDylYh-7kZWRzGIEDdF2zUEM9YeX6lsiC2Il/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7mDBCnFD2WZgC6ovHMs_srNCSx_1_NM7W6DyV3DTkiZE8tNy7YShz4aaopeG2L36oXB0SkmHBtavGwUEg3T8wIbPDs0XExvKWCB3ZpGa3hNvoAAXo8nKDjycmOyR2LAccm1X6LGORB9Oj/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggd_py-saUYkJ_VNNj0fCBKcypTkPcc6eh0Y-R-h9OWoc9TsOKdpsdTOZzwAnSzUCK1JTntogXMCM48LTR14e65Tj8wZTldQ-OWrvZltla5eIsP6-ebgeZ_BO5FFV2kvaNSwlriA97eMv8/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>
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
16 komentar:
-
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 -
20 Maret 2013 pukul 07.22
-
tipsx keren mas, kunjungan balik ya
http://www.fianetmu.com/ -
23 Maret 2013 pukul 02.34
-
terima kasih gan , atas kunjungan dan komentar nya , ok gan ...
-
24 Maret 2013 pukul 06.05
-
Kalo membuat berita foto/gambar pake navigasi caranya gimana sob?
-
8 April 2013 pukul 17.23
-
Hmm... saya coba dulu sob.. kyknya menarik deh
-
21 April 2013 pukul 04.44
-
Silahkan di coba gan dan terima kasih atas komentar dan kunjungan nya...
-
21 April 2013 pukul 05.57
-
cara mendapatkan url gambarnya gimana sob
-
23 April 2013 pukul 19.26
-
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.....
-
24 April 2013 pukul 09.12
-
top
-
19 Juli 2013 pukul 00.47
-
Gan, gambarnya sih berhasil di slide, tp kok deskripsinya kagak nampil ya????
mohon bimbingannya reply ke sintec663@gmail.com makasih.. -
21 Juli 2013 pukul 14.59
-
gANTI BG nya biar gak abu abu gimana gan
-
27 Januari 2014 pukul 02.16
-
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 -
19 Maret 2014 pukul 18.21
-
langsung praktek, mantep poolll
-
24 Mei 2014 pukul 23.39
-
sblmnya mksi sob.. sy uda coba kok gk brpungsi ya ? mhon pncrhnnya sob .
-
11 Agustus 2015 pukul 09.55
-
script ini bisa berfungsi di template tertentu
-
10 Maret 2017 pukul 10.19
-
gak ada demonya gan?
-
1 Agustus 2020 pukul 00.44
Langganan:
Posting Komentar (Atom)