Cara Mudah membuat galery Gambar Pixbay
Cara Mudah Membuat Galeri Gambar Pixabay Menggunakan JavaScript di Blogspot
Pendahuluan
Dalam era digital saat ini, gambar dan visualisasi memiliki peran yang sangat penting dalam berbagai konten online.
Salah satu sumber gambar yang populer dan mudah diakses adalah Pixabay.
Pixabay adalah sebuah platform online yang menyediakan ribuan gambar dan video berkualitas tinggi yang bebas hak cipta.
Pada artikel ini, kami akan menjelaskan cara mudah untuk membuat galeri gambar Pixabay menggunakan JavaScript di Blogspot.
Dengan menggunakan JavaScript, Anda dapat mengambil gambar-gambar dari Pixabay secara otomatis dan menampilkannya dalam galeri yang menarik di blogspot Anda.
 |
| Image Source: pixabay. |
Langkah 1: Mendaftar Akun Pixabay.
Sebelum dapat menggunakan API Pixabay, Anda perlu mendaftar akun di Pixabay terlebih dahulu.
Kunjungi situs web Pixabay (https://pixabay.com/) dan buatlah akun baru.
Setelah selesai mendaftar, Anda akan mendapatkan kunci API yang nantinya akan digunakan dalam pengambilan gambar dari Pixabay.
Langkah 2: Membuat Blogspot ( jika belum punya )
Langkah selanjutnya adalah membuat blog di platform Blogspot ( jika belum punya 😁 ) Kunjungi situs web Blogspot (https://www.blogger.com/) dan login dengan akun Google Anda.
Setelah berhasil login, klik tombol "Buat Blog Baru" dan ikuti langkah-langkahnya untuk membuat blog baru sesuai dengan preferensi Anda.
Langkah 3: Mengatur Tampilan Blogspot.
Setelah blogspot berhasil dibuat, langkah berikutnya adalah mengatur tampilan blogspot sesuai dengan kebutuhan Anda.
Anda dapat memilih template yang sesuai atau mengedit template yang tersedia untuk membuat blogspot Anda terlihat menarik.
Langkah 4: Mengambil Gambar dari Pixabay Menggunakan JavaScript.
Setelah blogspot diatur dengan baik, saatnya untuk mengambil gambar-gambar dari Pixabay menggunakan JavaScript.
Berikut adalah langkah-langkahnya:
Buka editor template blogspot Anda.
Tambahkan kode JavaScript berikut di bagian
<head>:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
var pixabayAPI = "https://pixabay.com/api/?key=YOUR_API_KEY&q=flowers&image_type=photo";
$.getJSON(pixabayAPI, function(data) {
if (data.hits.length > 0) {
$.each(data.hits, function(i, hit) {
var imageThumb = $("<img>");
imageThumb.attr("src", hit.previewURL);
imageThumb.attr("alt", hit.tags);
$("#pixabay-gallery").append(imageThumb);
});
}
});
});
</script>
Tambahkan kode HTML berikut di bagian
<body>:
<div id="pixabay-gallery"></div>
Langkah 5: Menampilkan Galeri Gambar Pixabay di Blogspot.
Setelah kode JavaScript ditambahkan, saatnya menampilkan galeri gambar Pixabay di blogspot Anda. Untuk melakukannya, ikuti langkah-langkah berikut:
Buka editor template blogspot Anda.
Temukan tempat di mana Anda ingin menampilkan galeri gambar.
Tambahkan kode HTML berikut:
<div id="pixabay-gallery"></div>
Galeri ini akan menampilkan gambar-gambar yang diambil dari Pixabay berdasarkan kata kunci yang telah Anda tentukan.
Kesimpulan
Membuat galeri gambar Pixabay menggunakan JavaScript di blogspot dapat menjadi cara yang efektif untuk menambahkan visualisasi yang menarik ke dalam konten blog Anda.
Dengan mengikuti langkah-langkah yang telah dijelaskan di atas, Anda dapat dengan mudah mengambil gambar-gambar berkualitas tinggi dari Pixabay dan menampilkannya dalam galeri yang menarik di blogspot Anda.
Selamat mencoba!
Demo:
Semoga Bisa😁Mungkin Dipostingan selanjutnya akan saya berikan tutorial cara membuat halaman pencarian gambar pixabay.
Jadi tunggulah posting saya selanjutnya. 🙂
Posting Komentar untuk "Cara Mudah membuat galery Gambar Pixbay "
Silahkan berkomentar sesuai ketentuan layanan dan kebijakan privasi blog kami