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