Blogger Agus Tutorial

Posts

Showing posts from July, 2016

Trik Membuat Animasi Down HTML CSS3

Oleh RukiaGaming July 21, 2016

Tips Membuat Animasi Down HTML dan CSS3 ~Pada tutorial kali ini saya ingin membagikan sebuah tutorial yaitu mengenai Tips membuat animasi menggunakan CSS3 , di css3 ini saya banyak menggunakan kode animasi @keyframes dan animation beserta durasinya yang nantinya bisa memunculkan sebuah animasi pada website teman-teman. Animasi Down ini berarti animasi yang turun dari atas ke bawah, Ok langsung saja teman-teman perhatikan tahap-tahapnya : 1. Pertama teman-teman buat dahulu tag html-nya, seperti dibawah ini : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Membuat Animasi Turun</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="title"> <h2 class="caption">Animasi Down CSS3</h2> </div> <div class="bounce"> <img src="img/bg1.jpg" alt="contoh gamba...

Belajar Membuat Form Pendaftaran HTML CSS

Oleh RukiaGaming July 20, 2016

Belajar Membuat Form Pendaftaran HTML CSS~ Pada tutorial ini saya ingin mempostingkan sebuah tutorial yaitu membuat form pendaftaran dengan HTML CSS . Fungsi form pendaftaran dalam website ataupun aplikasi berbasis dekstop maupun android ialah agar kita bisa mempunyai sebuah akun untuk login atau masuk ke sebuah situs website dan lain-lainnya. Ok langsung saja kita ke tahap-tahap pembuatannya dibawah ini : 1. Pertama teman-teman buat dahulu tag htmlnya, seperti dibawah ini : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Form Pendaftaran</title> <link rel="stylesheet" href="font-awesome/css/font-awesome.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <form action="" method="post"> <h2><i class="fa fa-user"></i>Form Pendaftaran</h2> <br/> ...

Belajar Membuat Scroll Top HTML CSS dan JQuery

Oleh RukiaGaming July 19, 2016

Belajar Membuat Scroll Top HTML CSS dan JQuery ~ Membuat Scroll Top untuk sebuah website atau blog sangat berfungsi untuk membantu pengunjung Website kita bisa mudah kembali ke atas halaman tanpa, menggulirkan scroll page. Nah dalam pembuatan ScrollTop ini kita hanya membutuhkan code HTML,CSS dan JQuery sebagai pembuatan animasi pada Scroll Top . Ok langsung saja kita ke tahap pembuatannya. 1. Langkah Pertama yang harus teman-teman buat ialah tag htmlnya, bisa kalian lihat seperti dibawah : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>background-images</title> <link rel="stylesheet" href="font-awesome/css/font-awesome.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <h2>Scroll Top</h2> </header> <div class="content"> <h1>Content</h1> </div...

Situs Website Yang Efektif Untuk Belajar Pemrograman

Oleh RukiaGaming July 17, 2016

Situs Website Yang Efektif Untuk Belajar Pemrograman ~ Pada tutorial ini saya ingin memberitahukan sebuah situs yang cocok buat kamu untuk belajar bahasa pemrograman ataupun Design khususnya Design Website. Bagi kalian teman-teman yang baru belajar atau baru terjun didunia pemrograman atau design website ada baiknya teman-teman mencoba belajar di situs yang memang efektif buat belajar. Ok langsung saja teman-teman bisa lihat beberapa situs yang menurut saya efektif sebagai tempat belajar pemrograman : 1. W3SHOOLS.COM Merupakan situs website yang free learning buat kamu yang pingin belajar pemrograman website, disitus ini kamu dapat belajar bahasa pemrograman seperti HTML,CSS,JS,PHP dll. Beserta Tombol Try atau bisa dibilang kamu dapat belajar secara langsung dan mempraktekannya di website tersebut. Kunjungi W3SHOOLS.COM 2. IlmuWebsite.com Merupakan situs website yang menyediakan materi pembelajaran gratis seputar internet, website, pemrogaman, desain grafis, fotografi, 3D ...

Membuat Navigasi Dropdown Dengan Efek Keren dan Responsive

Oleh RukiaGaming July 10, 2016

Cara membuat Navigasi Dropdown dengan Efek Keren dan Responsive~ Pada tutorial kali ini saya ingin membagikan tutorial yaitu masih dalam materi HTML & CSS, dan sedikit sentuhan Jquery untuk membuat responsivenya. Pada tutorial sebelumnya saya sudah membuat tutorial yaitu Cara membuat Navigasi Flat yang keren. Untuk teman-teman yang belum membaca artikel tutorial saya sebelumnya silahkan kunjungi link dibawah ini : Baca Juga : Cara membuat Navigasi Flat yang keren. Nah, yang sekarang saya hanya menambahkan sebuah menu dropdown untuk menambah kesan elegan pada menu navigasi tersebut. Ok langsung saja kita buat codingnya : 1. teman siapkan terlebih dahulu index.html. scriptnya bisa teman lihat dibawah ini <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Membuat Navigasi Flat Keren + Responnsive</title> <!-- script css berikut untuk menghubungkan script html dengan font-awesome.css di dala...

