using effects Spinning carousel

Adding yet another collection of slide show, and this slide using effects
Spinning like a carousel or merry-go-round. in addition serves to
display an image, slide show also features a description Carousel
or pieces of information that a brief description of the image
displayed. Not only that, Carousel slide show is very good when
posted on our website or blog to display the latest news articles or, in other words, this Carousel slide show we created as a means of updating our website or blog.



  •  Login to blogger with your ID.
  • Click the design.
  •  Dan KLik tab Edit HTML. 
Find the following code or similar to this code:

  • Copy the code below and put it before the code
<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>





  •  SAVE TEMPLATE
The next step:

  •   Click the draft and select Page Elements
  •  Add a Gadget
  •  Select the gadget HTML / JavaScript
Copy and paste the following code in the gadget:


<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>

  • SAVE and see the results
Click to see example

Label: