Cara Membuat Fitur Slider Gambar Postingan Blogger

Membuat Fitur Slider Gambar Postingan Blogger

Paansii - Pada postingan kali ini saya akan membagikan tutorial membuat fitur slider gambar postingan blogger, fitur ini mirip dengan template fletro pro, you knowlahh.

Dalam fitur ini pada saat gambar dibuka di layar yang lebih kecil gambar akan ditampilkan horizontal kalian bisa swipe layar ke kanan untuk melihat gambar lainnya.

Gambar diatas merupakan contoh Membuat Fitur Slider Gambar Postingan Blogger, Tanpa basa basi kita langsung ke tutorialnya lets'go.

Pertama, silahkan masuk ke menu Dashboard Blog » Edit HTML, lalu simpan code css berikut ini tepat di atas code ]]></b:skin>.

/* Fitur Foto Slider */
.Blog .gulir-image{display:flex;flex-wrap:wrap;align-items:flex-start;margin:30px 0}
.Blog .gulir-image img{width:calc(33.333% - 10px);margin:0 15px 15px 0}
.Blog .gulir-image img:nth-of-type(3n), .Blog .gulir-image img:last-child{margin-right:0}
.Blog .gulir-image{flex-wrap:nowrap;justify-content:flex-start;position:relative;width:114%;left:-7%;padding:0 7%;overflow-y:hidden;overflow-x:auto;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.Blog .gulir-image img{display:block;flex:0 0 auto;width:80%;margin:0 15px 0 0}
.Blog .gulir-image img:last-of-type{margin-right:0}
.Blog .gulir-image:after{content:'';display:block;flex:0 0 auto;align-self:stretch;width:7%}

Jangan lupa klik tombol Simpan Tema.

Kemudian untuk menggunakannya tambahkan code HTML ini di postingan yang akan anda pakai fitur ini, perlu di catat, posting menggunakan mode HTML ok, jangan mode compose.

<div class='gulir-image'>
  <img alt='Judul_gambar' src='Url_gambar'/>
  <img alt='Judul_gambar' src='Url_gambar'/>
  <img alt='Judul_gambar' src='Url_gambar'/>
</div>

Silahkan ubah lebar gambar yang saya tandai 114% bisa kalian ubah menjadi 90% agar tidak memotong item-item di sidebar.

Kalau kalian mau nambahin gambar lagi, tinggal tambahin aja code <img alt='Judul_gambar' src='Url_gambar'/> di bawah code <div class='gulir-image'>.

Lalu ubah juga Judul_gambar dengan judul gambar kalian dan silahkan ganti juga Url_gambar dengan Url gambar kalian, dan Klik Publish untuk melihat hasilnya. Selesai boy.

Penutup

Mungkin segitu saja tutorial Membuat Slider Gambar Postingan Blogger, semoga bermanfaat. Salam sobat Paansii.