Membuat Carousel Dengan Bootstrap CDN Fitria Arnita
[email protected]
Abstrak Bootstrap adalah framework CSS yang dibuat khusus para designer web. Bootstrap digunakan untuk membuat sebuah templates web atau blog menjadi responsive, di dalam bootstrap bisa menggunakan bootstrap CDN tanpa harus mendownload aplikasinya. CDN sendiri itu adalah content delivery network yaitu sebuah sistem jaringan server untuk mendistribusikan konten yang ada dalam sebuah aplikasi/web ke berbagai pengakses/pengguna di berbagai belahan dunia agar data/konten yang dikirim diterima lebih cepat. carousel adalah sebuah slider atau perpindahan dalam satu halaman web, biasanya yang terdapat pada carousel adalah gambar. sekarang banyak website - website yang sudah menggunakan carousel. carousel biasanya diletakkan pada halaman paling depan untuk menarik perhatian para pengunjung. membuat carousel secara manual memang sangat sulit. namun, tidak usah khawatir dengan hal tersebut. kita dapat menggunakan framework bootstrap yang sudah disediakan untuk membantu atau mempermudah kita dalam melakukan pendesignan halaman web. Kata Kunci: Bootstrap, CDN, Carousel
Lisensi Dokumen: Copyright © 2008-2017 ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
Pendahuluan Bootstrap adalah front-end framework yang solek, bagus dan luar biasa yang mengedapankan tampilan untuk mobile device (Handphone, smartphone dll.) guna mempercepat dan mempermudah pengembangan website. Bootstrap menyediakan HTML, CSS dan Javascript siap pakai dan mudah untuk dikembangkan. Bootstrap merupakan framework untuk membangun desain web secara responsif. Artinya, tampilan web yang dibuat oleh bootstrap akan menyesuaikan ukuran layar dari browser yang kita gunakan baik di desktop, tablet ataupun mobile device. Fitur ini bisa diaktifkan ataupun dinon-aktifkan sesuai dengan keinginan kita sendiri. CDN kepanjangan dari Content Delivery Network atau Content Distribution Network atau dalam bahasa indonesia disebut Jaringan Pendistribusian Konten. CDN adalah sebuah sistem jaringan server untuk mendistribusikan konten yang ada dalam sebuah aplikasi/web ke berbagai pengakses/pengguna di berbagai belahan dunia agar data/konten yang dikirim diterima lebih cepat. Carousel atau sering juga disebut slideshow merupakan penampilanpenampilan yg diberi efek slide. sangat banyak website atau situs yang menggunakan slideshow/carousel pada halaman web mereka untuk mempromosikan sebuah produk unggulan atau dengan tujuan lainnya. biasanya carousel di letakkan pada halaman depan sebuah web dengan desain yang berbagai macam dan tentunya menarik perhatian para pengunjung web. Sangat sulit membuat carousel dengan cara manual. tetapi menggunakan bootstrap akan sangt mudah membuat carousel karena bootstrap sudah menyediakan class fasilitas carousel ini.
Lisensi Dokumen: Copyright © 2008-2017 ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
Pembahasan Cara membuatnya tidak terlalu sulit kok, kita hanya membutuhkan, jquery dan bootstrap, jadi kalau dalam template atau blog yang sekarang kalian pakai itu sudah ada bootstrap atau jquery yang saya berikan dibawah ini : 1. Siapkan beberapa file gambar yang akan dijadikan sebagai gambar yang akan muncul pada carousel. 2. Buka Notepad++ atau Notepad, saya memakai notepad++ untuk mempermudah 3. Silahkan ikuti script dibawah ini Bagian Head Selipkan Script ini diantara dan fitriaarnita
Script ini wajib ada
Lisensi Dokumen: Copyright © 2008-2017 ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
Bagian Body Selipkan Script ini diantara dan fitriaarnita
fitriaarnita
Lisensi Dokumen: Copyright © 2008-2017 ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
Selipkan Script ini untuk geser kanan kiri fitriaarnita
4. Klik save dengan nama file bebas dan tipe filenya html contoh lat1.html 5. Buka di browser dan hasilnya akan seperti ini Tampak diperbesar
fitriaarnita
Lisensi Dokumen: Copyright © 2008-2017 ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
Tampak diperkecil
fitriaarnita
Lisensi Dokumen: Copyright © 2008-2017 ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
Penutup Bootstrap merupakan framework gratis front-end untuk pengembangan web lebih cepat dan lebih mudah, bootstrap termasuk HTML dan CSS berdasarkan desain template untuk tipografi, bentuk, tombol, tabel, navigasi, kata modal, komidi putar gambar dan banyak plugin JavaScript opsional lainnya, serta bootstrap juga memberikan Anda kemampuan untuk dengan mudah membuat desain responsif. CDN adalah sebuah sistem jaringan server untuk mendistribusikan konten yang ada dalam sebuah aplikasi/web ke berbagai pengakses/pengguna di berbagai belahan dunia agar data/konten yang dikirim diterima lebih cepat. Carousel atau sering juga disebut slideshow merupakan penampilan-penampilan yg diberi efek slide. sangat banyak website atau situs yang menggunakan slideshow/carousel pada halaman web mereka untuk mempromosikan sebuah produk unggulan atau dengan tujuan lainnya. biasanya carousel di letakkan pada halaman depan sebuah web dengan desain yang berbagai macam dan tentunya menarik perhatian para pengunjung web. Sangat sulit membuat carousel dengan cara manual. tetapi menggunakan bootstrap akan sangt mudah membuat carousel karena bootstrap sudah menyediakan class fasilitas carousel ini.
Lisensi Dokumen: Copyright © 2008-2017 ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org
Referensi 1. Pengalaman Pribadi
Biografi hai hai nama saya Fitria Arnita, saat ini saya sibuk kuliah dan bekerja. Saya kuliah di salah satu Perguruan Tinggi ilmu komputer di Tangerang angkatan 2014 sampai saat ini. Rumah saya berada di daerah Kabupaten Tangerang beralamat Dasana Indah. Kalo dengan hobi, saya lebih menyukai anime (kartun jepang), saya sampai saat ini belum pernah mengikuti organisasi, saya jurusan Sistem Informasi dan konsentrasinya Sistem Informasi Manajemen, memang saya tidak terlalu mengerti tentang IT tetapi saya belajar untuk menggelutinya. Terima kasih ya semoga bermanfaat
Lisensi Dokumen: Copyright © 2008-2017 ilmuti.org Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org