Nivo Slider - jQuery Image Slider Untuk Blogger

Hari ini saya berbagi mengagumkan, slider gambar indah lain untuk blog Blogger / BlogSpot. Hal ini dibuat dengan jQuery. dan tentu saja HTML dan CSS tetapi keangkeran utama, efek geser dibuat dengan jQuery. Slider Gambar ini dibuat oleh dev7studios.com/nivo-slider/. Mereka melakukan benar-benar pekerjaan yang besar. Slider ini telah diunduh lebih dari 20,00000 kali dari situs mereka. Saya telah membuat versi bloggerized slider. Lihat demo di bawah ini.

• DEMO
• DOWNLOAD

Mari Langkah ke depan untuk menambahkan ini jQuery Image Slider ke Blogger

1 Pergi ke Blogger Dashboard> Tata Letak> Tambah Gadget
2 Pilih HTML / Javascript
3 Copy kode di bawah dan paste di atasnya.

<style type="text/css"/> /* dimpost.com - Basic Style */ body{ background: transparent; font:15px/2 'Adobe Caslon Pro', Georgia, Serif; margin:0; padding:0; } a{outline:0 none} #pagewrap{ margin:10px auto; padding:0; position:relative; height:400px; width: 640px; } #slidewrap{position:absolute;} #slider { border-color: #c0c0c0; border-radius: 5px 5px 5px 5px; border-style: solid; border-width: 10px 10px 30px; box-shadow: 0 0 3px #2F2F2F; height: 280px; margin: 10px; position: relative; width: 600px; } #slider images{ position:absolute; top:0px; left:0px; display:none; } /* The Nivo Slider styles */ .nivoSlider { position:relative; } .nivoSlider images { 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; } .nivo-directionNav{display:none!important} .nivo-html-caption { display:none; } .nivo-caption{ position:absolute; right:20px; text-align:center; top:130px; width:192px; z-index:60; } .nivo-caption p{margin:0} .nivo-caption .title{font-style:italic} .nivo-controlNav { bottom: -23px; display: block; height: 15px; left: 204px; position: absolute; text-align: center; width: 192px; z-index: 51; opacity: 0.6; } .nivo-controlNav a{ background:transparent url(http://project.dimpost.com/image-slider/images/button.png) no-repeat center center; display:inline-block; height:14px; width:14px; text-indent:-9999px; cursor:pointer; } .nivo-controlNav .active{ background:transparent url(http://project.dimpost.com/image-slider/images/button_active.png); } </style> <script src="http://project.dimpost.com/image-slider/jquery-1.6.1.min.js" type="text/javascript"></script> <script src="http://project.dimpost.com/image-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script> <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider(); }); </script> <!--[if IE]> <script src="modernizr-2.0.min.js"></script> <![endif]--> <div id="pagewrap"> <div id="slidewrap"> <div id="slider"> <a href=" http://dimpost.com/ " target="_blank"><img alt="" title="#caption1" src=" http://project.dimpost.com/image-slider/images/sample0.jpg " /></a> <a href=" # " target="_blank"><img alt="" title="#caption2" src=" http://project.dimpost.com/image-slider/images/sample1.jpg " /></a> <a href=" # " target="_blank"><img alt="" title="#caption3" src=" http://project.dimpost.com/image-slider/images/sample2.jpg " /></a> <a href=" # " target="_blank"><img alt="" title="#caption4" src=" http://project.dimpost.com/image-slider/images/sample3.jpg " /></a> <a href=" # " target="_blank"><img alt="" title="#caption5" src=" http://project.dimpost.com/image-slider/images/sample4.jpg " /></a> <a href=" # " target="_blank"><img alt="" title="#caption6" src=" http://project.dimpost.com/image-slider/images/sample5.jpg " /></a> </div> </div> </div> 

4. Ubah link berwarna merah dengan Anda. dan gambar berwarna biru link dengan gambar Anda.