Slide Carousel Responsive dan support touch screen For Blogger
Kalo nggak dicatat ntar saya lupa, sedikit berantakan, kburu waktu + male nulis
udah gini aja:
1.Buka Blogger
2.Login
3.Pilih Blog kamu => template => Edit HTML
4.kode berikut di dalam/antara <head> </head>:
<link rel="stylesheet" href="https://unpkg.com/flickity@2.0/dist/flickity.css" media="screen"/>5.kode berikut di dalam/antara <body> </body>:
<script src="https://unpkg.com/flickity@2.0/dist/flickity.pkgd.min.js"></script>6.masuk layout => Add a Gadget => HTML/JavaScript masukkan kode:
<style>
/* external css: flickity.css */
.gallery-cell {
width: 25%;
height: auto;
background: #333;
margin-right: 10px;
}
.gallery {
background: #eee;
}
.gallery-cell.is-selected {
background: #d0021b;
padding: 0 0 30px;
}
.flickity-page-dots .dot {
padding: 0 0 10px;
width: 15px;
height: 5px;
margin: 0 5px 20px;
}
.flickity-prev-next-button{
background: hsla(0, 0%, 100%, 0.75);
}
</style>
<!-- Flickity HTML init -->
<div class="gallery js-flickity">
<div class="gallery-cell"><img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg"/></div>
<div class="gallery-cell"><img src="http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg"/></div>
<div class="gallery-cell"><img src="http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg"/></div>
<div class="gallery-cell"><img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg"/></div>
<div class="gallery-cell"><img src="http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg"/></div>
<div class="gallery-cell"><img src="http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg"/></div>
<div class="gallery-cell"><img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg"/></div>
</div>
7.simpan8.tadaaaa
sudah di test disni
Comments