Lompat ke konten Lompat ke sidebar Lompat ke footer

Widget HTML #1

THEME SHOP - Tukang Toko Online
Jasa Review

Auto Slide Responsive dan Swipe Touch Blogspot

Plugin slide show ini saya dapatkan dari Hongkiat, setelah beberapa saat mencari plugin slide show yang lumayan ringan dan mudah diterapkan di blogspot. Slide show ini memuat banner-banner gambar yang bisa dimanfaatkan sebagai promo produk atau yang lainnya disesuaikan dengan websitenya.

Ada dua cara utk pemasangan plugin ini, yang termudah adalah cara copas script yang akan saya bagikan pada tulisan ini langsung ke widget HTML atau cara dengan memisahkan script CSS, HTML dan Javascript yang dipasang secara terpisah menurut lokasi kode di dalam html template atau juga ke widget dan bagian tertentu di blogspot.
auto slide responsive

Hasil tampilan slide show-nya adalah seperti ini :

See the Pen
Swiper Slider with JS
by tukangtokoonline (@tukangtokoonline)
on CodePen.


Atau bisa cek live demonya di blogspot DISINI

Cara Pertama : Memasang langsung ke widget
Masuk ke tata letak >> tambahkan sebuah widget HTML ke layout blog Anda >> Copas semua script berikut ini ke dalam kolom widget >> simpan widget.

Note : Edit hanya pada bagian text /script mulai dari <a href="ganti-dg-link-tujuan-gambar.... dst, sampai dengan </a>

Jika belum paham tentang pemasangan link gambar, bisa dibaca dulu artikel berikut ini : Panduan Kode HTML Gambar

Cara Kedua : Memasang script pada HTML Template

1. Memasang kode CSS.

Masuk ke Template >> klik Edit HTML >> cari kode ]]></b:skin> >> masukkan kode berikut ini tepat di atas kode ]]></b:skin> ini.

/*slide show responsive*/
.swipe {
    overflow: hidden;
    position: relative;
    max-width: 1080px;
    width: 100%;
    max-height: 500px;
    margin: auto;
}
.swipe-wrap {
    overflow: hidden;
    position: relative;
}
.swipe-wrap > div {
    float: left;
    width: 100%;
    max-height:500px;
    position: relative;
}
.swipe .nav {
    position: absolute;
    width: 80px;
    height: 38px;
    z-index: 10;
    text-align: center;
    line-height: 40px;
    display: inline-block;
    color: #fff;
    top: 45%;
    cursor: pointer;
    background-color: rgba(0,0,0,0.8)
}
.swipe .nav.next {
    right: 0;
    -webkit-border-radius: 3px 0 0 3px;
    border-radius: 3px 0 0 3px;
}
.swipe .nav.prev {
    -webkit-border-radius: 0 3px 3px 0;
    border-radius: 0 3px 3px 0;
}

2. Memasang kode Javascript

Selanjutnya Pasang script JS berikut ini tepat di atas kode </head> atau </body>.

Note: Hapus script jquery <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> jika pada template anda sudah ada, atau memiliki versi yang lebih tinggi.

3. Memasang kode HTML

Copas kode HTML berikut ini ditempat yang Anda inginkan terpasang slide shownya. Bisa di widget, sidebar, di bawah header atau dimanapun di bagian template blog Anda.


Note: Edit hanya pada bagian text /script mulai dari <a href="ganti-dg-link-tujuan-gambar.... dst, sampai dengan </a>

Jika Anda melakukannya dengan benar, seharusnya slide show sudah terpasang dengan baik.

7 komentar untuk "Auto Slide Responsive dan Swipe Touch Blogspot"

  1. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  2. Cara munculin bulat² yg ada di slide show nya gimana?

    BalasHapus
    Balasan
    1. Bulat-bulat yg mana ya, gan, maksudnya?

      Hapus
    2. Yang dibawah gambar bannernya itu, kayak di Shopee gitu

      Hapus
    3. Itu beda lagi script utk slider ug lain, gan.
      Coba cek scriptt slider lainnya di blog ini.

      Hapus
  3. Komentar ini telah dihapus oleh pengarang.

    BalasHapus