Membuat Carousel Dengan Bootstrap CDN -...

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

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





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 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.





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





Bagian Body

Selipkan Script ini diantara dan

fitriaarnita

fitriaarnita





Selipkan Script ini untuk geser kanan kiri

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

fitriaarnita





Tampak diperkecil

fitriaarnita





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.





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

Membuat Carousel Dengan Bootstrap CDN -...

Documents

Transcript of Membuat Carousel Dengan Bootstrap CDN -...