Membuat Carousel Dengan Bootstrap CDN

dokumen-dokumen yang mirip
Cara Membuat Halaman Form Dengan Bootstrap CDN

Membuat Blockquote Di Wordpress

Cara Mengembalikan Yang Sudah Terkirim di Gmail

WELCOME MESSAGE WE STARTED AT. 10 March 2016 dimana komunitas ini didirikan

BAB II TINJAUAN PUSTAKA DAN DASAR TEORI. autentikasi dan otorisasi user. Aplikasi belum menggunakan teknologi responsive

PELATIHAN PHP ALUMNI DAN CALON ALUMNI INSTITUT BISNIS DAN INFORMATIKA STIKOM SURABAYA. By: Julianto Lemantara, S,Kom., M.Eng

MEMBUAT LAYOUT DENGAN CONTAINER BOOTSTRAP

Menginstal Fitur Aplikasi Marshmallow Di Kitkat & Lollipop

PEMODELAN RESPONSIVE WEB MENGGUNAKAN FOUNDATION FRAMEWORK DALAM PENGEMBANGAN PERANGKAT LUNAK BERBASIS PERANGKAT BERGERAK

Membuat Chating Messager Di Android

Mengenal Web Dinamis dan Statis Serta Perbedaanya

BAB I PENDAHULUAN 1.1 Latar Belakang

Object-Oriented Programming Sederhana Dengan PHP

BAB II TINJAUAN PUSTAKA. Berkaca dari pesatnya laju perkembangan teknologi. modern, sistem penjadwalan guru di sebuah sekolah akan lebih

Cara Hosting CSS Blogger Menggunakan Google Drive

BAB II TINJAUAN PUSTAKA DAN DASAR TEORI

BAB I PENDAHULUAN. 1.1 Latar Belakang

Implementasi Framework Twitter Bootstrap Dalam Perancangan Aplikasi Penerimaan Mahasiswa Baru Berbasis Web

Prosedur Menjalankan Program

Elearning Perbanas Panduan Mahasiswa

MENGGUNAKAN APLIKASI TELEGRAM DI BERBAGAI PERANGKAT

BAB I PENDAHULUAN. Sistem berbasis web dipilih karena beberapa kelebihan antara lain lebih

Mahasiswa memahami Pengertian, fungsi, aplikasi untuk menjalankan JavaScript, cara menjalankan kode, cara memasukkan kode JavaScript ke dalam HTML

BAB IV KONSEP PERANCANGAN

BAB II TINJAUAN PUSTAKA DAN DASAR TEORI

BAB I PENDAHULUAN. Dewasa ini teknologi telah berkembang dengan sangat pesat, banyaknya layanan jasa maupun hanya sekedar mendapatkan

BAB IV IMPLEMENTASI DAN EVALUASI. implementasi desain dalam bentuk kode-kode program. Kemudian di tahap ini

BAB IV HASIL DAN PEMBAHASAN

INSTALASI IONIC FRAMEWORK DI WINDOWS 7 UNTUK PENGEMBANGAN APLIKASI MOBILE HYBRID

Menggabungkan Banyak File PDF Menjadi Satu File PDF

BAB III LANDASAN TEORI. pengembang untuk membuat sebuah aplikasi web. Dilengkapibanyak library dan

Penerapan Konsep One Layer Website Berbasis JavaScript

Implementasi Bootstrap Pada Sistem Informasi Perpustakaan Untuk Meningkatkan Pelayanan Mahasiswa Pada Perguruan Tinggi Raharja

PRAKTIKUM PEMROGRAMAN WEB MODUL 7 TWITTER BOOTSTRAP

Cara Mengganti Template Blog

IV KONSEP PERANCANGAN

BAB III LANDASAN TEORI

Mengenal dan Mengedit HTML

How to Use Your Digital Signage?

menggunakan framework codeigniter maka permasalahan perkembangan perangkat dan variasi layar terpecahkan oleh teknologi web responsive design selain i

PROPOSAL PENAWARAN PEMBUATAN WEBSITE COMPANY PROFILE SAHABAT MEDIATAMA SISTEM

BAB II KAJIAN PUSTAKA

Persiapan. File latihan.rar diekstrak. Contoh apabila Bahan diekstrak di d:\

Cara Menggunakan Google Maps Offline Di Handphone Android

BAB II TINJAUAN PUSTAKA DAN DASAR TEORI. penelitian terutama dari penelitian-penelitian sebelumnya.

Cara Membuat Blog. Nuraini Setyowati. Abstrak. Pendahuluan.

Tutorial membuat Blog dengan Blogspot

