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}
Keterangan:
Jika tampilan panjang dan lebar gambar di postingan kalian bisa ubah angka di atas.

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}

5. Selanjutnya masukan kode di bawah ini pada halaman atau postingan. Ubah menjadi mode HTM
<div class="carousel" data-flickity="">
<div class="carousel-cell">
<img
alt="slideshow1"
src="#"
title="slideshow1"
/>
</div>
<div class="carousel-cell">
<img
alt="slideshow2"
src="#"
title="slideshow"
/>
</div>
<div class="carousel-cell">
<iframe
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen=""
class="slider"
frameborder="0"
src="https://www.youtube.com/embed/BHiMYGRBhhs"
></iframe>
</div>
</div>{codeBox}


Keterangan:
1. Warna merah tanda pagar isi dengan URL gambar.
2. Ubah URL YouTube sesui dengan keinginan kalian.


Itulah cara membuat slideshow gambar di postingan blogger. Dengan menerapkan ini akan membatu menghemat pada halama artikel saat upload gambar banyak. Semoga pandaun ini dapat bermanfaat buat kalian. Terima kasih sudah berkujung di medikuid.com.

Komentar

Postingan populer dari blog ini

Lirik Lagu Kembang Pungkasan - Filla Melinda

Lirik Lagu Cucuk Remuk - Niken Salindry

Lirik Lagu Sesideman - Yanik Megawati