[Tutorial] Cara membuat SLIDE show terbaru pada blog dengan mudah

-[Tutorial] Cara membuat SLIDE show terbaru pada blog dengan mudah

Salam sukses sobat blogger...
Bagaimana neh kabarnya?

Ingin menambahkan slide show pada blog nya?? Tetapi bingung caranya?
Kebetulan pada kesempatan kali ini, ana ingin berbagi mengenai [Tutorial] Cara membuat SLIDE show terbaru pada blog dengan mudah, Fitur terbaru dari SLIDE show ini tidak hanya dapat menampilkan gambar tetapi juga memberikan efek Carousel atau berputar. Nah... dengan itu dapat menarik pengunjung untuk membaca artikel ataupun berita terbaru yang dipostingkan.

Tidak hanya itu juga sobat, slide show terbaru ini juga dilengkapi dengan description atau cuplikan informasi singkat untuk menerangkan postingan atau artikel yang sobat posting. Sehingga slide show terbaru ini bagus dipasang di web atau blog kita untuk menampilkan artikel terbaru sebagai sarana update web atau blog kita.


Tertarik untuk membuatnya? ikuti langkah-langkah [Tutorial] Cara membuat SLIDE show terbaru pada blog dengan mudah :

1. Seperti biasa, Login terlebih dahulu ke blogger dengan ID sobat.

2. Klik Template

3. Dan kemudian klik Edit HTML => Lanjutkan

Catatan :

- Lebih baik back-up terlebih dahulu Template sobat, Tidak tahu cara mem-backup template? Lihat  [Tutorial] Cara mengganti dan menyimpan TEMPLATE pada tampilan baru Blogger

-Jangan lupa untuk mencentang Expand Template Widget

4. Cari kode </head> pada template sobat.
(Untuk memudah pencarian, gunakan CTRL+F pada keyboard)

5. Setelah menemukan kode  </head>,  kemudian Copy kode dibawah ini dan pastekan kode tersebut diatas atau 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>

6.. Setelah itu SIMPAN TEMPLATE,


Langkah selanjutnya adalah menampilkan Slide show ini pada halaman depan dengan cara :

7. Kembali pada menu blogger, kemudian pilih menu TATA LETAK dan pilih TAMBAH Gadget

8. Pada jendela baru, sobat  pilih gadget HTML/JavaScript

9. Copy dan pastekan  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 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>

Catatan :

-ULR ARTIKEL : Ganti dengan URL artikel milik sobat.
-ULR GAMBAR : Ganti dengan ULR gambar artikel milik sobat.
- DESCRIPTION GAMBAR : Ganti dengan deskripsi artikel milik sobat.

10. klik Pratinjau terlebih dahulu, Jika sudah tidak ada lagi pesan error baru klik SIMPAN.



Demikian [Tutorial] Cara membuat SLIDE show terbaru pada blog dengan mudah,
Selamat mencoba dan Semoga bermanfaat....
Special Thanks : http://www.carabuatwebgratis.com/
Jika terdapat kesalahan dalam postingan ini, mohon diberitahu kepada kami dengan berkomentar pada blog ini.
Salam sukses...

Share this

Author : Salman Syuhada

Related Posts