2012-09-25

Auto Slide Show dengan Nivo Slider



Auto Slide Show dengan Nivo Slider untuk blogger, Widget slide show image ini akan secara otomatis menampilkan gambar yang dipanggil dari postingan di blog kamu, slideshow ini lebih tidak membosankan dibanding dengan slideshow manual memasukkan URL satu persatu dan selain itu akan terlihat membosankan karena tampilan yang monoton atau itu-itu saja.
 Tetapi dengan Auto Slide Show menggunakan Nivo Slider blog akan terlihat jadi lebih kelihatan lebih hidup karena slide show akan secara otomatis terus berganti dari setiap posting yang ada di blog dengan sendirinya. Trik Auto Slide Show dengan Nivo Slider ini diterapkan oleh Abu Farhan yang memiliki blog disini.



Cara menerapkan Auto Slide dengan nivo slider dibawah ini, atau auto slider lainnya yang pernah saya posting ada disini.

1. Masuk ke blogger, silahkan pilih blog mana yang akan dikasih Slide
2. Lihat navigasi kiri klik "Template"
3. Klik Edit HTML
4. Lalu klik lanjutkan
5. Letakkan kode berikut tepat diatas ]]></b:skin>

/* START
--------------------------------------------------------------------
 Automatic Content Slider for Blogger using Nivo Slider
 By http://www.abu-farhan.com
--------------------------------------------------------------------
 Nivo Slider
*/
/*-----START Default Theme ----------------------------------------*/
.theme-default .nivoSlider {
 position:relative;
 background:#fff url(http://i1133.photobucket.com/albums/m596/abu-farhan/nivo-slider/default/loading.gif) no-repeat 50% 50%;
 -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
 -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
 box-shadow: 0px 1px 5px 0px #4a4a4a;
}
.theme-default .nivoSlider img {
 position:absolute;top:0px;left:0px;display:none;
}
.theme-default .nivoSlider a {
 border:0;display:block;
}
.theme-default .nivo-controlNav {
 position:absolute;left:50%;bottom:-42px;
 margin-left:-40px; /* Tweak this to center bullets */
}
.theme-default .nivo-controlNav a {
 display:block;width:22px;height:22px;
 background:url(http://i1133.photobucket.com/albums/m596/abu-farhan/nivo-slider/default/bullets.png) no-repeat;
 text-indent:-9999px;border:0;margin-right:3px;float:left;
}
.theme-default .nivo-controlNav a.active {
 background-position:0 -22px;
}
.theme-default .nivo-directionNav a {
 display:block;width:30px;height:30px;
 background:url(http://i1133.photobucket.com/albums/m596/abu-farhan/nivo-slider/default/arrows.png) no-repeat;
 text-indent:-9999px;border:0;
}
.theme-default a.nivo-nextNav {
 background-position:-30px 0;right:15px;
}
.theme-default a.nivo-prevNav {
 left:15px;
}
.theme-default .nivo-caption {
 font-family: Helvetica, Arial, sans-serif;
}
.theme-default .nivo-caption a {
 color:#fff;
 border-bottom:1px dotted #fff;
}
.theme-default .nivo-caption a:hover {
 color:#fff;
}
/*----- END Default Theme ----------------------------------------*/
/* The Nivo Slider styles */
.nivoSlider {
 position:relative;
}
.nivoSlider img {
 position:absolute;top:0px;left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
 position:absolute;top:0px;left:0px;width:100%;height:100%;border:0;
 padding:0;margin:0;z-index:6;display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
 display:block;
 position:absolute;
 z-index:5;
 height:100%;
}
.nivo-box {
 display:block;
 position:absolute;
 z-index:5;
}
/* Caption styles */
.nivo-caption {
 position:absolute;
 left:0px;
 bottom:0px;
 background:#000;
 color:#fff;
 opacity:0.8; /* Overridden by captionOpacity setting */
 width:100%;
 z-index:8;
}
.nivo-caption p {
 padding:5px;
 margin:0;
}
.nivo-caption a {
 display:inline !important;
}
.nivo-html-caption {
 display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
 position:absolute;
 top:45%;
 z-index:9;
 cursor:pointer;
}
.nivo-prevNav {
 left:0px;
}
.nivo-nextNav {
 right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
 position:relative;
 z-index:9;
 cursor:pointer;
}
.nivo-controlNav a.active {
 font-weight:bold;
}
.theme-default #slider {
 margin:100px auto 50px auto;
 width:618px; /* Jika dirubah samakan dengan ukuran bawah langkah 9  */
 height:246px; /* Ini juga harus sama dengan langkah 9 */
}
.theme-pascal.slider-wrapper,
.theme-orman.slider-wrapper {
 margin-top:150px;
}
.clear {
 clear:both;
}
/* END
--------------------------------------------------------------------
 Automatic Content Slider for Blogger using Nivo Slider
 By http://www.abu-farhan.com
--------------------------------------------------------------------
 Nivo Slider
*/

6. Letakkan kode dibawah ini tepat diatas </body>


<!-- jQuery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
 <script src='http://catur-at-abu-farhan.googlecode.com/svn/trunk/nivo-slider-modified.min.js' type='text/javascript'/>
 <script type='text/javascript'>
 $(window).load(function() {
 $(&#39;#slider&#39;).nivoSlider();
 });
 </script>

7. Simpan template / Save Change

8. Klik Layout >> Add a Gadget >> pilih HTML/Javascript
9. Masukkan kode dibawah ini kedalam form gadget HTML/Javascript tadi

<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
 <script style="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-nivo-slider.js"></script>
<script style="text/javascript">
 var numposts_gal = 6;   //jumlah post yang tampil
 var image_height = 246; //lebar  gambar
 var image_width = 618;  //tinggi atau besar gambar
</script>
<script src="http://nama-blog-kamu.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>
</div>

9. Simpan Gadget.
10. Silahakan lihat slideshownya.

Perhatikan kode yang saya cetak merah, itu adalah yang harus disesuaikan dengan kepunyaan blog kamu sob. Selamat mencoba.

Dapatkan artikel terbaru seperti Auto Slide Show dengan Nivo Slider langsung ke Email kamu..!!!


Ada 11 komentar untuk Auto Slide Show dengan Nivo Slider

  1. mas kenapa yah aku blog aku gak bisa buka edit HTML http://mencintaisederhana.blogspot.com/b/app-preview?token=gGCo7zkBAAA.PObDDP1rg4ZN32PIlabNJw.lHEmo4nJb0s0VyJdSFeLFA

    BalasHapus
    Balasan
    1. Pilih dan klik blog yang dimaksud >> Klik Template >> Edit HTML >> Lanjutkan.

      Klw gx eror cb logout trus login lagi dan ulangi dari awal, coz tampilan baru mmang msh sering error.

      Hapus
    2. udah,,,,tapi tetep gak bisa, cuma layar putih polosdilayar monitornya

      Hapus
    3. bangg napa post yg puncul cuma 1 padahal di scrip uda gw tulis 7..

      Hapus
  2. Mantef banget nih bang izin ya bang mau disedot..hahhayy

    BalasHapus
  3. bangg ko post yg muncul di nivo nya cuma 1 .. padahal yg gw tulis di scrip itu 7 // ?? tolong di balas yaa

    BalasHapus
    Balasan
    1. Mungkin postingnya baru ada 1, coba cek postingnya sudah ada brp?

      Hapus
  4. Gan, nanya klo nivo slidernya cuma tampil di homepage aja caranya gmn? cara menggeser ke atas gmn yuah? thanx you

    BalasHapus
    Balasan
    1. Cb baca disini : http://u-sup.blogspot.com/2010/11/menyembunyikan-widget-tertentu-pada.html

      Hapus
    2. oke gan udah bisa. tapi kok tiba2 muncul http://catur-at-abu-farhan.googlecode.com. Situs berkata: "Google Code Subversion Repository" gmn mengatasinya??? dan nivo slider gak keliatan..

      Hapus
    3. Ada yang error dengan JS dibawah ini,,,,,nnti aq ganti pake JS punyaku.
      http://catur-at-abu-farhan.googlecode.com/svn/trunk/nivo-slider-modified.min.js

      http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-nivo-slider.js

      Hapus