SImple Pop-Up Modal dengan CSS3 dan Jquery

Ukuran: px
Mulai penontonan dengan halaman:

Download "SImple Pop-Up Modal dengan CSS3 dan Jquery"

Transkripsi

1

2 SImple Pop-Up Modal dengan CSS3 dan Jquery Oleh: d-newbie Assalamualaikum wr.wb. bertemu lagi dengan saya, kali ini saya akan menulis tutorial tentang pop-up, apa itu pop-up? Kalo menurut wikipedia pop-up ini adalah iklan yang melayang tiba-tiba, kalau dalam boostrap itu namanya modal, dan kalo menurut saya sediri pop-up itu div melayang. Hehe. Tersera... Assalamualaikum wr.wb. bertemu lagi dengan saya, kali ini saya akan menulis tutorial tentang pop-up, apa itu pop-up? Kalo menurut wikipedia pop-up ini adalah iklan yang melayang tiba-tiba, kalau dalam boostrap itu namanya modal, dan kalo menurut saya sediri pop-up itu div melayang. Hehe. Terserah apapun pengertiannya saya yakin pambaca sudah paham apa sebenarnya pop-up, dan saya yakin anda sudah pernah melihatnya. ok langsung ke tutorial. Buat HTML dulu. <!doctype html> <html> <meta charset='utf-8'> <head> <title> Pop-Up </title> <script src='jquery min.js'></script> </head> <body> //div overlay adalah div warna hitam transparan untuk menutupi content //saat pop-up muncul <div class='overlay'> </div> //nah ini dia pop-upnya <div class='pop-up'> <h2> Pop-Up Jquery CSS3 jagocoding </h2> class='tutup'> class='bangkit'> </body> </div> <input type='button' value='tutup' <input type='button' value='keluar Pop-Up'

