Cara membuat carousel atau slide banner dengan embed di google site simple dan keren

Membuat Slide banner atau carousel di google site sebenarnya telah disediakan di menu sisipkan, tapi tampilan ketika digunakan kurang begitu responsif dan terkadang sulit mengatur posisi gambar. tapi tenang dengan ngeweb.site kita dapat membuat slide banner atau embed keren seperti dibawah ini dengan cepat dan mudah.

untuk menggunakan fitur ini silahkan tonton dulu video kami disini

oke lanjut ke Tutorialnya ya !!!!

1. siapkan 3 foto untuk slidernya, setelah siap atur Agar ukuran dan bentuknya sama. dan tak perlu khawatir ngeweb.site telah menyiapkan google slide untuk mengatur bentuk dan ukuran slide silahkan klik Disini untuk mendapatkan template,

2. setelah foto siap silahkan Uploud ke Hosting image gratis, contohnya https://id.imgbb.com/

3. unggah gambar tunggu hingga selesai

4. pilih pengaturan link Tampil Tautan Penuh

4. copy code link gambar Tautan Penuh HTML SEPERTI Gambar contohnya :
<a href="https://imgbb.com/"><img src="https://i.ibb.co.com/vvfmLksf/Screenshot-2025-05-07-08-26-02.png" alt="Screenshot-2025-05-07-08-26-02" border="0"></a>
copy hanya mulai https sampai .png / .jpg. lakukan hingga 3 foto.
5. Selanjutnya masukkan link 1 - 3 tadi kedalam formulir dibawah ini selanjutnya tekan Generate

Kode Link Pertama :

Kode Link Pertama :

Kode Link Pertama :

Setelah memasukkan Kode dan generate generate
Copy Semua Code Dibawah Ini dengan cara klik Copy Kodenya di bawah kotak kode
dan reset kode bisa ingin memasukkan kode atau salah memasukkan kode


<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
</style>
</head>
<body class="bg-transparent">

<div id="demo" class="carousel slide" data-ride="carousel">

<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>

<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="micro" alt="Slide 1" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="micro" alt="Slide 2" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="micro" alt="silde 3" width="1100" height="500">
</div>
</div>

<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>

</body>
</html>

6. copy dan paste kode tadi ke menu sisipkan kemudian klik sematkan lalu kliksematkan kode dan klik berikutnya terahkir sisipkan

7. Selanjutnya klik berikutnya, dan slide anda akan ditampilkan previewnya lalu tekan. sisipkan

8. Selesai. anda tinggal mengatur bentuknya dengan menyesuaikan lingkaran berwarna biru. dan carousel atau slide banner sudah siap mempercantik website anda

Terima Kasih Telah Berkunjung

7 komentar

Unknown20 Desember 2021 pukul 20.36
klo ingin menambahkan data slide nya menjadi 4 atau 5,,bagaimana ya cara nya??
BalasHapus
Balasan
arief student 10 Januari 2022 pukul 01.56
salam..buat blog linkmagz responsive gak...
BalasHapus
Balasan
FB: Teungku Syukri25 Maret 2022 pukul 22.10
Pertanyaan yg sama ya...

klo ingin menambahkan data slide nya menjadi 4 atau 5,,bagaimana ya cara nya??
BalasHapus
Balasan
noor aini27 April 2024 pukul 00.40
pak, saya buat sesuai penjelasannya tetapi gambar koq tdk muncul ya. hanya ada slide yang bisa bergerak gitu.
BalasHapus
Balasan

Tambahkan komentar

Mudah Buat Website

Cara membuat carousel atau slide banner dengan embed di google site simple dan keren

Related Posts

7 komentar

Posting Komentar

Popular

Label

Arsip

Kontributor