Membuat Slider gambar keren dengan Nivo Slider

Agt

04

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 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinkKOcJbiGU8lky8aP81Yv5SERU-BJzr0rDeTKO0GWABaRkIIJZgkCOfSRRX0wZQLywr2l-aSjv9zW9H5fOwJSK7IfLUOf0XH3mB2ZcchPO8dao_1YRD2tYzy4PSd-rDw0Ie8X3_lWGIA/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/AVvXsEh2P_cg-Xl3Dzy8B1srsWXFRvihaxJEa4iToLeyINlOq6uBWMmBCvfbExJHXO0hBKIp8W_jku3w0bvk1UfOGXPTEDkqx_VkJRuwHCsv8VO8I5rYM1FgARbQGNL7Xv0wjZ5wFprn1gjegc4/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/AVvXsEjou-xN58aaxHZlxOlYfamHHTaSD7VNHYlseM0lutDS9jeNrnvmq7-acbEQ7j4an-460bUWWs4CbQmL42aGOmudrY49_Uj0gOGWYSNKYwJLqrPrDtNNacYAy7hwUvR5mkso0yQAaBI7m-Y/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/AVvXsEjuquWQBIp_vlaE4C_ivWndB5bz_bjwV19evfn6s02Jt6xNqtBlfIcc_P-yLykkslR8s7m8eYDZgQG4N_nWG1Z303foQWaOdhlWVt8BkjT_fNxc_oNwdAppmvVrz4xxIfQz49zKthoG8ug/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/AVvXsEjuquWQBIp_vlaE4C_ivWndB5bz_bjwV19evfn6s02Jt6xNqtBlfIcc_P-yLykkslR8s7m8eYDZgQG4N_nWG1Z303foQWaOdhlWVt8BkjT_fNxc_oNwdAppmvVrz4xxIfQz49zKthoG8ug/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/AVvXsEjou-xN58aaxHZlxOlYfamHHTaSD7VNHYlseM0lutDS9jeNrnvmq7-acbEQ7j4an-460bUWWs4CbQmL42aGOmudrY49_Uj0gOGWYSNKYwJLqrPrDtNNacYAy7hwUvR5mkso0yQAaBI7m-Y/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7NdmbFYvRlj1FlJGmxuVkDOZIPvBnDwCAD6igFlL8fCuiLauOOnasJIjSOYJ3_VttshsUO7wnZdVDg_ZV2Cu7FFsom9GwqFAwLaUJnhoaSV3CWyXbUjc7C4W7X2OS0TfXKiJ85pkFzy0/s1600/toystory.jpg" alt="" title="Judul gambar" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBdZ-Paj9AHFaT32plEcsoHQK04IqqQfQj7jka-3SDbkgiUdDP8k4TNiGEy-h3-Oq8dDVEhiwF_AZLZ4T3WFWWtph9B436silklnkGDl6gGt71xNRCUR0rL7-RkXFn1So7VC5FaX3UJ0g/s1600/up.jpg" alt="" title="Judul gambar" /></a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHHCbBWEydWNU1O8VuxB1kuYXy7YHs8avtgj-bXO-nH65RqiEtgfFl29A2hgmA9HNmeZtDlolFBrrwmue6vhlKlI8VQdyhVKXCIwVXSXM9gtA9V_u4ZTttpmKVONynlxIt9t_ns5bDrFI/s1600/walle.jpg" alt="" title="Judul gambar" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFWTGfXsfl8F8RPEmguN8ynI08fNSgsS-EN-RYBfBozbpjcm9KYyN7G6-5zqMFVm6YIzBCEfo2D-Gwgiy4e7EsfbY-aF77fMFN6auIXIaayHTxJjZREAeZnlOKVevg38BO8UKfVB92GBQ/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

BACA JUGA ARTIKEL TERKAIT LAINNYA

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