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


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


COMMENTS

BLOGGER: 6
Loading...

Nama

Artikel,66,Cerita singkat,82,Java,12,SEO,15,Tahukah sobat??,21,Tips dan Trik,15,Tips.....n' Trick.....,14,Tutorial,20,Tutorial Blogger,50,
ltr
item
Blog Salman Syuhada: [Tutorial] Cara membuat SLIDE show terbaru pada blog dengan mudah
[Tutorial] Cara membuat SLIDE show terbaru pada blog dengan mudah
+img[0].src+
http://2.bp.blogspot.com/-mNPyajGYT9U/UDX7nOI0THI/AAAAAAAACbY/ybX2BAeXfB4/s72-c/slide+show.jpg
Blog Salman Syuhada
http://blog.salmansyuhada.com/2012/08/tutorial-cara-membuat-slide-show.html
http://blog.salmansyuhada.com/
http://blog.salmansyuhada.com/
http://blog.salmansyuhada.com/2012/08/tutorial-cara-membuat-slide-show.html
true
5369818979434965955
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy