Cara Membuat Slideshow Gambar dan Video Di Postingan Blogger

Medikuid - Halo temen-temen dikesempatan kali ini akan mengulas Cara Membuat Gambar Slideshow Otomatis Di Postingan Blogger dengan code script yang sudah disediakan pada artikel ini.

Dengan foto dibuat slideshow pada postingan akan mempercantik tampilan pada artikel, gambar tidak berantakan dimana-mana. Pokoknya sangat enak dipandang dan mudah di pahami pengujung.

Ada beberapa Alasan membuat Gambar Slideshow di Postingan seperti tidak menggunakan ruang halaman pada postingan artikel terlalu banyak dalam artian lebih ringkas dan sangat nyaman untuk memahami isi dari artikel.

Sekarang kalian sudah taukan kegunaan serta menfaat membuat gambar slideshow pada postingan blog. Kalau kalian tertarik membuat motode slideshow gambar di postingan silahkan kalian simak langkah-langkah di bawah ini.

Cara Membuat Gambar Slideshow Di Postingan Blogger
1. Longin www.blogger.com
2. Masuk tema => Edit HTML

3. Kode di bawah ini, pasang di atas kode ]]></b:skin>

.carousel-cell {
width: 100%;
height: 200px;
margin-right: 10px;
background: #8C8;
border-radius: 5px;
counter-increment: carousel-cell;
}
.carousel-cell img{
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
overflow: hidden;
}
.caraousel-cell iframe{
width: 100%;
height: 200px;
padding: 0px;
margin: 0px;
}
.carousel-cell.is-selected iframe {
width: 100%;
height: 200px;
}
.flickity-viewport {
overflow: hidden;
position: relative;
height: 200px!Important;
}
.flickity-page-dots {
bottom: -22px;
}
.flickity-page-dots .dot {
height: 4px;
width: 40px;
margin: 0;
border-radius: 0;
}
.flickity-button {
background: #333;
color: white;
}
.flickity-button:hover {
background: #F90;
}
.flickity-prev-next-button {
width: 30px;
height: 30px;
border-radius: 5px;
}
@media screen and(max-width:640px){
.flickity-viewport {
overflow: hidden;
position: relative;
max-height: 200px!Important;
}
.carousel-cell{
height: 200px!Important;
}
iframe.slider{
width:100%;
height:100%;
}
.carousel-cell img {
height: 200px;
}}{codeBox}

4. Pasang kode di atas </head> , Kemudian Save Template

<link href='https://unpkg.com/flickity@2/dist/flickity.min.css' rel='stylesheet'/>
<script src='https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js'/>{codeBox}