Nivo Slider, Slider Blogger Keren

      Banyak sebagian blog dari Indonesia menggunakan fitur ini, fitur slider untuk blogger. Fitur ini berguna untuk menampilkan artikel populer atau artikel terbaru dengan gambar yang menarik agar pengunjung melihat artikel yang di tampilkan dalam slider.  Selain memudahkan pengunjung untuk mencari tahu artikel apa yang harus dia lihat juga berfungsi sebagai keindahan blog.  Jadi jangan asal-asal pilih dan ambil slider dari blog tutorial, jangan asal ada slider di blog, udah deh!  Lihat dulu tampilan itu cocok atau enggak untuk blog kalian, kalo cocok langsung ikuti langkah-langkah yang di terapkan ^^

       Nah.. bagi kalian yang ingin cari slider untuk blog kalian jangan cari jauh jauh dari blog ini, di artikel ini aku juga akan membagi slider yang cocok untuk semua tampilan blog yang ada.  Slider yang simple, keren dan enak di pandang mata.  Berikut screenshot slider yang ingin aku bagi untuk kalian semua..

    Gimana ? Tertarik mencoba slider yang keren dan kece ini ?  Langsung aja ikuti langkah berikut ^^

• Login Blogger > Design > Edit HTML
  
• Salin kode berikut di atas kode </b:skin>
  
  
  /*
  * jQuery Nivo Slider v2.5.1
  * http://nivo.dev7studios.com
  *
  * Copyright 2011, Gilbert Pellegrom
  * Free to use and abuse under the MIT license.
  * http://www.opensource.org/licenses/mit-license.php
  * Editor
  * http://dopind.blogspot.com/2012/07/nivo-slider-slider-blogger-keren.html
  *
  * March 2010
  */
  
  #slider-wrapper {
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZidsiQI30ISIutx2id8esvqWC3-DLRsm0quuxreDNkQ5KXzfgBgKCBO6il9RY_iOUhyr_P-qbYoQ6SyTP72qnueymH5LhWkkzfGDhOOpN7MXyMnRS3FlmuU612Ovt3m1c-X8AgMuUdVU/s1600/slider.png) no-repeat;
  width:998px;
  height:392px;
  margin:0 auto;
  padding-top:74px;
  margin-top:50px;
  }
  #slider {
  position:relative;
  width:618px;
  height:246px;
  margin-left:190px;
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYp3pTbx0CWz2hMTFoo2I69g4xG-15YlwjqRh57jfSvttsBU2DURxDvflkPYsgo1SEhtPTUcX_FrN99fHl0cTluagrOQ-7xPCFf56JUcUDo2eOLgkGzlykNZDqGd-Yx3PEEM8G2uVt_AY/s1600/loading.gif) no-repeat 50% 50%;
  }
  #slider img {
  position:absolute;
  top:0px;
  left:0px;
  display:none;
  }
  #slider a {
  border:0;
  display:block;
  }
  .nivo-controlNav {
  position:absolute;
  left:260px;
  bottom:-42px;
  }
  .nivo-controlNav a {
  display:block;
  width:22px;
  height:22px;
  background:url(ttp:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDQTXnvThXMYS9Q6FIq_d0tvrXe5vbhNxZk2M6bA_7IXgjEFrT88yqjU5oatUE1NaWfNTy2dTaBq-D1wCFlbR-Q_R05R4yDr2V4WkS8WjV83BbB5zIR8Y8vULHLRoDFfXKjchuldVfoLE/s1600/bullets.png) no-repeat;
  text-indent:-9999px;
  border:0;
  margin-right:3px;
  float:left;
  }
  .nivo-controlNav a.active {
  background-position:0 -22px;
  }
  .nivo-directionNav a {
  display:block;
  width:30px;
  height:30px;
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinw03UjfsAmKyegmCLBLOWMuglqa8CuPsyRwTj5Ytq3YCAolNYM71EC1ZrsX_xTQWNFqCQvRR5KuwjEvOvvfIwM-k8ETLblWbBOuieeNsOTXKzCZtRqwB6QFXUvMi2ZsPIM8cOMbzv0_0/s1600/arrows.png) no-repeat;
  text-indent:-9999px;
  border:0;
  }
  a.nivo-nextNav {
  background-position:-30px 0;
  right:15px;
  }
  a.nivo-prevNav {
  left:15px;
  }
  .nivo-caption {
  text-shadow:none;
  font-family: Helvetica, Arial, sans-serif;
  }
  .nivo-caption a {
  color:#efe9d1;
  text-decoration:underline;
  }
  /* 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;
  }
  .nivo-directionNav a {
  display:block;
  width:30px;
  height:30px;
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinw03UjfsAmKyegmCLBLOWMuglqa8CuPsyRwTj5Ytq3YCAolNYM71EC1ZrsX_xTQWNFqCQvRR5KuwjEvOvvfIwM-k8ETLblWbBOuieeNsOTXKzCZtRqwB6QFXUvMi2ZsPIM8cOMbzv0_0/s1600/arrows.png) no-repeat;
  text-indent:-9999px;
  border:0;
  }
  a.nivo-nextNav {
  background-position:-30px 0;
  right:15px;
  }
  a.nivo-prevNav {
  left:15px;
  }
  /* 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;
  }
  .nivo-controlNav a {
  display:block;
  width:22px;
  height:22px;
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDQTXnvThXMYS9Q6FIq_d0tvrXe5vbhNxZk2M6bA_7IXgjEFrT88yqjU5oatUE1NaWfNTy2dTaBq-D1wCFlbR-Q_R05R4yDr2V4WkS8WjV83BbB5zIR8Y8vULHLRoDFfXKjchuldVfoLE/s1600/bullets.png) no-repeat;
  text-indent:-9999px;
  border:0;
  margin-right:3px;
  float:left;
  }
  
  
• Salin kode berikut di atas kode </head>
  
  
  <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
  <script src='http://yourjavascript.com/1611641113/jquery.nivo.slider.pack.js' type='text/javascript'/>
  <script type='text/javascript'>
  $(window).load(function() {
  $(&#39;#slider&#39;).nivoSlider();
  });
  </script>
  
  
  
  
• Klik tombol 'Save Templates' , kemudian klik 'Page Elements' (letak gadget di atas postingan? pertama buat gadget lalu klik dan geser di atas 'posting blog')  > Add a Gadget > pilih HTML/JavaScript
  
  Salin kode berikut #ganti kode berwarna hijau dengan link gambar
  
  
  <div id="slider">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn1gjyrA73jOsZ2iU6kUe5hurUjs-m71__QERDpXMnZe0Orru6TIoztAHLucM1QD1wEoQV1WAX2oxpDxy-YTosmVi13VEez3J5HZOKhxR2gbc1G9R5iPan4eRz5kycJJrNN-8NnnSdWXU/s1600/toystory.jpg" alt="" />
  <a href="http://dev7studios.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF1ye700K7ZfgQ2tUXF-5jY0fYlZmowesQa3xCLKlvhWc53g9JTEIdca93MqgESkNwF0nkDhAI4e69RhyU-sa54Wr40Px6EFUrD10d9foP5W5o0voKfz9JdU28v3jOpvZwQJqiEU0-O08/s1600/up.jpg" alt="" title="#htmlcaption" /></a>
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdOzljkMtOLe2GisZ3byYZUq5Q6Vk-MMOlmLplelhl7S1WAKRl62VV8BV8oWLvKMovNvirXKH_r3VclijQMmNEKHabvLW6vUvbbHwlJxlkCGxh-yEvcqnm7_qmuVl9p9ggrZoL4tAeBjQ/s1600/walle.jpg" alt="" title="This is an example of a caption" />
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOfjV0VaPq6hPe_zQ8ZZfDmACowfWE1I1F5FXkGlHiZEsgFGHvRKrWYKKxhyphenhyphenZIPnVxEtaTwLK0mrRRH3uyBTMe0GqWlnfQsuEbne3lv5tB2xZr79BWXvDczCHmW4eQtWmdKVbkrbcvwWc/s1600/nemo.jpg" alt="" />
  </div>
  <div id="htmlcaption" class="nivo-html-caption">
  <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
  </div>
  
  
• Nikmati Nivo Slider, Slider Keren Blogger di blog kalian sendiri ^^

Sumber kode : bloggerbin.com/add-nivo-slider-in-bloggerblogspot/