Postingan

Menampilkan postingan dengan label CSS

Cara Membuat Animasi Gambar Bergetar Dengan HTML Dan CSS

Gambar
Hai Sore Semuanya, kali ini saya membuat tutorial tentang  Cara Membuat Animasi Gambar Bergetar Dengan HTML Dan CSS , langsung saja kita mulai belajar membuatnya. Pertama-tama, kita tulis syntak HTML seperti dibawah ini. <h1>Animasi Gambar Bergetar</h1> <p>Demo gambar dibawah ini.</p> <img src="gambar.jpg" alt="Gambar Bergetar"> Kedua, Setelah kita menulis syntak HTML diatas tersebut, tambahkan syntak CSS seperti yang di bawah ini. <style type='text/css> /* -------------------------- -------WWW.KODEKEN.TECH------ ---------------------------*/ /* By Keanu Rivaldy | KODEKEN */ img:hover{ animation: bergetar 0.4s; animation-iteration-count: infinite; } @keyframes bergetar { 0% { transform: translate(1px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(3px, 2px) rotate(0deg); } 40% { transfo...
Posting Komentar
Baca selengkapnya

Cara Membuat Template Blogger Sendiri Part 1

Gambar
Hy Pengujung Setia Kode Ken, kali ini Kode Ken post tentang  Cara Membuat Template Blogger Part 1 dan kali ini Kode Ken tidak banyak basa basi langsung ke inti nya saja yah. Cara Membuat Template Blogger Sendiri? Untuk memasang script ini di  blogger anda dengan benar, ikuti langkah dibawah ini dengan benar. 1. Pertama, Pergi Ke  Blogger >> Tema >> Edit HTML. 2. Kedua, Semua Kode Yang Ada Disana Dihapus Semua Kemudia Ganti Dengan Kode Yang Dibawah ini!. <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <HTML> <head> <b:if cond='data:blog.isMobile'> <meta content='width=device-width,initial-scale=1.0,minimum-scale=0.5,maximum-scale=2.0' name='viewport'/> <meta content='noindex,nofollow' name='robots'/> </b:if> <b:include data='blog' name='all-head-content'/> <meta content='####################' name='google-sit...
Posting Komentar
Baca selengkapnya

Kode Game Kertas-Gunting-Batu

Gambar
DEMO HTML <!DOCTYPE HTML> <html> <head> <meta name="description" content="Rock-Paper-Scissors"> <meta name="keywords" content="sololearn,rock-paper-scissors"> <meta name="author" content="KODEKEN - https://www.sololearn.com/Profile/8418364"> <meta name="copyright" content="KODEKEN"> <meta name="date" content="2018-02-26" scheme="YYYY-MM-DD"> <meta name="revised" content="2018-02-20" scheme="YYYY-MM-DD"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="utf-8"> <title>Kertas-Gunting-Batu</title> <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet"> <script src=...
Posting Komentar
Baca selengkapnya

Cara Membuat Halaman Partner Keren Ala Kode Ken Di Blogger

Gambar
Akhirnya saya punya ide lagi buat update artikel lagi yang menarik yah pasti yaitu  Cara Membuat Halaman Partner Keren Ala Kode Ken Di Blogger . Walaupun ini Tutorial membuat 4 baris kotak HTML ala Kode Jarwo, tapi saya buat halaman partner keren ala Kode Ken. Saya sendiri menggunakan kotak seperti ini untuk membuat halaman Partner, tapi Kalian boleh mengubah fungsinya itu tersebut sesuai kenginan Kalian. Demo Oke langsung ke bagian tutorialnya agar mempersingkat waktu. Cara Pembuatannya 1. Pertama, Kita Pergi Ke Blogger >> Halaman >> Halaman Baru. 2. Beri Judul Halaman Dengan Partner Kemudian kita edit dalam mode HTML   3. Masukan Kode ini di Dalam halaman Edit Mode HTML tersebut yah <style> .list {display:block;height:320px;float:left;background:#1E90FF;border-radius:10px;padding:20px;margin:1% 1% 3%;border-bottom:7px solid #4169E1 ;cursor:pointer} .list p {color:#fff !important} @media all and (min-width:1000px){.list{width:48%}} @media all and...
Posting Komentar
Baca selengkapnya