Cara Membuat Website. Heni Handayani. Abstrak. Pendahuluan. ::

Kode-Kode Yang Tersembunyi Dalam Smartphone Android

Cara Meng-install Web Server Lokal (xampp-win )

Trik Mudah Membuat CMS Website dari Nol

BAB I PENDAHULUAN 1.1. Latar Belakang Masalah

MEMBUAT WEB DENGAN WEBNODE

Integrasi e-krs Dan e-khs Pada SIAMIK Politeknik Nasional Denpasar

Pembuatan Aplikasi Komunitas Organisasi. Mahasiswa Universitas Surabaya. Berbasis Android

TUTORIAL MEMBUAT SNIPPET TAB BOOTSNIPP UNTUK BOOTSTRAP

Perkenalan Font Awesome untuk Pure CSS dan Bootstap. [Part 1]

Membuat UI Cantik Dan Serasi Di Android Menggunakan Palette Library Material Design

CMS Content Management System

[SANGAT MUDAH] Cara Membuat Slide Show dengan Bootstrap 3

Cara membuat HTML dasar

EBOOK TUTORIAL PANDUAN PENGGUNAAN. Versi 1.1

Emulator Android Di Linux

BAB I PENDAHULUAN 1.1 Latar Belakang Masalah

TUGAS AKHIR ANALISIS KINERJA CONTENT DELIVERY NETWORK YANG MENGGUNAKAN LOAD BALANCER

Pengenalan Script. Definisi HTML

C. Ms Powerpoint D. Notepad E. Ms Acces

BAB I PENDAHULUAN. kemampuan dan kemudahan teknologi yang berbasis internet di seluruh pelosok

CARA MUDAH COPY-PASTE WEBSITE/BLOG YANG DIPROTEC ATAU TIDAK BISA DICOPY-PASTE

MANUAL APLIKASI PENDATAAN GURU SMA/SMK UNTUK GURU. 1 H a l a m a n. Pembangunan Aplikasi Sistem Informasi Kepegawaian Guru

BAB II TINJAUAN PUSTAKA DAN DASAR TEORI. Tabel 2.1 Perbandingan Penelitian. Responsive Web Layout. Sistem Absensi Karyawan Online

Y o u C a n S e e, Y o u C a n E a t, Y o u C a n B u y

Pemrograman Web Week 4. Team Teaching

BAB 4 IMPLEMENTASI DAN EVALUASI. Dalam mengimplementasikan sistem yang dijalankan, maka diperlukan beberapa

[SANGAT MUDAH] Cara Membuat Tab dengan Bootstrap

Jurnal Informatika Mulawarman Vol. 7 No. 1 September

E-commerce Development Berbasis Wordpress

MENYISIPKAN VIDEO YOUTUBE KE WEB DENGAN HTML5

BAB I PENDAHULUAN. sehari-hari seiring dengan perkembangan teknologi aksesnya pada perangkat

Posting, Edit dan Hapus Berita

KAJIAN 3 Web Responsive

BAB 2 TINJAUAN PUSTAKA DAN DASAR TEORI

Practical Web Development Using CMS (Joomla)

Mengenal & Menggunakan Google Drive

CARA MENGHILANGKAN IKLAN YANG MUNCUL DI DESKTOP

MODUL PERTEMUAN 2 BLOGGING. Mata kuliah : Pengantar Komputer dan Software

USER MANUAL AP2LP Ver 2.0 (APLIKASI PEMERIKSAAN DAN PENGGANTIAN LISTRIK PINTAR)

TINJAUAN PUSTAKA DAN DASAR TEORI. PSB ini sudah pernah dilakukan tahun sebelunya oleh panitia PSB SMK

INSTAGRAM CAROUSEL, FITUR TERBARU DARI INSTAGRAM

KEMENTERIAN KEHUTANAN DIREKTORAT JENDERAL PLANOLOGI KEHUTANAN BUKU PETUNJUK PENGGUNAAN APLIKASI WEBGIS KEMENTERIAN KEHUTANAN

Blog: Belajar Weblog. Membuat Blog dengan Cepat dan Mudah. Tri Goesema Putra S, M.Pd

Membuat Toko Online dengan Teknik OOP, MVC, dan AJAX

Mengembangkan Website Berbasis Wordpress

Deretan Framework Javascript yang sering Digunakan

PANDUAN PEMBUATAN KONTEN E LEARNING LENGKAP

Transkripsi:

Membuat Carousel Dengan Bootstrap CDN Fitria Arnita 23@gmail.com 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 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.

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 <head> dan </head> Script ini wajib ada

Bagian Body Selipkan Script ini diantara <body> dan </body>

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

Tampak diperkecil

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