daftar iklan jual beli lokal

Cara membuat geser gambar di website, kode Html gambar geser

Salam sejahtera dan salam rindu pertemuan kembali dari admin nih kepada pengunjung situs. Sudah lama tidak berbagi tips tulisan bermanfaat buat pengunjung abjo-dumai.

Pada kesempatan ini admin akan berbagi pengalaman bagaimana cara membuat penampilan website dengan ada kolom gambar yang bisa di corsor dan geser dari kiri ke kanan dari beberapa galeri gambar yang akan kita buat dalam suatu kolom.

Contoh seperti gambar dibawah ini. Tanda panah untuk menggeser gambar.

Mah sekarang kita langsung ke cara. Setuju yaaa.. Belajar dan langsung praktek.

Pertama

⏺ Persiapkan aneka gambar yang akan kita galeri kan di web agar tampil bisa di geser. Untuk gambar usahakan memiliki ukuran yang sama. Misalnya kita mau 5 gambar atau 8 gambar atau 10 gambar tergantung pilihan kita. Edit ukuran gambar jika setiap gambar memiliki ukuran berbeda. Misalnya gambar A memiliki ukuran 300x250px gambar B memiliki 560x350px . Nah kita pedomani aja gambarnya pada ukuran berapa untuk 5 buah gambar. Misalnya kita ingin gambar semuanya memiliki ukuran 300x250px. Semua nga kita jadikan 300×250 px. Hal ini supaya penampilan gambar bergeser terlihat rapi dan seimbang. Contoh pada gambar diatas yaa.

⏺ Kedua. Ambil kode scrip HTML dibawah ini atau copy paste dan di tempelkan terlebih di dahulu di notepad atau di aplikasi edit html jika anda memilikinya.

<div style=”overflow-y:hidden; overflow-x:scroll; padding:2px; width:100%; height:auto; background-color: purple; border:0px solid #ccc;”><div style=’width:300;’><table style=”width:300%”bgcolor=”white”><tr><th><a href=”##”><img align=”center” src=”https://bangajo.online/wp-content/uploads/2018/10/1539349079208.png” width=”252″ height=”252″></a></th><th><a href=”##”><img align=”center” src=”https://bangajo.online/wp-content/uploads/2018/10/1539349191586.png” width=”252″ height=”252″></a></th><th><a href=”##”><img align=”center” src=”https://bangajo.online/wp-content/uploads/2018/10/1539349307431.png” width=”252″ height=”252″></a></th><th><a href=”##”><img align=”center” src=”https://bangajo.online/wp-content/uploads/2018/10/1539349364958.png” width=”252″ height=”252″></a></th><th><a href=”##”><img align=”center” src=”https://bangajo.online/wp-content/uploads/2018/10/1539350090308.png” width=”252″ height=”252″></a></th><th><a href=”##”><img align=”center” src=”https://bangajo.online/wp-content/uploads/2018/10/1539349412701.png” width=”252″ height=”252″></a></th><th><a href=”##”><img align=”center” src=”https://bangajo.online/wp-content/uploads/2018/10/1539350162270.png” width=”252″ height=”252″></a></th><th><a href=”##”><img align=”center” src=”https://bangajo.online/wp-content/uploads/2018/10/1539390599620.png” width=”252″ height=”252″></a></th><th><a href=”##”><img align=”center” src=”https://bangajo.online/wp-content/uploads/2018/10/1539349246199.png” width=”252″ height=”252″></a></th><th><a href=”##”><img align=”center” src=”https://bangajo.online/wp-content/uploads/2018/10/Screenshot_20181007_191122.png” width=”252″ height=”125″></a></th></tr></table></div>

Paste code tersebut si halaman yang ingin anda tampilkan atau halaman yang ingin anda hadirkan kode gambar geser tersebut. Ingat sebelum di tempelkan atau paste, posisikan terlebih dahulu halaman untuk menulis pad posisi text. Jangan visual.

Catatan kode : edit sendiri pada url link yang dimiliki gambar. Untuk membuat link gambar anda. Bisa anda buat melalui upload gambar pada dasboard tombol sisi kiri menu media. Setelah semua gambar pilihan telah di upload. Ambil link gambar dan tempelkan pada contoh kode diatas. Yaitu setelah tulisan

<img align=”center” src=”https://bangajo.online/wp-content/uploads/2018/10/Screenshot_20181007_191122.png”

Tukar link contoh dengan link dari gambar anda.

Untuk sisipkan kode tanda pagar. Boleh diisi dengan link tujuan anda agar gambar tersebut mewakili halaman link tujuan.

Untuk tanda ukuran adalah width dan heigth. Tentukan pilihan mau ukuran berapa gambar anda. Ganti sendiri aja yaa sesuaikan aja yaaa. Test masukkan ukuran . Cek review atau tinjau sebelum di publish.

Setelah cucok dan deal dengan pilihan kita baru kita publish.

Demikianlah tips atau cara membuat Halaman galeri gambar dengan bentuk bergeser. Semoga bisa yaa. Yuk praktek dan test ke TKP untuk mencoba.

Selamat mencoba dan jangan lupa save link nya. Ntar pas lupa bisa di cek kembali tips nya.

Salam by : admin


Hosting Unlimited Indonesia