Cara Mudah Membuat Form Login dengan HTML dan CSS

Oleh RukiaGaming July 10, 2016

Demo Cara Mudah Membuat Form Login dengan HTML dan CSS~ Pada tutorial kali ini saya ingin membagikan tutorial yaitu mengenai cara membuat form login, pasti sudah kebayang bukan designnya bagaimana ?? Ok, langsung saja kita praktekan, dan perhatikan langkap-langkah berikut : 1. Buat dahulu script htmlnya seperti biasa. 2. Selanjutnya buat script form dan input + tombol untuk login, Silahkan teman-teman lihat/copas script berikut : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Form Login</title> <link rel="stylesheet" href="font-awesome/css/font-awesome.css">  <link rel="stylesheet" href="css/style.css"> </head> <body>  <div class="login"> <img src="images/AgusTutorial.png" alt="" class="logo">...

Cara Membuat menu navigasi flat yang mudah

Oleh RukiaGaming July 10, 2016

Cara Membuat menu navigasi flat yang mudah~ Pada Tutorial kali ini saya ingin membagikan ilmu dari HTML & CSS tentunya, yaitu membuat menu navbar di website. Menu navigasi sangatlah penting dalam pembuatan website ya teman karena menu ini berfungsi sebagai tempat kita menaruh sebuah pilihan informasi yang nantinya akan berguna bagi user. Nah,mau tau bagaimana cara buatnya ?? yuk langsung saja kita ke tahap-tahapnya. 1. Kita siapkan dahulu file index.html-nya dan jangan lupa script font-awesomenya yang nanti kita akan gunakan utuk memberikan icon secara langsung . Baca Juga : Cara menggunakan font-awesome pada website . 2. Buat script seperti dibawah ini di dalam text editor teman. Scriptnya ada dibawah , Silahkan teman copas saja dan letakan di tesk editor : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Membuat Navigasi Flat Keren + Responnsive</title> /*link ini berguna untuk memanggil script css f...

Cara menggunakan font-awesome pada website

Oleh RukiaGaming July 10, 2016

Cara menggunakan font-awesome pada website~ Pada Tutorial Kali ini saya akan memeberikan tutorial yang masih dalam materi CSS yaitu belajar menggunkan Freamwork CSS yaitu bernama FONT-AWESOME. FontAwesome sendiri merupakan Freamwork CSS yang kerap sekali digunakan untuk menambah icon gambar pada menu tertentu dan semacamnya pada saat membangun sebuah website. 1. Nah yang pertama kita harus Download Terlebih dahulu filenya di situs resminya. Silahkan teman-teman kunjungi website resminya di http://fontawesome.io/ 2 .Setelah teman mendownload filenya silahkan extract filenya terlebih dahulu, tampilannya seperti dibwah ini : 3. Nah Silahkan Teman Buat folder dengan nama Belajar Font-Awesome, lalu copy folder hasil extract ke dalam folder yang sudah kita buat tadi : 4. Buat file index.html dan letakan didalam fodler Belajar Font-Awesome, tampilannya seperti diawah ini : 5. Kita Buat script html5nya dan kita akan panggil file font-awesomenya : <!DOCTYPE html> <html lang="en...

Cara Mudah Menggunakan Bootstrap

Oleh RukiaGaming July 05, 2016

Cara Mudah Menggunakan Bootstrap~ Pada tutorial kali ini saya ingin membagikan ilmu saya mengenai cara menggunakan Freamwork yaitu Bootstrap , Bootstrap merupakan Freamwork yang digunakan oleh para development untuk membantu membuat Website, Bootstrap dipopulerkan oleh Situs Resmi Twitter yang pertama kali mempergunakan Bootstrap untuk websitenya sendiri. Fungsi dari bootstrap itu sendiri adalah untuk membantu pekerjaan development dalam merancang sebuah website. Ok , langsung saja saya beritahu caranya : Langkah pertama teman silahkan kunjungi link Bootstrap terlebih dahulu, linknya silahkan klik di bawah ini http://getbootstrap.com/ . Langkah kedua teman perhatikan pada menu navbarnya ada banyak menu pilihan. Untuk teman-teman yang baru mempelajari bootstrap silahkan pilih menu getting started . Tampilannya bisa teman lihat seperti dibawah ini : Langkah ketiga teman silahkan download pluginnya terlebih dahulu , Plugin tersebut ada di tulisan Bootstrap atau t...