Cara membuat gambar slider show keren di blogger atau website

Gambar slider show artinya gambar berjalan atau bergeser sendiri , slider show bisa di ubah dengan gambar desain sesuai pilihan. Gambar slider show biasanya di pasang di blog atau website , dengan gambar di desain slider show , website atau blog akan terlihat menarik dan profesional.

Biasanya gambar pada postingan situs website atau blogspot itu diam, akan cepat bosan. Tidak salah jika Anda ingin mencoba membuat gambar diam menjadi bergeser otomatis. Cara membuat gambar slider show tentu sangat mudah dan simpel, Dengan menambahkan kode html/javascript ke dalam template blog .

Untuk mengetahui seperti apa slideshow yang akan di buat di blogger atau website kalian Bisa lihat , slider show yang sudah jadi bisa tinjau berikut


Langkah pertama yang harus dilakukan adalah kunjungi Dashboard blogger.

1. Login blogger

2. Edit html

Setelah masuk di dalam template blog , lalu Kalian cari kode ]]><b:skin>.
Tempatkan kode CSS di bawah ini tepat di atas kode ]]><b:skin>.

3. Kode CSS

@keyframes slidy {
0% {
left: 0%;
}
20% {
left: 0%;
}
25% {
left: -100%;
}
45% {
left: -100%;
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: -300%;
}
95% {
left: -300%;
}
100% {
left: -400%;
}
}

body {
margin: 0;
}
div#slider {
overflow: hidden;
}
div#slider figure img {
width: 20%;
float: left;
}
div#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 30s slidy infinite;
}



Setelah kode CSS di atas sudah di tambahkan ke template blogger atau blogspot kalian simpan.

4. Kode html

 <base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">

<div id="slider">

<figure>

<img src="#" alt>

<img src="#" alt>

<img src="#" alt>

<img src="#" alt>

<img src="#" alt>

</figure>

</div>

Copy kode html/JavaScript di atas lalu letakkan kode tersebut di artikel postingan dengan mode html  seperti contoh gambar berikut.

Sebelum menyimpan kode html tersebut , kalian tambahkan dulu , link URL gambar , gambar sesuai pilihan .
Untuk menambahkan kode Link URL gambar , lihat tanda pagar berwarna merah  , ubah tanda pagar tersebut dengan link URL gambar kalian.
Sekarang kalian simpan .
Dan bisa tinjau hasilnya

Sekarang pembuatan slider show image sudah selesai.
Semoga artikel ini bermanfaat untuk yang mau membuat gambar slider show.
Terimakasih .

Belum ada Komentar untuk "Cara membuat gambar slider show keren di blogger atau website"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel