[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

Related Posts

Previous
Next Post »

6 comments

Write comments
8 September 2012 03.40 delete

Semoga bermanfaat,
Jika artikel ini tidak berhasil ataupun tidak layak publikasi, Mohon diberitahu dengan mengomentari artikel ini. Terima kasih...

Reply
avatar
27 November 2012 01.04 delete

pasti keren banget ya slideshownya, saya pengen memasangnya juga di blog
terima kasih penjelasannya

Reply
avatar
27 November 2012 05.20 delete

@Jefry Silahkan dipasang, Selamat mencoba semoga sukses, jika ada kendala bisa langsung ditanyakan disini. :)

Reply
avatar
19 Mei 2013 01.04 delete

maaf mas,,ko ga muncul yaa,,padahal url udah diganti sama urt artikel,, terus url gambarnya juga sma udah di gamti,, tapi masi ga muncul,, knp ya mas?
http://mymedian.blogspot.com/

Reply
avatar

Berkomentar lah dengan yang sopan yang tidak mengandung unsur SARA, PORNOGRAFI, Dan TIDAK diperkenankan untuk PROMOSI selain Persetujuan dari ADMIN. Jika di lakukan, Maaf komentar akan DI HAPUS.

Untuk menggunakan Emoticon Komentar, Klik Emoticon yang akan di pasang. Akan muncul kode emoticonnya. Masukkan itu pada saat berkomentar. Terima Kasih
EmoticonEmoticon