Cara Membuat Nivo Slider Di Blog

Cara Membuat Nivo Slider Di Blog - Selamat datang di situs media global terbaru Xivanki, Pada halaman ini kami menyajikan informasi tentang Cara Membuat Nivo Slider Di Blog !! Semoga tulisan dengan kategori Slide !! ini bermanfaat bagi anda. Silahkan sebarluaskan postingan Cara Membuat Nivo Slider Di Blog ini ke social media anda, Semoga rezeki berlimpah ikut dimudahkan Allah bagi anda, Lebih jelas infonya lansung dibawah -->



Tips blog kali ini adalah cara membuat nivo slider di blog. Nivo slider adalah salah satu slider terbaik yang tersedia di web, banyak para blogger yang menggunakan nivo slider ini. Buat sobat blogger yang ingin menambahkan nivo slider kedalam blog nya, jangan ragu lagi untuk mengunakan nivo slider yang satu ini. Nivo slider yang satu ini selain cara membuat nya sangat mudah,sobat tingggal add gadget HTML saja, penampilan nya juga sangat keren. Coba saja lihat demo nya dibawah ini.


Bagaimana ? keren gak sob ? Kalau sobat tertarik untuk memasang nya di blog, tinggal masukan kode di bawah ini ke add gadget 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ61TWoo0Qbf_zyYSW6e_NUKs8LpoO3TSNJeOeONaInTQy_IsEae4GPVl5zxi-L6xtvdJFuYX8u0qz1LC4I5obJYPTQEN1_MDPoITVAhL-2v_8VFL9w6FHh3dgYU_8AdmEXc-uSyYS6us/s1600/helperblogger.com-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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv_cQTEdCDa7R3oS3c1pXWP3VgjAJTur3RZTY3cHiqeyxahO8Z8SU6ruAW_oOinPkg5uoiCrW7p8J0TQ4xvNS5dW_iY43btzmrsYqj8qd751C-csOuGIfyfp0Up-Vajk168q-ocSGHHVY/s1600/helperblogger.com-5.png"
    alt="Slider Image 1" title="This Is An Example Of A Caption">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY2ye43fqWQQYDTQ8VCVSRqlR6Y_hdCYfymewC71IJ-H9TCXtzJ3AEoTYA5eDjEbgkiN2P7jyfORyGNeVU5E_cd3bFg_3MnLfCUHXFX8KJlQut1KZs2V-Qzv0SzEqv-Zc8s4Jb55IARQ8/s1600/helperblogger.com-4.png"
    alt="Slider Image 2" title="You Can Add  Anything Here">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTlOwVVf7ltnoCWLIvYhpe6gG5sF9VfHNzObxx4clpnUJlQRbaOrZz3pXRdyHC6Z6WK2fYwO9gbmp7StvwJs0AhSVgUlMDycoBnXDpKQNLPyGNYSRnt7uyNO5XOgHaoLBxJoRXkdSqC2s/s1600/helperblogger.com-3.png"
    alt="Slider Image 2" title="Like Image Description">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCo5AX7FQzy8bMi2Y7M8kUV4efQtDNSkxLcpmuSjeVM_FRzJtK_iX9mWia23kODOX2ufIPzg8wFI2rUSmLUlrPPDuJXHdoXx6nENZ5CLmVAHFkFoY1tRwsoH2HrtxGtFyog_aI9HAWsXs/s1600/helperblogger.com-2.png"
    alt="Slider Image 2" title="Image Info">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjppQzgmqyIOSYwH_6gKwG4PZu1Zm8YRGkZi3wX-1KvxTRpri10tYBy2fDn13A9eQzT7drsglunNMgsSPboOKt8uq3AaQBRzF9L-acejM7eQeDZKEtQmM1DXL_Ooy8qcOgOnL7HzZ-bQS8/s1600/helperblogger.com-1.png"
    alt="Slider Image 2" title="And Other Things">
</div>


Save dan lihat hasilnya.
Note : Bagian yang saya kasih warna silahkan sobat edit sesuai kebutuhan sobat.

Mudah kan sob Cara Membuat Nivo Slider Di Blog ini ?
Cukup sekian tips blog kali ini..Semoga Bermanfaat..

Demikian info Cara Membuat Nivo Slider Di Blog, Semoga dengan adanya postingan ini, Anda sudah benar benar menemukan informasi yang memang sedang anda butuhkan saat ini. Bagikan informasi Cara Membuat Nivo Slider Di Blog ini untuk orang orang terdekat anda, Bagikan infonya melalui fasilitas layanan Share Facebook maupun Twitter yang tersedia di situs ini.

Previous Post Next Post