Tambahkan Nivo Image Slider untuk Blogger Blogspot

Tambahkan Nivo Image Slider untuk Blogger Blogspot

Tambahkan Nivo Image Slider untuk Blogger Blogspot

Slider Nivo adalah Free Image Slider yang populer untuk perancang web. Pada artikel ini, saya akan menunjukkan kepada Anda bagaimana mengintegrasikan ini ke Blogger Anda /


Tambahkan Nivo Image Slider untuk Blogger Blogspot
Slider Nivo adalah Free Image Slider yang populer untuk perancang web. Pada artikel ini, saya akan menunjukkan kepada Anda bagaimana mengintegrasikan ini ke template Blogger / Blogspot Anda. 
Sebelum memulai, Anda harus menginstal jQuery terlebih dahulu, silakan baca: Tambahkan jQuery ke Template Blogger .

1. Tambahkan Css

Selanjutnya, rekatkan di bawah kode CSS sebelum  ]]></b:skin> di kode templat Anda.
/ *
 * jQuery Nivo Slider v3.2
 * https://nivo.dev7studios.com
 *
 * Hak Cipta 2012, Dev7studios
 * Gratis untuk digunakan dan disalahgunakan di bawah lisensi MIT.
 * https://www.opensource.org/licenses/mit-license.php
 * /

/ * Gaya Nivo Slider * /
.nivoSlider {
 posisi: relatif;
 lebar: 100%;
 tinggi: otomatis;
 overflow: disembunyikan;
}
.nivoSlider img {
 posisi: absolut;
 atas: 0px;
 kiri: 0px;
 max-width: tidak ada;
}
.nivo-main-image {
 tampilan: blok! penting;
 posisi: relatif! penting; 
 lebar: 100%! penting;
}

/ * Jika suatu gambar terbungkus tautan * /
.nivoSlider a.nivo-imageLink {
 posisi: absolut;
 atas: 0px;
 kiri: 0px;
 lebar: 100%;
 tinggi: 100%;
 perbatasan: 0;
 bantalan: 0;
 margin: 0;
 z-indeks: 6;
 display: tidak ada;
 latar belakang: putih; 
 filter: alpha (opacity = 0); 
 opacity: 0;
}
/ * Irisan dan kotak di Slider * /
.nivo-slice {
 display: blok;
 posisi: absolut;
 z-index: 5;
 tinggi: 100%;
 atas: 0;
}
.nivo-box {
 display: blok;
 posisi: absolut;
 z-index: 5;
 overflow: disembunyikan;
}
.nivo-box img {display: block; }

