Membuat Slider gambar keren dengan Nivo Slider

Salam sukses selalu buat sobat semua, Belajar Komputer Melalui Internet saat ini akan sedikit membahas tentang Membuat Slider gambar keren dengan Nivo Slider dan semoga artikel ini bermanfaat.


Membuat Slider gambar keren dengan Nivo SliderMembuat Slider gambar keren dengan Nivo Slider Mungkin sobat sudah pada tau fitur ini slider gambar, namun barangkali ada sobat yang kesempatan ini lagi nyari slider seperti ini buat blognya, tepat sekali kalau sobat menggunakan Nivo Slider dengan pemasangan kodenya yang tidak rumit serta tampilannya yang lumayan menarik saat ini nivo slider ini sudah banyak yang menggunakan, namun mohon maaf buat sobat yang mungjin bertanya bikin tutorial tapi ko ga dipasang diblognya? ya, saya tidak pasang nivo slide ini karena blog ini sengaja saya buat tidak terlalu penuh dengan tampilan gambar sehingga ya cukup beginilah blog ini, namun tutorial ini sudah saya pasang dan dengan hasil yang baik, buat sobat yang mau melihat hasil atau demonya silahkan klik tautan dibawah.

Kalau sobat sudah melihat demonya, bagaimana keren kan?  pemasangannyapun dapat dibilang mudah karena untuk pemasangan URL gambarnya kita cukup meletakan pada Widget jadi pada saat kita mengedit, atau mengganti gambar kita tidak usah lagi membuka halaman edit HTML.
Buat Sobat yang mau memasang nivo slide ini ikuti cara lengkapnya dibawah ini ;
  • Login Blogger > Design > Edit HTML cari kode </b:skin>
  • Salin kode berikut di atas kode </b:skin>
#slider-wrapper {
background:url(http://3.bp.blogspot.com/-upQKtIwk5Kw/TeiNrE-31II/AAAAAAAAASU/J_p9rYGVEHQ/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(http://4.bp.blogspot.com/-ueagsKPMZC4/TeiMv1JhNFI/AAAAAAAAASI/326s2RXE-mQ/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://4.bp.blogspot.com/-jQWCeMA4bLI/TeiNqrIkyHI/AAAAAAAAASQ/c35RQfTbw_I/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(http://4.bp.blogspot.com/-rgk389yhc1Y/TeiNraq4IVI/AAAAAAAAASY/b0WSOzs075o/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(http://4.bp.blogspot.com/-rgk389yhc1Y/TeiNraq4IVI/AAAAAAAAASY/b0WSOzs075o/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(http://4.bp.blogspot.com/-jQWCeMA4bLI/TeiNqrIkyHI/AAAAAAAAASQ/c35RQfTbw_I/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 'tata letak' > Add a Gadget yang mana saja> pilih HTML/JavaScript dan masukan kode dibawah ini. 

<div id="slider">
<img src="http://3.bp.blogspot.com/-R_jrCzUDe-g/TehdHXDrK8I/AAAAAAAAASE/fW_-YGhHx20/s1600/toystory.jpg" alt="" title="Judul gambar" />
<img src="http://1.bp.blogspot.com/-BRh1P_3XyDo/Tehc9UlYh0I/AAAAAAAAAR4/6TKLJs25ecg/s1600/up.jpg" alt="" title="Judul gambar" /></a>
<img src="http://1.bp.blogspot.com/-mUIbhIqAyw4/Tehc-zbmK_I/AAAAAAAAAR8/MlPQb_D5P_A/s1600/walle.jpg" alt="" title="Judul gambar" />
<img src="http://2.bp.blogspot.com/-RiUUAdlHMSE/TehdEWtMyCI/AAAAAAAAASA/AXMQng9etR8/s1600/nemo.jpg" alt="" title="Judul gambar" />
</div>
selanjutnya letakan gadget tersebut diatas postingan dengan cara mendragnya. kode berwarna merah adalah URL gambar, silahkan ganti dengan gambar sobat dan yang berwarna hijau Judul gambar

Referensi :  http://nivo.dev7studios.com

Mungkin sampai disini dulu Belajar Komputer Melalui Internet tentang Membuat Slider gambar keren dengan Nivo Slider kali ini, semoga bermanfaat bagi Anda.

DAPATKAN ARTIKEL VIA EMAIL

Masukan Alamat Email Sobat:

Delivered
feedburner

Dipublish oleh : Abdul Kohar - Jatinangor Rating 5 Belajar Komputer Melalui Internet, Updated at: 18:26

6 komentar :

  1. wah artikelnya tambah keren aja ni...
    sukses terus ea

    BalasHapus
  2. Keren Infonya...,
    semoga tambah sukses dan sehat selalu...

    BalasHapus
  3. keren bang.. btw way kambas juga pakai nivo

    BalasHapus
  4. salam kenal om..
    kok ga jalan ya di http://nomor-mu.blogspot.com

    thx utk pencerahanya

    BalasHapus
    Balasan
    1. biasanya terjadi konflik Javascript, templatenya yang kurang mendukung..
      =))

      Hapus
Silahkan Tinggalkan jejak sobat, bila mau menggunakan emotion silahkan klik emotionnya kemudian copy dengan ctrl+c dan paste kodenya didalam kotak komentar...

close
GUESTBOOK
Google PageRank Checker Powered by  MyPagerank.Net
backlink
Dashboard
| Copyright © 2012 |
| Belajar Komputer Melalui Internet |
| Desain by: Abdul Kohar | Powered by: Blogger |