3 </html> Kemudian tambahkan css. <style> * { margin:0; padding:0;.overlay { height:100%; width:100%; opacity:0.8; z-index:101; position:fixed; display:none;.bangkit{ margin-left:10px; margin-top:10px; border:1px solid #000; cursor:pointer; height:30px; border-radius:5px; width:100px; font-size:15px; color:white; font-family:times new roman;.tutup { float:right; border:1px solid #000; cursor:pointer; height:30px; border-radius:5px; width:100px; position:absolute; bottom:2px; right:2px; font-family:times new roman; font-size:15px; color:white;.bangkit:hover,.tutup:hover{ box-shadow:0px 0px 10px #000;

4 background-color:white; color:#000;.pop-up { height:200px; width:400px; border:4px solid #aaf200;; z-index:999; position:fixed; margin-right:auto; margin-left:auto; display:none; top:100px; left:0; right:0; box-shadow:0 0 15px #000; border-radius:10px; background-color:#fffff0; text-align:center; </style> Berikut penampakannya. tombol diatas belum berfungsi karna kita belum menambahkan code jquerynya. berikut jquerynya <script> //apabila halaman sudah diload secara keseluruhan $(document).ready(function(){ //apabila tombol ber class= bangkit diklik (dalam hal ini tombol Keluar Pop-Up ) $('.bangkit').click(function(){ //maka div ber class= overlay yang tadinya hiden, akan tampil $('.overlay').fadein('slow'); //nah ini baru class= pop-up nya tampil. $('.pop-up').fadein('slow'); ); ); </script>

5 kita coba jalankan. dan berikut hasilnya. selanjutnya code untuk tombol "Tutup". //apabila tombol ber class= tutup diklik $('.tutup').click(function(){ //sembunyikan lagi pop-upnya $('.pop-up').fadeout(2000); //sembunyikan lagi div overlaynya $('.overlay').fadeout(2000); ); Kemudian coba, dan klik tombol "Tutup" maka pop-up akan hilang seperti sedia kala. Ok sekian tutorial singkat dari saya. FULL CODE <!doctype html> <html> <meta charset='utf-8'> <head> <title> Pop-Up </title> <script src='jquery min.js'></script> <style> * { margin:0; padding:0;.overlay { height:100%; width:100%; opacity:0.8; z-index:101; position:fixed; display:none;.bangkit{ margin-left:10px;

6 margin-top:10px; border:1px solid #000; cursor:pointer; height:30px; border-radius:5px; width:100px; font-size:15px; color:white; font-family:times new roman;.tutup { float:right; border:1px solid #000; cursor:pointer; height:30px; border-radius:5px; width:100px; position:absolute; bottom:2px; right:2px; font-family:times new roman; font-size:15px; color:white;.bangkit:hover,.tutup:hover{ box-shadow:0px 0px 10px #000; background-color:white; color:#000;.pop-up { height:200px; width:400px; border:4px solid #aaf200;; z-index:999; position:fixed; margin-right:auto; margin-left:auto; display:none; top:100px; left:0; right:0; box-shadow:0 0 15px #000; border-radius:10px; background-color:#fffff0; text-align:center; </style> </head> <body>

7 content //div overlay adalah div warna hitam transparan untuk menutupi //saat pop-up muncul <div class='overlay'> </div> //nah ini dia pop-upnya <div class='pop-up'> <h2> Pop-Up Jquery CSS3 jagocoding </h2> <input type='button' value='tutup' class='tutup'> </div> <script> $(document).ready(function(){ $('.bangkit').click(function(){ $('.overlay').fadein('slow'); $('.pop-up').fadein('slow'); ); $('.tutup').click(function(){ $('.pop-up').fadeout(2000); $('.overlay').fadeout(2000); ); ); </script> <input type='button' value='keluar Pop-Up' class='bangkit'> </body> </html> semoga bermanfaat. Trima kasih. Wassalamualaikum wr.wb. Tentang Penulis

8 d-newbie Adalah seorang ninja dari Coding Gakure, Menguasai jurus HTML no jutsu, CSS no jutsu, Javascript no jutsu, PHP no jutsu, dan MySQL no

9 jutsu, jurus andalan adalah KageLooping no jutsu, yg bisa memperbanyak output sekali coding, ninja yang berasal dari TIM W3, dan diasuh oleh petapa genit yang suka menjilat-jilat situs yaitu google.com. :D #xixixi

Membuat Web Chatting dengan Ajax Jquery, PHP, dan Bootstrap [Part 2]

Membuat Web Chatting dengan Ajax Jquery, PHP, dan Bootstrap [Part 2] Membuat Web Chatting dengan Ajax Jquery, PHP, dan Bootstrap 2.3.2 [Part 2] Oleh: d-newbie pada tutorial sebelumnya kita sudah membuat 2 modal, yaitu modal "Masuk" dan modal "Daftar" dan pada tahap ini

Lebih terperinci

Membuat Form Dinamis dengan HTML & Javascript.

Membuat Form Dinamis dengan HTML & Javascript. Membuat Form Dinamis dengan HTML & Javascript. Oleh: d-newbie Assalamualaikum wr.wb. Form tentunya sudah tidak asing lagi bagi para developer web, element html yg satu ini seolah-olah merupakan element

Lebih terperinci

Limitasi Text Input dengan Javascript

Limitasi Text Input dengan Javascript Limitasi Text Input dengan Javascript Oleh: d-newbie Assalamualaikum. wr.wb.sampai jumpa kembali pada kesempatan kali ini saya akan menulis tutorial tentang limitasi inputan dengan menggunakan javascript,

Lebih terperinci

Membuat Toko Online dengan Ajax Jquery [Part 4]

Membuat Toko Online dengan Ajax Jquery [Part 4] Membuat Toko Online dengan Ajax Jquery [Part 4] Oleh: d-newbie halo teman-teman ketemu lagi, masih ditutorial Membuat Toko Online dengan Ajax Jquery kali ini dibagian 4 [Part 4], tutorial kali ini merupakan

Lebih terperinci

CSS3 Attribute Selector

CSS3 Attribute Selector CSS3 Attribute Selector Oleh: d-newbie Assalamualaikum wr. wb. Attribute selector memungkingkan kita menyeleksi element html dengan menggunakan perpaduan antara attribute dan value, hal ini bisa menjadi

Lebih terperinci

Membuat Desain Custom Input (Checkbox + Radio Button) pada Form

Membuat Desain Custom Input (Checkbox + Radio Button) pada Form Membuat Desain Custom Input (Checkbox + Radio Button) pada Form Oleh: Christian Rosandhy Bosen lah ya liat checkbox dan radio button di HTML yang gitu-gitu aja? Di tutorial kali ini kita akan belajar mendesainnya

Lebih terperinci

Masih tentang bagaimana membuat layout dengan CSS, kita lanjutkan untuk membuat layout yang lain. Berikut ini adalah desain layout yang akan kita buat

Masih tentang bagaimana membuat layout dengan CSS, kita lanjutkan untuk membuat layout yang lain. Berikut ini adalah desain layout yang akan kita buat Contoh ke dua layout menggunakan CSS Masih tentang bagaimana membuat layout dengan CSS, kita lanjutkan untuk membuat layout yang lain. Berikut ini adalah desain layout yang akan kita buat HEADER ISI NAVIGASI

Lebih terperinci

Publish: 7 Juni 2012 Author & Copyright: Johan Status: FREE tutorial

Publish: 7 Juni 2012 Author & Copyright: Johan Status: FREE tutorial Kumpulan Tutorial dan belajar ilmu website mulai dari hosting dan coding seperti belajar HTML, CSS, Javascript, Javascript, JQuery, ASP.Net hingga SEO dan Desain web dengan Dreamweaver dan Photoshop untuk

Lebih terperinci

MODUL PRATIKUM 04B PEMROGRAMAN BERBASIS WEB (CCP119)

MODUL PRATIKUM 04B PEMROGRAMAN BERBASIS WEB (CCP119) MODUL PRATIKUM 04B PEMROGRAMAN BERBASIS WEB (CCP119) Disusun oleh : KARTINI, SKom.,MMSI LABORATORIUM KOMPUTER FAKULTAS ILMU KOMPUTER UNIVERSITAS ESA UNGGUL MODUL PRATIKUM PBW 04B CSS : Layout dan Posisi

Lebih terperinci

Membuat Display Produk dalam Layout Box 4 Kolom

Membuat Display Produk dalam Layout Box 4 Kolom Membuat Display Produk dalam Layout Box 4 Kolom Oleh: Debrian Ruhut Saragih Selamat pagi Sobat sekalian, saat ini kita banyak menemukan toko online bertebaran di Internet. Saya sering memperhatikan bagaimana

Lebih terperinci

Membuat Tabel Responsive dengan CSS

Membuat Tabel Responsive dengan CSS Membuat Tabel Responsive dengan CSS Oleh: Christian Rosandhy CSS Layout Responsive udah jadi salah satu kebutuhan wajib ya dalam pembuatan website kita.. Sama seperti layout, Table juga perlu tampilan

Lebih terperinci

Membuat Toko Online dengan Ajax Jquery [Part 3]

Membuat Toko Online dengan Ajax Jquery [Part 3] Membuat Toko Online dengan Ajax Jquery [Part 3] Oleh: d-newbie  ok masih ditutorial Membuat Toko Online dengan Ajax Jquery kali ini dibagian 3 [Part 3], ini merupakan tutorial lanjutan dari [Part

Lebih terperinci

Pencarian data dengan PDO (PHP Data Objek)

Pencarian data dengan PDO (PHP Data Objek) Pencarian data dengan PDO (PHP Data Objek) Oleh: d-newbie Assalamualaikum wr. wb. Tutorial kali ini merupakan kelanjutan dari BAB PDO (PHP Data Objek) yang sempat terlupakan, untuk lebih jelasnya tentang

Lebih terperinci

Menampilkan user online seperti di obrolan step by step

Menampilkan user online seperti di obrolan step by step Menampilkan user online seperti di obrolan step by step Oleh: lukman hakim Salam hangat temen2 Jagocoding.com, Berikut saya akan berbagi tutorial sederhana yakni bagaimana cara menampilkan user online

Lebih terperinci

Cara Memasukan Font Baru Ke Dalam Web Menggunakan CSS

Cara Memasukan Font Baru Ke Dalam Web Menggunakan CSS Cara Memasukan Font Baru Ke Dalam Web Menggunakan CSS Oleh: Rahmat Menghias blog/web boleh saja tetapi tentunya juga harus memperhatikan kenyamanan visitor yang akan berkunjung ke web anda. Oleh sebab

Lebih terperinci

Image Slider 3D. Oleh: Anthonius

Image Slider 3D. Oleh: Anthonius Image Slider 3D Oleh: Anthonius Kali ini saya akan berbagi cara membuat image slider dengan tampilan 3D. Cara ini sangat efisien karena hanya menggunakan sedikit script. Untuk CSS nya agan bisa copy langsung

Lebih terperinci

TUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif

TUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif TUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif www.ilmuwebsite.com Bagian 7. Menggunakan JQuery Traversing

Lebih terperinci

Membuat Tooltip Sendiri dengan CSS

Membuat Tooltip Sendiri dengan CSS Membuat Tooltip Sendiri dengan CSS Oleh: Christian Rosandhy Terkadang liat tooltip standar bawaan browser itu terlalu membosankan ya,, disini kita belajar membuat tooltip tersebut dengan bantuan CSS supaya

Lebih terperinci

Memanfaatkan CSS Animasi [Part 2]

Memanfaatkan CSS Animasi [Part 2] Memanfaatkan CSS Animasi [Part 2] Oleh: Christian Rosandhy Ini adalah tutorial lanjutan dari Part 1,, Kali ini kita akan belajar menggunakan CSS 3 Animation untuk membuat animasi yang jauh lebih dinamis

Lebih terperinci

Hover Putar CSS3. Oleh: Mohammad Nur Huda

Hover Putar CSS3. Oleh: Mohammad Nur Huda Hover Putar CSS3 Oleh: Mohammad Nur Huda Assallamualaikum... Haha... Sebenarnya ini adalah tulisan pertama saya pada situs berbagi ilmu ini :-). Pada kali ini kita akan membuat efek hover memutarkan objek

Lebih terperinci

BAB V DESAIN WEB CSS

BAB V DESAIN WEB CSS BAB V DESAIN WEB CSS A. KOMPETENSI DASAR Memahami konsep dan strategi desain web yang rapi berbasis HTML dan CSS/CSS3. Mampu mengoptimalkan fitur-fitur CSS dalam desain web. Mampu memanfaatkan pendekatan

Lebih terperinci

Membuat Responsive dan Fleksibel Image Gallery dengan JQuery Fleximage

Membuat Responsive dan Fleksibel Image Gallery dengan JQuery Fleximage Membuat Responsive dan Fleksibel Image Gallery dengan JQuery Fleximage Oleh: Christian Rosandhy Siapa bilang bikin galeri gambar yang responsive itu susah? Di tutorial kali ini kita akan belajar membuat

Lebih terperinci

TUTORIAL APLIKASI WEB Dengan PHP dan MySQL

TUTORIAL APLIKASI WEB Dengan PHP dan MySQL TUTORIAL APLIKASI WEB Dengan PHP dan MySQL Tutorial Aplikasi Web Dengan PHP dan MySQL A. DASAR TEORI PHP merpakan bahasa pemrograman yang sangat popular dalam pengembangan website dewasa ini, pada dasarnya,

Lebih terperinci

TUTORIAL HTML CSS Langkah Tepat menjadi Web Designer Handal, menguasai HTML & CSS, jalan membuat halaman website cantik dan menarik

TUTORIAL HTML CSS Langkah Tepat menjadi Web Designer Handal, menguasai HTML & CSS, jalan membuat halaman website cantik dan menarik TUTORIAL HTML CSS Langkah Tepat menjadi Web Designer Handal, menguasai HTML & CSS, jalan membuat halaman website cantik dan menarik www.ilmuwebsite.com Bagian 19. Membuat Halaman Website Minimalis 1 Bagian

Lebih terperinci

buat Lightbox mu sendiri dengan jquery

buat Lightbox mu sendiri dengan jquery buat Lightbox mu sendiri dengan jquery Oleh: putra surya herlambang assalamualikum wr wb. apakah kamu pernah melihat gambar pada website yang ketika kamu klik lalu akan muncul suatu kotak besar yang juga

Lebih terperinci

Membuat Simpel Site HTML Layout Menggunakan Tag div

Membuat Simpel Site HTML Layout Menggunakan Tag div Membuat Simpel Site HTML Layout Menggunakan Tag div Oleh: Yudhistira Bayu W Ya, setelah saya memberikan Tutorial Tutorial Simpel HTML pada sebelumnya, Kali Ini saya akan memberikan Cara Membuat Simpel

Lebih terperinci

Membuat Login Pop Up Dengan JqueryUI

Membuat Login Pop Up Dengan JqueryUI Membuat Login Pop Up Dengan JqueryUI Oleh: Dadan Berawal dari maraknya tayangan goyang di telivisi. Terinspirasi juga untuk membuat efek goyang pada website saya. Hehe kagak nyambung nih ilustrasi ceritanya

Lebih terperinci

Langkah Cara Membuat Form Login Menggunakan PHP dan MySQL Langkah 1: Membuat Tabel MySQL User/Pengguna

Langkah Cara Membuat Form Login Menggunakan PHP dan MySQL Langkah 1: Membuat Tabel MySQL User/Pengguna Dalam tutorial cara membuat form login dengan PHP dan MySQL, kita akan belajar membuat halaman login untuk website dengan menggunakan PHP Session. Tutorial ini merupakan tutorial tingkat dasar, sederhana

Lebih terperinci

BAB 6 CSS 6.1. CSS SYNTAX. Syntax CSS memiliki dua bagian utama yaitu, selector dan deklasi.

BAB 6 CSS 6.1. CSS SYNTAX. Syntax CSS memiliki dua bagian utama yaitu, selector dan deklasi. BAB 6 CSS 6.1. CSS SYNTAX Syntax CSS memiliki dua bagian utama yaitu, selector dan deklasi. Selector berupa tag HTML dan pendeklarasian Class dan Id. Selector berfungsi untuk menentukan bagian mana pada

Lebih terperinci

KAJIAN 3 Web Responsive

KAJIAN 3 Web Responsive KAJIAN 3 Web Responsive Modul 10 Pengantar Web Responsive Modul 11 Perancangan Web Responsive 73 KAJIAN 3 Web Responsive MODUL 10 Pengantar Web Responsive 10.1. TUJUAN Mengetahui dan memahami dasar perancangan

Lebih terperinci

Analisa Pada percobaan ini, menunjukan flow dalam kondisi normal atau sesuai dengan default dan sifat masing-masing tag HTML-nya.

Analisa Pada percobaan ini, menunjukan flow dalam kondisi normal atau sesuai dengan default dan sifat masing-masing tag HTML-nya. TUGAS CSS LAYAOUT PRAKTIKUM 6 1. Percobaan 1 Pada percobaan ini, menunjukan flow dalam kondisi normal atau sesuai dengan default dan sifat masing-masing tag HTML-nya. 2. Percobaan2 Position: relative;

Lebih terperinci

CSS. inheritance (pewarisan)

CSS. inheritance (pewarisan) {CSS} lanjut CSS inheritance (pewarisan) sebuah elemen mewarisi beberapa nilai dari properti yang dimiliki oleh elemen parent-nya http://www.w3.org/tr/css21/cascade.html#inheritance http://www.slideshare.net/diniscorreia/htmlcss-3-introduction-to-css

Lebih terperinci

TUTORIAL CODEIGNITER Langkah Tepat menjadi Web Developer Handal, menguasai CodeIgniter, jalan membuat aplikasi berbasis website lebih mudah

TUTORIAL CODEIGNITER Langkah Tepat menjadi Web Developer Handal, menguasai CodeIgniter, jalan membuat aplikasi berbasis website lebih mudah TUTORIAL CODEIGNITER Langkah Tepat menjadi Web Developer Handal, menguasai CodeIgniter, jalan membuat aplikasi berbasis website lebih mudah www.ilmuwebsite.com Bagian 7. Membuat Data Pagination Menggunakan

Lebih terperinci

Secara garis besar, terdapat 3 cara menginput kode CSS, yaitu metode Inline Style, Internal Style Sheets, dan External Style Sheets.

Secara garis besar, terdapat 3 cara menginput kode CSS, yaitu metode Inline Style, Internal Style Sheets, dan External Style Sheets. Sebagaimana telah dipelajari pada saat pembahasan tentang HTML (pada artikel tutorial belajar HTML), HTML pada dasarnya adalah kumpulan dari tag-tag yang disusun sehingga memiliki bagian-bagian tertentu,

Lebih terperinci

TUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif

TUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif TUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif www.ilmuwebsite.com Bagian 6. Menggunakan JQuery Effect 1 Bagian

Lebih terperinci

Membuat Layout Footer Menempel ke Bawah

Membuat Layout Footer Menempel ke Bawah Membuat Layout Footer Menempel ke Bawah Oleh: Christian Rosandhy Kali ini saya mau share lagi salah satu layout wajib buat website, yaitu layout footer menempel kebawah. Di tutorial kali ini kita akan

Lebih terperinci

Tutorial Membuat Layout Website Sederhana dengan HTML dan CSS

Tutorial Membuat Layout Website Sederhana dengan HTML dan CSS Tutorial Membuat Layout Website Sederhana dengan HTML dan CSS Oleh: I Wayan Dharmana Halo kawan, apa kabar? Semoga di awal bulan Ramadhan ini kawan pembaca tetap semangat untuk mencari ilmu. Nah, pada

Lebih terperinci

Membuat Chatbox Sederhana dengan Ajax jquery dan PHP PDO

Membuat Chatbox Sederhana dengan Ajax jquery dan PHP PDO Membuat Chatbox Sederhana dengan Ajax jquery dan PHP PDO Oleh: Ananda Mukhammad Ikhsan Chatbox adalah fitur yang cukup penting di website berbasis sosial media. Nah, kali ini saya akan memberikan tutorial

Lebih terperinci

CSS Eksternal. Instruktur: Arif Nurwidyantoro

CSS Eksternal. Instruktur: Arif Nurwidyantoro CSS Eksternal Instruktur: Arif Nurwidyantoro Definisi CSS, selain diletakkan dalam file yang sama dengan file HTML, dapat juga diletakkan pada file terpisah. Pernyataan untuk menyambungkan file HTML dengan

Lebih terperinci

Tutorial Lengkap Memahami CSS Position

Tutorial Lengkap Memahami CSS Position Tutorial Lengkap Memahami CSS Position Oleh: Christian Rosandhy Salah satu property CSS yang masih bisa bikin kita bingung dan salah langkah itu adalah POSITION. Kapan kita harus pakai position static,

Lebih terperinci

IKG3A3 / Software Project II

IKG3A3 / Software Project II IKG3A3 / Software Project II Mahmud Imrona, M.T. Izzatul Ummah, M.T. Kelompok Keahlian Algoritma dan Komputasi LECTURE NOTE WEEK 2 1 8/25/2015 WEEK 2 HTML 2 8/25/2015 IKG3A3 - Software Project II HTML

Lebih terperinci

LEMBAR KERJA PRAKTIKUM. - JavaScript Alert yang ditampilkan browser saat membuka halaman home/index.html :

LEMBAR KERJA PRAKTIKUM. - JavaScript Alert yang ditampilkan browser saat membuka halaman home/index.html : LEMBAR KERJA PRAKTIKUM Nim : 13-1401-164 Hari / Tgl TTD Asisten Nama Kelas : Muh. Idrus : DK-13 Mata kuliah : Pemrograman Web I Materi : JavaScript - JavaScript Alert yang ditampilkan browser saat membuka

Lebih terperinci

NAMA : KELAS : TANGGAL PRAKTIKUM : A. TUJUAN 1. Siswa dapat mengenal, memahami serta dapat melakukan pengaturan-pengaturan border dengan CSS.

NAMA : KELAS : TANGGAL PRAKTIKUM : A. TUJUAN 1. Siswa dapat mengenal, memahami serta dapat melakukan pengaturan-pengaturan border dengan CSS. PRAKTIKUM : Borders NAMA : KELAS : TANGGAL PRAKTIKUM : A. TUJUAN 1. Siswa dapat mengenal, memahami serta dapat melakukan pengaturan-pengaturan border dengan CSS. B. DASAR TEORI Border jika diartikan adalah

Lebih terperinci

How to Create Simple Web (2) - Slice

How to Create Simple Web (2) - Slice How to Create Simple Web (2) - Slice Oleh: Isnu Arief Darmawan Senang sekali, bisa berjumpa lagi dengan Anda :D #masih-presenter dengan Saya Om' Kenu. Sebelumnya, kita sudah membuat template yang sudah

Lebih terperinci

Tutorial Dasar CSS Preprocessor LESS

Tutorial Dasar CSS Preprocessor LESS Tutorial Dasar CSS Preprocessor LESS Oleh: Christian Rosandhy Karena CSS standar udah terlalu mainstream,, nggak ada salahnya kita belajar salah satu CSS Preprocessor yang cukup terkenal, yaitu LESS. Disini

Lebih terperinci

Tutorial CSS Desain Layout 1 Dengan HTML5 dan CSS

Tutorial CSS Desain Layout 1 Dengan HTML5 dan CSS Tutorial CSS Desain Layout 1 Dengan HTML5 dan CSS Oleh: Ardie Jocong pada tutorial ini saya akan mencoba menjelaskan Bagaimana Membuat Desain Layout Website dengan Menggunakan HTML5 dan CSS.. Okeh Langsung

Lebih terperinci

PEMBUATAN WEBSITE MENJUAL PERLENGKAPAN FUTSAL

PEMBUATAN WEBSITE MENJUAL PERLENGKAPAN FUTSAL PEMBUATAN WEBSITE MENJUAL PERLENGKAPAN FUTSAL Nama : Yudhi Prasongko NPM : 58410729 Jurusan : Teknik Informatika Pembimbing : Sularno, SKom, MM LATAR BELAKANG 1. Informasi mengenai produk perlengkapan

Lebih terperinci

KARTU BIMBINGAN TUGAS AKHIR MAHASISWA

KARTU BIMBINGAN TUGAS AKHIR MAHASISWA DEPARTEMEN PENDIDIKAN NASIONAL UNIVERSITAS SUMATERA UTARA FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM (FMIPA) JL. BIOTEKNOLOGI NO. 1 KAMPUS USU Telp. (061) 82144290 MEDAN 20155 KARTU BIMBINGAN TUGAS

Lebih terperinci

SURAT KETERANGAN Hasil Uji Program Tugas Akhir

SURAT KETERANGAN Hasil Uji Program Tugas Akhir SURAT KETERANGAN Hasil Uji Program Tugas Akhir Yang bertanda tangan dibawah ini, menerangkan bahwa mahasiswa Tugas Akhir Program Diploma (D3) Teknik Informatika : Nama Mahasiswa : DAMORA AZRI MOHARA Nomor

Lebih terperinci

TUGAS BOXES. 1. Percobaan 1

TUGAS BOXES. 1. Percobaan 1 TUGAS BOXES 1. Percobaan 1 Analisa : Pada percobaan 1, style pada elemen div ditetapkan width dan heightnya 400px dan 300px dengan background color pink, dan pada elemen p, width dan height ditetapkan

Lebih terperinci

HTML Scripting Desain Visual dan Tata Letak dengan CSS 3

HTML Scripting Desain Visual dan Tata Letak dengan CSS 3 Tujuan : Memahami dan dapat menggunakan konsep CSS3 Memahami dan dapat mengetahui kelebihan maupun kekurangan CSS 3 Menerapkan CSS 3 dengan fitur lainnya 8.1 CSS 3 CSS3 adalah standar untuk CSS yang paling

Lebih terperinci

6. HTML & CSS. PTI15010 Pemrograman Web. Agi Putra Kharisma, S.T., M.T. Genap 2014/2015. Desain slide ini dadaptasi dari University of San Fransisco

6. HTML & CSS. PTI15010 Pemrograman Web. Agi Putra Kharisma, S.T., M.T. Genap 2014/2015. Desain slide ini dadaptasi dari University of San Fransisco 6. HTML & CSS PTI15010 Pemrograman Web Agi Putra Kharisma, S.T., M.T. Genap 2014/2015 Desain slide ini dadaptasi dari University of San Fransisco HTML, CSS, JavaScript HTML (Struktur Dokumen) CSS (Tampilan

Lebih terperinci

Membuat Layout Desain Awal dengan Photoshop

Membuat Layout Desain Awal dengan Photoshop 2 Websiteku Membuat Layout Desain Awal dengan Photoshop jalankan aplikasi photoshop anda dan siapkan sebuah kanvas baru, caranya pilih file - new lalu gunakan setting berikut: Width : 700 pixel Height

Lebih terperinci

DAFTAR PUSTAKA. Fathansyah. (2007). Basis Data. Informatika : Bandung.

DAFTAR PUSTAKA. Fathansyah. (2007). Basis Data. Informatika : Bandung. DAFTAR PUSTAKA Fathansyah. (2007). Basis Data. Informatika : Bandung. Pressman, Roger S. (2012). Rekayasa Perangkat Lunak Buku Dua, Pendekatan Praktisi (Edisi 7). Andi : Yogyakarta. Saputra, Agus. (2012).

Lebih terperinci

Membuat Duplikasi Form dengan Jquery (Dynamic Form)

Membuat Duplikasi Form dengan Jquery (Dynamic Form) Membuat Duplikasi Form dengan Jquery (Dynamic Form) Oleh: Dimas Agung Noviyanto Membuat dynamic field mungkin bukan hal baru bagi seorang web programmer, field inputan yang dapat ditambah maupun di hapus

Lebih terperinci

CSS (Cascading Style Sheets)

CSS (Cascading Style Sheets) KAJIAN 2 CSS (Cascading Style Sheets) Modul 5 Pengantar CSS Modul 6 Layout dan Display Modul 7 Font, Text, Color, Background Modul 8 Layer dan Hyperlink Modul 9 Layout Website Sederhana 40 KAJIAN 2 CSS

Lebih terperinci

CSS BOXES. Langkah Kerja. Percobaan

CSS BOXES. Langkah Kerja. Percobaan Tugas : Percobaan Praktikum 8 Materi : CSS Boxes Nama : Dwi Setiya Ningsih NRP : 2103157025 Langkah Kerja CSS BOXES Berikut ini langkah kerja yang perlu anda lakukan selama menyelesaikan semua percobaan

Lebih terperinci

Yayan Mulyana

Yayan Mulyana Yayan Mulyana CSS merupakan materi yang WAJIB kita kuasai sebagai web Designer, karena dengan CSS kita bisa membangun sebuah website dengan rancangan desain yang efektif dan fleksibel

Lebih terperinci

CSS Cascading Style Sheet

CSS Cascading Style Sheet CSS Cascading Style Sheet Pemrograman Web 1 Genap 2011-2012 CSS Lanjut CSS Dimension Berfungsi untuk mengatur panjang dan lebar dari sebuah elemen HTML. contoh: height:100px; width:200px; Nilai/ value:

Lebih terperinci

Membuat Themes Wordpress sendiri - Part 1

Membuat Themes Wordpress sendiri - Part 1 Membuat Themes Wordpress sendiri - Part 1 Oleh: asep saepulloh Halo sahabat jaco. Kali ini saya akan membahas bagaimana caranya membuat themes sendiri di CMS Wordpress. Terkadang sahabat jaco muak dengan

Lebih terperinci

LAPORAN RESMI. Boxes

LAPORAN RESMI. Boxes LAPORAN RESMI Boxes Dosen Pembimbing : Dwi Susanto,ST, MT Oleh Hamidah Nur Hidayati 4103131038 PROGRAM STUDI TEKNOLOGI MULTIMEDIA BROADCASTING DEPARTEMEN MULTIMEDIA KREATIF POLITEKNIK ELEKTRONIKA NEGERI

Lebih terperinci

LAMPIRAN. Universitas Sumatera Utara

LAMPIRAN. Universitas Sumatera Utara LAMPIRAN 66 LAMPIRAN A : TAMPILAN PROGRAM Tampilan Halaman Utama (Home) Tampilan Halaman Buku Tamu 67 Tampilan Halaman Guru Dan Siswa Tampilan Halaman Portal Akademik Siswa 68 Tampilan Halaman Login Portal

Lebih terperinci

Membuat Button Dengan CSS

Membuat Button Dengan CSS Membuat Button Dengan CSS Dari sekian banyak pertanyaan yang muncul dari para pemula di CSS adalah pertanyaan bagaimana sih membuat tombol dengan CSS?, hmmm bagi saya ini adalah pertanyaan yang simple

Lebih terperinci

Perkenalan Glyphicon Bootstrap dan Cara Mudah Menggunakannya

Perkenalan Glyphicon Bootstrap dan Cara Mudah Menggunakannya Perkenalan Glyphicon Bootstrap dan Cara Mudah Menggunakannya Oleh: Arinadi Nur Rohmad Glyphicon ini berbasis text jadi lebih ringan dan biasa diganti warna seperti huruf pada umumnya yang berbeda dari

Lebih terperinci

Pemrograman Web Week 2. Team Teaching

Pemrograman Web Week 2. Team Teaching Pemrograman Web Week 2 Team Teaching WEEK 2 HTML IKG2I4 Software Project I Persiapan Instalasi Editor Download dan Install apilkasi editor (mis. Notepad++) Karena membantu dalam pengembangan syntax highlighting

Lebih terperinci

BAB V IMPLEMENTASI SISTEM

BAB V IMPLEMENTASI SISTEM BAB V IMPLEMENTASI SISTEM Pada bab ini merupakan tahapan penerjemahan kebutuhan pembuatan software ke dalam representasi perangkat lunak sebeleum penulisan kode program dimulai sesuai dengan hasil analisis

Lebih terperinci

Author : Minarni, S.Kom.,MM

Author : Minarni, S.Kom.,MM S Cascading Style Sheets Author : Minarni, S.Kom.,MM Universitas Darwan Ali Sampit Kalimantan Tengah Internet Multimedia Keuntungan Menggunakan CSS Mempermudah dan mempersingkat pembuatan dan pemeliharaan

Lebih terperinci

Create Read Update Delete using PHP MySql

Create Read Update Delete using PHP MySql 2016 Create Read Update Delete using PHP MySql CRUD TABEL ALUMNI DWI SETIYA NINGSIH // 210 315 70 25 [COMPANY NAME] [Company address] SS Program Gambar 1.1 Tampilan index.php Gambar 2.1 Tampilan edit.php

Lebih terperinci

CSS Lanjut Pertemuan - 5

CSS Lanjut Pertemuan - 5 CSS Lanjut Pertemuan - 5 Semester Ganjil 2009/2010 CSS Lanjut Berfungsi untuk mengatur panjang dan lebar dari sebuah elemen HTML. contoh: height:100px; width:200px; Nilai/ value: auto Nilai / Value ukuran

Lebih terperinci

Simple Price Calculator dengan Input Range

Simple Price Calculator dengan Input Range Simple Price Calculator dengan Input Range Oleh: Septi Wulan Haloo, pada tutorial pertama saya ini, saya ingin membagikan cara membuat simple price calculator dengan input range (yang inputnya bisa digeser-geser

Lebih terperinci

Tutorial Lengkap Memahami CSS Display

Tutorial Lengkap Memahami CSS Display Tutorial Lengkap Memahami CSS Display Oleh: Christian Rosandhy Dalam dunia CSS, property Display adalah salah satu property terpenting yang menentukan hasil akhir sebuah website. Kali ini kita akan banyak

Lebih terperinci

Membuat Layout Header Diam di Tempat (Fix Header)

Membuat Layout Header Diam di Tempat (Fix Header) Membuat Layout Header Diam di Tempat (Fix Header) Oleh: Christian Rosandhy Fix Header / Header Diam di Tempat adalah salah satu tren layout yang cukup populer (liat aja header Facebook / Twitter). Layout

Lebih terperinci

Membuat Scrollspy Dengan Bootstrap

Membuat Scrollspy Dengan Bootstrap Membuat Scrollspy Dengan Bootstrap Oleh: Hasyemi Rafsanjani Asyari Hai JagoCodingers. Apa kabar? Pernah ngga kalian membuka sebuah website lalu ada menu link navigasi yang akan terupdate atau terlihat

Lebih terperinci

MODUL PEMOGRAMAN WEB I STMIK IM BANDUNG MODUL PEMOGRAMAN WEB I. Oleh: CHALIFA CHAZAR. Chalifa Chazar edu.script.id

MODUL PEMOGRAMAN WEB I STMIK IM BANDUNG MODUL PEMOGRAMAN WEB I. Oleh: CHALIFA CHAZAR. Chalifa Chazar edu.script.id 1 MODUL PEMOGRAMAN WEB I Oleh: CHALIFA CHAZAR 2 Modul 6 CSS For Layout Tujuan: Mahasiswa mengenal komponen-komponen CSS yang dapat digunakan untuk mengatur tata letak element HTML dalam membangun website

Lebih terperinci

Membuat Responsive Layout dengan CSS Media Query

Membuat Responsive Layout dengan CSS Media Query Membuat Responsive Layout dengan CSS Media Query Oleh: Christian Rosandhy Di tutorial kali ini kita akan belajar membuat layout CSS Responsive dengan bantuan CSS Media Query, supaya website yang kita buat

Lebih terperinci

Memanfaatkan CSS Animasi dan Transisi [Part 1]

Memanfaatkan CSS Animasi dan Transisi [Part 1] Memanfaatkan CSS Animasi dan Transisi [Part 1] Oleh: Christian Rosandhy Transition dan Animation itu adalah salah satu perintah wajib di dunia CSS3 sekarang untuk menghasilkan web yang lebih unik. Di part

Lebih terperinci

Membuat Layout Web Mengunakan Table

Membuat Layout Web Mengunakan Table Page 1 INFO : ILMUKOMPUTER.ID.AI By PRASETYO UTOMO Web : http://www.prasetyo771.wordpress.com Facebook : facebook.com/tyo777 No Hp : 08982069172 Email : prasetyoutomo771@gmail.com Page 2 1. Pengenalan

Lebih terperinci

Mendesain Custom Tabel dengan Pseudo Element CSS

Mendesain Custom Tabel dengan Pseudo Element CSS Mendesain Custom Tabel dengan Pseudo Element CSS Oleh: Christian Rosandhy Masih dengan CSS, kali ini kita akan belajar mendesain tabel dengan CSS, sekalian belajar 3 pseudo-element yang akan sangat berguna

Lebih terperinci

CSS (Cascade Style Sheet)

CSS (Cascade Style Sheet) CSS (Cascade Style Sheet) CSS merupakan bahasa (script) yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup / markup language. Jika kita berbicara dalam konteks web, bisa

Lebih terperinci

62 Trik dan Plugin. jquery

62 Trik dan Plugin. jquery 62 Trik dan Plugin jquery Mungkin ini adalah bagian yang paling Anda tunggu... akan ada banyak sekali trik-trik maupun konsep yang ditawarkan jquery yang akan mampu membuat mata kita diam tak berkutik...

Lebih terperinci

CARA MEMASANG BANNER SEKOLAH TELAH TERDAFTAR DI DAPODIK

CARA MEMASANG BANNER SEKOLAH TELAH TERDAFTAR DI DAPODIK CARA MEMASANG BANNER SEKOLAH TELAH TERDAFTAR DI DAPODIK Banner Dapodik Sekolah... Caranya : Masuk di http://dapodik.org/ Pada bagian bawah : (Bagian Lihat Data Dapodik per Daerah) Masukkan Nama Propinsi

Lebih terperinci

Cara Membuat website dengan Dreamweaver

Cara Membuat website dengan Dreamweaver Cara Membuat website dengan Dreamweaver Pajrin Wurika Sahara Wurika.sahara@gmail.com Abstrak Dreamweaver adalah software aplikasi desain web visual yang biasa dikenal dengan istilah WYSIWYG What You See

Lebih terperinci

TUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif

TUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif TUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif www.ilmuwebsite.com Bagian 8. Menggunakan JQuery Manipulation

Lebih terperinci

LAYER DAN HYPERLINK. B. Kegunaan Layer: 1. Layer

LAYER DAN HYPERLINK. B. Kegunaan Layer: 1. Layer 1. Layer A. Dasar Layer Untuk membuat layer, yang harus anda butuhkan adalah menentukan atribut posisi untuk style anda. Posisi tersebut dapat sebagai posisi absolute atau posisi relative Posisi diatas

Lebih terperinci

MEMBUAT LAYOUT DENGAN CONTAINER BOOTSTRAP

MEMBUAT LAYOUT DENGAN CONTAINER BOOTSTRAP MEMBUAT LAYOUT DENGAN CONTAINER BOOTSTRAP NURLITA nurlita.icha@gmail.com Abstrak Kali ini kita akan membahas cara membuat layout dengan container bootstrap. Bootstrap adalah suatu framework front-end yang

Lebih terperinci

MODUL PRATIKUM 04A PEMROGRAMAN BERBASIS WEB (CCP119)

MODUL PRATIKUM 04A PEMROGRAMAN BERBASIS WEB (CCP119) MODUL PRATIKUM 04A PEMROGRAMAN BERBASIS WEB (CCP119) Disusun oleh : KARTINI, SKom.,MMSI LABORATORIUM KOMPUTER FAKULTAS ILMU KOMPUTER UNIVERSITAS ESA UNGGUL MODUL PRATIKUM PBW 04A Cascading Style Sheets

Lebih terperinci

[ MODUL 4 ] PEMROGRAMAN WEB [ CSS ] Modul Ini Disusun Untuk Membantu Proses Pembelajaran Bagi Mahasiswa DOSEN : CEPI RAHMAT HIDAYAT, S.

[ MODUL 4 ] PEMROGRAMAN WEB [ CSS ] Modul Ini Disusun Untuk Membantu Proses Pembelajaran Bagi Mahasiswa DOSEN : CEPI RAHMAT HIDAYAT, S. [ MODUL 4 ] PEMROGRAMAN WEB [ CSS ] Modul Ini Disusun Untuk Membantu Proses Pembelajaran Bagi Mahasiswa DOSEN : CEPI RAHMAT HIDAYAT, S.KOM STMIK TASIKMALAYA SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER

Lebih terperinci

DASAR-DASAR CSS DASAR-DASAR CSS By: Rohi Abdulloh A. PENGENALAN

DASAR-DASAR CSS DASAR-DASAR CSS By: Rohi Abdulloh A. PENGENALAN DASAR-DASAR CSS DASAR-DASAR CSS 2015 A. PENGENALAN CSS merupakan kependekan dari Cascading Style Sheet yaitu suatu skrip yang digunakan untuk mempercantik tampilan HTML atau mengatur bagaimana elemen HTML

Lebih terperinci

Komunikasi Multimedia

Komunikasi Multimedia Komunikasi Multimedia Modul ke: Fakultas Ilmu Komunikasi Teknik Lanjutan Corporate Website: HTML Editing dengan Macromedia Dreamweaver MX Anindita, S.Pd, M.Ikom Program Studi Public Relations www.mercubuana.ac.id

Lebih terperinci

FRAMEWORK JAVASCRIPT : MANIPULASI HTML & CSS DENGAN JQUERY

FRAMEWORK JAVASCRIPT : MANIPULASI HTML & CSS DENGAN JQUERY BAB 15 FRAMEWORK JAVASCRIPT : MANIPULASI HTML & CSS DENGAN JQUERY A. TUJUAN: 1. Mempelajari dan dapat mengimplementasikan manipulasi HTML dengan jquery 2. Mempelajari dan dapat mengimplementasikan manipulasi

Lebih terperinci

BAB III PERANCANGAN ALAT

BAB III PERANCANGAN ALAT BAB III PERANCANGAN ALAT 3.1 Gambaran Umum Rancangan alat pengendali pintu melalui monitoring kamera yang digunakan pada penulisan ini terdapat 2 cara yang dilakukan yaitu melalui kamera yang akan mengambil

Lebih terperinci

Penulis :

Penulis : Daftar Isi Dasar-Dasar HTML Cara Membuka Notepad dan Structure Dasar HTML 1 Heading dan Cara Menyimpan dengan Ekstensi HTML 4 Basic HTML Code 6 Style 11 Formating 18 Dasar Dasar HTML Cara Membuka Notepad

Lebih terperinci

[SANGAT MUDAH] Cara Membuat Tab dengan Bootstrap

[SANGAT MUDAH] Cara Membuat Tab dengan Bootstrap [SANGAT MUDAH] Cara Membuat Tab dengan Bootstrap Oleh: Arinadi Nur Rohmad Asalamualaikum.. Bagi yang seorang yang belum paham betul JQuery seperti saya, membuat Tab adalah pekerjaan yang cukup sulit..

Lebih terperinci

TUTORIAL RUBY ON RAILS

TUTORIAL RUBY ON RAILS TUTORIAL RUBY ON RAILS TEKNIK INFORMATIKA-UNIV.NASIONAL Oleh: Slamet nurhadi 083112706450100 UNIVERSITAS NASIONAL DAFTAR ISI: 1. MEMBUAT PROYEK BARU DENGAN SETINGAN DATABASE MySQL 2. MEMBUAT HALAMAN WEB

Lebih terperinci

Notifikasi Keren dengan CSS3

Notifikasi Keren dengan CSS3 Notifikasi Keren dengan CSS3 Oleh: Sendy PK Notifikasi pada website merupakan hal yang penting untuk memberi tahu pengunjung website tentang informasi singkat yang diberikan oleh pemilik website, hal ini

Lebih terperinci

WEB DEVELOPMENT by Hestiasari Rante-Pasila. Week 3 Cascading Style Sheets (CSS) Part 1

WEB DEVELOPMENT by Hestiasari Rante-Pasila. Week 3 Cascading Style Sheets (CSS) Part 1 WEB DEVELOPMENT by Hestiasari Rante-Pasila Week 3 Cascading Style Sheets (CSS) Part 1 WHAT IS CSS? CSS: Cascading Style Sheets Styles ini mendeskripsikan bagaimana menampilkan elemen-elemen HTML Styles

Lebih terperinci

BAB VI DESAIN WEB RESPONSIF

BAB VI DESAIN WEB RESPONSIF BAB VI DESAIN WEB RESPONSIF A. KOMPETENSI DASAR Memahami konsep dasar desain halaman web responsif Mampu menerapkan konsep desain web responsif ke dalam aplikasi Mampu menghasilkan desain aplikasi web

Lebih terperinci

Lampiran Kode Program

Lampiran Kode Program Lampiran Kode Program 1. Fw_jemput_penumpang.php

Lebih terperinci

BAB IV IMPLEMENTASI DAN PENGUJIAN SISTEM

BAB IV IMPLEMENTASI DAN PENGUJIAN SISTEM BAB IV IMPLEMENTASI DAN PENGUJIAN SISTEM 4.1 Implementasi Setelah tahap analisis dan perancangan selesai dilakukan, maka tahap selanjutnya adalah tahap implementasi. Pada subbab berikut akan dijelaskan

Lebih terperinci