Cara Membuat Slide Gambar Di Blog Dengan jQuery

Salam hangat semuanya,jumpa lagi bareng hansmjlkcommunity,pada kesempatan ini saya akan coba buat artikel membuat slide indah pada blog sobat,memang kebanyakan slider yang di sediakan oleh template bawaan identik berjalan secara monoton tanpa ada modifikasinya,kini saatnya saya berikan tutorialnya buat sobat yang senang memasang slider pada blog dengan tampilannya lumayan indah karena di barengi dengan efek jQuery yang membuat lebih kelihatan dinamis.

Demo

Bagi sobat yang ingin mencobanya silahkan ikuti tutorialnya di bawah ini.

1. Seperti biasa login dulu sob.

2. Pilih menu Tata letak > Add Gadget > HTML/Javascript.

3. Pastekan kode di bawah ini.(bisa juga sobat letakan dalam postingan pada bagian HTML)

<style>
#slider {
  position:absolute !important;
  top:50%;
  left:50%;
  width:650px;
  height:350px;
  margin-top:-175px;
  margin-left:-325px;
  -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2);
  -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2);
  box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2);
 }
  
 .nivoSlider img {
  position:absolute;
  top:0;
  left:0;
  display:none;
 }
  
 .nivoSlider a {
  border:0;
  display:block;
 }
  
 .nivo-slice {
  display:block;
  position:absolute;
  z-index:5;
  height:100%;
 }
  
 .nivo-box {
  display:block;
  position:absolute;
  z-index:5;
 }
  
 .nivo-caption {
  position:absolute;
  left:75px;
  bottom:29px;
  width:498px;
  padding-top:13px;
  padding-bottom:13px;
  z-index:8;
  border:1px solid #000;
  border-left-color:rgba(0,0,0,.5);
  border-right-color:rgba(0,0,0,.5);
  -webkit-box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7);
  -moz-box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7);
  box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7);
  background: -webkit-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  background: -moz-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  background: -o-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  background: -ms-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  background: linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e648494c', endColorstr='#e6262728',GradientType=0 );
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
 }
  
 .nivo-caption p {
  margin:0;
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size:14px;
  font-weight:bold;
  color:#fff;
  text-align:center;
  text-shadow:0px -1px 0px #000;
 }
  
 .nivo-caption a {
  display:inline !important;
  }
  
 .nivo-html-caption {
  display:none;
 }
  
 .nivo-directionNav a {
  position:absolute;
  bottom:30px;
  z-index:9;
  cursor:pointer;
  text-indent:-9999px;
  width:45px;
  height:39px;
  background-image:url(http://4.bp.blogspot.com/-nVH_wLuXb7c/UB62lKkUv1I/AAAAAAAABVM/_FjJIm1wIrM/s1600/
labstrike-arrows.png);
  background-repeat:no-repeat;
}
  
 .nivo-prevNav {
  left:75px;
  background-position:0 0;
  box-shadow: 1px 0px 0px rgba(255,255,255,.2), 2px 0px 0px rgba(0,0,0,.4);
 }
  
 .nivo-nextNav {
  right:77px;
  background-position:-45px 0px;
  box-shadow: -1px 0px 0px rgba(255,255,255,.2), -2px 0px 0px rgba(0,0,0,.4);
 }
  
</style>  
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/
jquery.min.js"></script>
<script src="http://www.code.helperblogger.com/jquery.nivo.
slider.js"></script>
<script type="text/javascript">
    $(window).load(function () {
        $('.nivoSlider').nivoSlider({
            effect: 'sliceDown',
            directionNavHide: false,
            captionOpacity: 1,
            controlNav: false
        });
    });
</script>
  
<div id="slider" class="nivoSlider">
    <img src="http://1.bp.blogspot.com/-21F_RkIo-DM/UB6wSDoVrtI/AAAAAAAABUc/zlWeqKG5XnA/s1600/labstrike-image1.png"
    alt="Slider Image 1" title="This Is An Example Of A Caption">
    <img src="http://2.bp.blogspot.com/-9vn5zCDd06Q/UB6weSSfN4I/
AAAAAAAABUk/jz9jB35Ejh4/s1600/labstrike-image2.png"
    alt="Slider Image 2" title="You Can Add  Anything Here">
    <img src="http://1.bp.blogspot.com/-W2bnzOGjGow/UB6wnRIq24I/AAAAAAAABUs/KehuTNwZcrQ/s1600/
labstrike-image3.png"
    alt="Slider Image 2" title="Like Image Description">
    <img src="http://2.bp.blogspot.com/-bpA0v0ayP4o/UB6wyezZ1XI/AAAAAAAABU0/i6u4Ci-JeY8/s1600/
labstrike-image4.png"
    alt="Slider Image 2" title="Your image Information">
    <img src="http://1.bp.blogspot.com/-m2os5MJOs8s/UB6w-NofxeI/AAAAAAAABU8/E2tMD9nLKYY/s1600/labstrike-image5.png"
    alt="Slider Image 2" title="Other opinion">
</div>

Keterangan :
* untuk tulisan yang berwarna merah menunjukan tinggi dan lebar,silahkan atur sendiri sesuai
   selera sobat.
* untuk tulisan yang berwarna hijau menunjukan URL image,silahkan sobat ganti dengan URL
   sobat.
* untuk tulisan yang berwarna pink menunjukan nama slider,silahkan sobat ganti sesuai selera.


Demikian tutorial kali ini tentang cara Membuat Slid Indah Di Blog Dengan jQuery semoga bermanpaat.