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.
Hasil tampilan slide show-nya adalah seperti ini :
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.
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.
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.
Hasil tampilan slide show-nya adalah seperti ini :
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.
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;
}
.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>.
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.
Komentar ini telah dihapus oleh pengarang.
BalasHapusCara munculin bulat² yg ada di slide show nya gimana?
BalasHapusBulat-bulat yg mana ya, gan, maksudnya?
HapusYang dibawah gambar bannernya itu, kayak di Shopee gitu
HapusItu beda lagi script utk slider ug lain, gan.
HapusCoba cek scriptt slider lainnya di blog ini.
Ouh ok makasih
HapusKomentar ini telah dihapus oleh pengarang.
BalasHapus