/ * Gaya teks * /
.nivo-caption {
 posisi: absolut;
 kiri: 0px;
 bawah: 0px;
 latar belakang: # 000;
 warna: #fff;
 lebar: 100%;
 z-index: 8;
 padding: 5px 10px;
 opacity: 0,8;
 overflow: disembunyikan;
 display: tidak ada;
 -moz-opacity: 0,8;
 filter: alpha (opacity = 8);
 -webkit-box-sizing: border-box; / * Safari / Chrome, WebKit lain * /
 -moz-box-sizing: border-box; / * Firefox, Tokek lain * /
 ukuran kotak: kotak batas; / * Opera / IE 8+ * /
}
.nivo-caption p {
 padding: 5px;
 margin: 0;
}
.nivo-caption a {
 display: inline! important;
}
.nivo-html-caption {
    display: tidak ada;
}
/ * Arah gaya nav (mis. Berikutnya & Sebelumnya) * /
.nivo-directionNav a {
 posisi: absolut;
    atas: 45%;
    z-index: 9;
    kursor: pointer;
    display: blok;
    lebar: 30px;
    tinggi: 30px;
    latar belakang: url (https://1.bp.blogspot.com/-lERcXuf5118/UasRKprns2I/AAAAAAAAFAF0/c6LU3T6J1lA/s1600/arrows.png) tidak ada pengulangan;
    indentasi teks: -9999px;
    perbatasan: 0;
    -webkit-transisi: semua 200 ms kemudahan masuk;
    -moz-transisi: semua 200 ms kemudahan masuk;
    -o-transisi: semua 200 ms kemudahan masuk;
    transisi: semua 200 ms kemudahan masuk;
    opacity: 0;
    kiri: 15px;
}
.nivo-prevNav {
 kiri: 0px;
}
.nivo-nextNav {
 kanan: 0px;
}
/ * Kontrol gaya nav (misal 1,2,3 ...) * /
.nivo-controlNav {
 perataan teks: tengah;
 padding: 15px 0;
}
.nivo-controlNav a {
 kursor: pointer;
    latar belakang: url (https://2.bp.blogspot.com/-4xnqpjcqDd//UasRKo0JRLI/AAAAAAAAAFa4/ej43qHFKnlA/s1600/bullets.png) no-repeat;
    indentasi teks: -9999px;
    perbatasan: 0;
    margin: 0 2px;
    display: inline-block;
    tinggi: 22px;
    lebar: 22px
}
.nivo-controlNav a.active {
 font-weight: bold;
 background-position: 0 -22px;
}
a.nivo-nextNav {
    background-position: -30px 0;
    kiri: otomatis;
    kanan: 15px;
}
#slider: arahkan kursor .nivo-directionNav a {
    opacity: 1
}

2. Tambahkan Javascript

Tambahkan di bawah kode javascript sebelum </body>tag:
<script type = 'text / javascript'>
// <! [CDATA [
/ *
 * jQuery Nivo Slider v3.2
 * https://nivo.dev7studios.com
 *
 * Hak Cipta 2012, Dev7studios
 * Gratis untuk digunakan dan disalahgunakan di bawah lisensi MIT.
 * https://www.opensource.org/licenses/mit-license.php
 * /

img src = "'+ r.currentImage.attr (" src ") +'" style = "posisi: absolut; lebar: '+ t.width () +" px; tinggi: otomatis; tampilan: blok! penting; atas: 0; kiri: - "+ (o + s * oo) + 'px;" /> </div> ') .css ({kiri: o * s + "px", lebar: o + "px", tinggi: i + "px", opacity: "0", overflow: "hidden"}))} } e (". nivo-slice", t) .height (i); u.stop (). animate ({height: e (r.currentImage) .height ()}, n.animSpeed)}; var p = function (t, n, r) {if (e (r.currentImage) .parent (). is ("a")) e (r.currentImage) .parent (). css ("display", "block") ; e ('img [src = "' + r.currentImage.attr (" src ") + '"]', t) .not (". nivo-main-image, .nivo-control img"). width ( t.width ()). css ("visibility", "hidden"). show (); var i = Math.round (t.width () / n.
//]]>
</script>

<script type = 'text / javascript'>
// <! [CDATA [
// Slider Nivo Default
$ (window) .load (function () {
    $ ('# slider'). nivoSlider ();
});
//]]>
</script>

3. HTML asli

Sekarang, tempatkan contoh HTML di bawah ini ke mana saja dalam kode template Anda yang ingin Anda tampilkan slider gambar (juga dapat memasukkan ke widget HTML / javascript). Tentu saja, tolong ubah semua src gambar, judul, keterangan dan tautan dalam contoh kode HTML:
<div class = "slider-wrapper">
    <div id = "slider" class = "nivoSlider">
        <img src = " yourimage1.jpg " alt = "" />
        <a href=" yourlink2.com "> <img src = " yourimage2.jpg " alt = "" title = "# htmlcaption" /> </a>
        <img src = " yourimage3.jpg " alt = "" title = " Contoh atau teks mentah untuk gambar 3 " />
        <img src = " yourimage4.jpg " alt = "" />
        <! - tambahkan gambar lain jika Anda suka ->
    </div>
</div>
<div id = "htmlcaption" class = "nivo-html-caption">
    <strong> Ini </strong> adalah contoh teks <em> HTML </em> dengan <a href="#"> tautan </a>.
</div>
<! - tambahkan keterangan HTML gambar lainnya ->
Jika Anda ingin menggunakan teks HTML, Anda harus memasukkan judul untuk gambar adalah "# my-html-caption-id". Keterangan gambar ini akan menjadi konten dari tag div apa pun dengan id “my-html-caption-id” (silakan periksa contoh dengan div di “htmlcaption”).

4. Untuk pengguna tingkat lanjut

Untuk membuat pengaturan lanjutan, Anda mengubah semua kode javascript setelah catatan: "// Default Nivo Slider" pada langkah 2 dengan kode di bawah ini dan ubah pengaturan apa pun yang Anda suka:
$ (window) .load (function () {
    $ ('# slider'). nivoSlider ({
        efek: 'acak', // Tentukan set seperti: 'lipat, pudar, sliceDown'
        slices: 15, // Untuk animasi slice
        boxCols: 8, // Untuk animasi kotak
        boxRows: 4, // Untuk animasi kotak
        animSpeed: 500, // Kecepatan transisi slide
        pauseTime: 3000, // Berapa lama setiap slide akan ditampilkan
        startSlide: 0, // Atur Slide awal (0 indeks)
        directionNav: true, // Navigasi Berikutnya & Sebelumnya
        controlNav: true, // 1,2,3 ... navigasi
        controlNavThumbs: false, // Gunakan thumbnail untuk Control Nav
        pauseOnHover: true, // Hentikan animasi saat melayang
        manualAdvance: false, // Paksa transisi manual
        prevText: 'Sebelumnya', // Teks directionNav sebelumnya
        nextText: 'Next', // Next directionNav teks
        randomStart: false, // Mulai pada slide acak
        beforeChange: function () {}, // Pemicu sebelum transisi slide
        afterChange: function () {}, // Pemicu setelah transisi slide
        slideshowEnd: function () {}, // Pemicu setelah semua slide ditampilkan
        lastSlide: function () {}, // Memicu ketika slide terakhir ditampilkan
        afterLoad: function () {} // Pemicu ketika slider telah dimuat
    });
});



share this article to: Facebook Twitter Google+ Linkedin Technorati Digg
Posted by GNOM PANEL, Published at Maret 31, 2019 and have 0 komentar

Recent Post

Recent Posts