March 24, 2013

How to Create a Slide Show Carousel


JHE software : How to Create a Slide Show Carousel. Maybe this is a slide show that I think is best. Because it uses the effect Carousel slide or spin like a whirligig. In addition to working to display an image, slide show Carousel also features a brief description or pieces of information that explains about the displayed image. Not only that, Carousel slide show is very nice when installed on our website or blog to view the latest news articles or, in other words Carousel slide show we created as a means to update our website or blog.

How to make it:

Well if you want to install this Carousel slide show, you can simply follow these steps:
1. Login to blogger with your ID.
2. Click the design.
3. And click Edit HTML.
4. Would that every edit Html, Download Full Template first (back-up template) template that is safe, when an error occurs.
5. Do not forget to click the "Expand Widget Templates".
6. Find the code below: </ head>
7. Copy the code below and put it before the </ 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. Save templte.

The next step you just display a slide show this on the front page. Please follow the steps:

1. Select add gaget on layout. Click HTML/Javascript.
Copy and paste the code below on the gadget itself:

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

<div class="carousel-feature">
<a href="UR
L ARTICLE">
<img class="carousel-image" alt="Image Caption" src="UR
L IMAGE"></a>
<div class="carousel-caption">
<p>IMAGE DESCRIPTION
 </p>
</div>
</div>

<div class="carousel-feature">
<a href="UR
L ARTICLE">
<img class="carousel-image" alt="Image Caption" src="UR
L IMAGE"></a>
<div class="carousel-caption">
<p>IMAGE DESCRIPTION
</p>
</div>
</div>

<div class="carousel-feature">
<a href="UR
L ARTICLE">
<img class="carousel-image" alt="Image Caption" src="UR
L IMAGE"></a>
<div class="carousel-caption">
<p>IMAGE DESCRIPTION
</p>
</div>
</div>

<div class="carousel-feature">
<a href="UR
L ARTICLE">
<img class="carousel-image" alt="Image Caption" src="UR
L IMAGE"></a>
<div class="carousel-caption">
<p>IMAGE DESCRIPTION
</p>
</div>
</div>

<div class="carousel-feature">
 <a href="UR
L ARTICLE">
<img class="carousel-image" alt="Image Caption" src="UR
L IMAGE"></a>
<div class="carousel-caption">
<p>

IMAGE DESCRIPTION</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>


     You may change the writing color RED, BLUE, and PINK with yours.

2. SAVE.

Good luck and hopefully useful. Do not forget to take the time to comment. Thank you. You can also subscribe to the latest articles from me, please use the subscribe button on the right of this page.

If there are articles that are not relevant or there are broken links, please notice through a comment. By including source link. Thank you.
By: Muhammad Zainudin

2 comments

November 15, 2012 at 7:56 PM

gk bkin berat??? komen back yaw

November 15, 2012 at 9:27 PM

biar g berat upload di google aja javascriptnya.

Post a Comment