Cara buat slide show Carousel

Nah bila anda berminat memasang slide show Carousel ini, silahkan anda bisa ikuti langkah - langkah berikut :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.

4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"

6. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

7. Copy kode di bawah ini dan taruh 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>

8. SIMPAN TEMPLATE.

Langkah selanjutnya anda tinggal menampilkan slide show ini pada halaman depan. Silahkan anda ikuti langkah - langkah berikut :

1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget

3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript

4. Copy dan paste kode dibawah ini pada gadget tersebut :

<div id="carousel-container">
   
<div id="carousel">

<div class="carousel-feature">
<a href="ULR ARTIKEL">
<img class="carousel-image" alt="Image Caption" src="ULR GAMBAR"></a>
<div class="carousel-caption">
<p>DESCRIPTION GAMBAR
 </p>
</div>
</div>

<div class="carousel-feature">
<a href="ULR ARTIKEL">
<img class="carousel-image" alt="Image Caption" src="ULR GAMBAR"></a>
<div class="carousel-caption">
<p>DESCRIPTION GAMBAR
</p>
</div>
</div>

<div class="carousel-feature">
<a href="ULR ARTIKEL">
<img class="carousel-image" alt="Image Caption" src="ULR GAMBAR"></a>
<div class="carousel-caption">
<p>DESCRIPTION GAMBAR
</p>
</div>
</div>

<div class="carousel-feature">
<a href="ULR ARTIKEL">
<img class="carousel-image" alt="Image Caption" src="ULR GAMBAR"></a>
<div class="carousel-caption">
<p>DESCRIPTION GAMBAR
</p>
</div>
</div>

<div class="carousel-feature">
 <a href="ULR ARTIKEL">
<img class="carousel-image" alt="Image Caption" src="ULR GAMBAR"></a>
<div class="carousel-caption">
<p>DESCRIPTION GAMBAR
</p>
</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>

Catatam :

• Silahkan anda ganti tulisan yang berwarna MERAH, BIRU, dan PINK dengan milik anda.

5. SIMPAN.

 

 

 

 

Selamat mencoba .