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/AVvXsEgZWnOm_QVP7_ajnUiv0mv5dSD0IH_foEVlPNLLRxyLhF46jtlxCJ6ZC_i_BJcD8LUFupqgKYDtjW5csCIFejsVmJ-yyRIIH2-m3Gf3xe3Fa8r0CJvtgU8QQL1X3UwEscdaDuTs6d_HIBdR/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/AVvXsEifed60wtzPjdrWaf0UBRHE2gRtDiKaRuuwRUH3htJ0Kyt2P3BB6UpfWOIJgsNSdDRI4oGyXxzZ2QWo8TDlghqUXvI_hRXeeET2fxcMDpyBGE-LZQbSfGtuZ4IWTcOw6bKtYylM2PAnvbQm/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/AVvXsEjP0CyvCNe0GuCemTwCIXpSFxT3cXWTgMXPWpDWaPJWlI5JP-384-b6Id44ozSr0nXnCO2nsKnFs7wUg43oliijvzn02uEggst90cAOsYEl5okSv5GXIFsSSt9lmC4MZ1UokZ4ExlTs-BRK/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/AVvXsEjmzrIqn7Cpfq0bk8yLMEfGIyLvQOlpkQ87Ao9sSOazatjstBvr7oG5np1wsxkGWK83ZhVtHyTqQv3wijyltuFhma7pNamSnszHneIv9iHeq88sDcfh7SiCG4THkNpyHnTZTcIGoHKKQqEe/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/AVvXsEictUX02gIEFUirmsmOklTtjb56gf1Y1cWu2f20xeItHrKW_eP0Ev39gV9KMA0xN1-DEOcUQa45Wx5y1J_mtJFQXsRh4ZBHVDAOzV3v8mH11Wiysa-0ULepNL3VKHnWkXQuGv2ctqDm2QMS/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
{ 0 komentar... Views All / Send Comment! }
Posting Komentar