Social Items

    •
Tampilkan postingan dengan label html5. Tampilkan semua postingan
Tampilkan postingan dengan label html5. Tampilkan semua postingan
 

 Hai, semua! Pada kesempatan kali ini saya akan membagikan tutorial membuat menu website keren masa kini menggunakan Javasript. Jadi apa yang akan saya buat?. Saya akan membuat sebuah menu yang berisikan nama-nama  yaitu: 
  1. Home
  2. About
  3. Categories
 Pada menu Categories berisikan submenu yaitu:
  1. Cars
  2. Bicycles
  3. Toys
 Pada menu tersebut memiliki role yaitu:
  1. Ketika user melakukan hover pada menu utama maka background pada header akan berubah warna.
  2. Jika terdapat submenu pada menu utama (menu Categories) ditandai dengan icon panah menunjuk ke bawah  maka user harus melakukan click terlebih  dahulu pada menu utama.
  3. Ketika user melakukan klik pada menu utama yang berisikan submenu maka submenu akan terlihat dan icon pada menu utama tersebut akan berbalik arah yang menandakan submenu telah terbuka.
 Berikut di bawah ini tampilan akhir dari menu website keren masa kini ini.


 Jika kamu tertarik dengan source code dari menu tersebut, silahkan download pada link di bawah ini.


 Demikian pembahasan kali ini, semoga bisa membantu kamu untuk menambah referensi dalam pembuatan project website yang sedang kamu kerjakan.

~ Terima Kasih ~

Membuat Menu Website keren masa kini menggunakan Javascript



 Sesuai gambar di atas, membuat karakter profil unik dengan nama kamu bisa kamu buat. Aplikasi ini bernama Pictogrify yaitu generator unik piktogram dari teks yang ketikkan. Pictogrify ini dapat kamu akses melalui laman berikut luciorubeens.github.io/pictogrify/. Pictogrify ini merupakan buatan Lúcio Rubens. Pada dasarnya gambar yang otomatis akan dimuat ketika kamu mengetikan tulisan pada laman tersebut. 


 Pictogrify merupakan package yang dibuat dalam bahasa pemrograman Javascript, sehingga gambar yang muncul seperti di laman resminya tersebut merupakan gambar contoh buatan dari creatornya. Kamu yang seorang programmer bisa menggunakan package yang telah dibuat tersebut untuk gambar yang kamu buat sendiri. Dokumentasi dari penggunaan Pictogrify ini bisa kamu temukan pada laman berikut : github.com/luciorubeens/pictogrify. 

Membuat karakter profil unik dengan nama kamu

 


 Pada kesempatan kali ini saya akan membagikan cara memasang aplikasi Google Web Designer di Linux Mint 17.3. Google Web Designer sesuai namanya merupakan aplikasi buatan Google yang sangat powerfull digunakan untuk membuat iklan HTML yang interaktif dengan animasi pada sistem operasi Mac, Windows maupun Linux. Aplikasi ini memang terdengar masih asing dikalangan desainer yang biasanya menggunakan aplikasi produk dari Adobe. Mari ikuti langkah di bawah ini untuk pemasangannya.


  1. Download aplikasi Google Web Designer | DISINI |
  2. Buka file yang telah selesai di download (.deb) dengan mengklik 2x
  3. Akan muncul Package Installer lalu klik Install Package



  1. Selesai. Aplikasi Google Web Designer bisa kamu search untuk menggunakannya

 Demikian tutorial Cara Install Google Web Designer di Linux Mint 17.3, mudah - mudahan bisa membantu kamu untuk melakukan pemasangan aplikasi tersebut bisa lebih mengerti. Nantikan tutorial menarik mengenai pembuatan iklan menarik di Google Web Designer pada artikel selanjutnya.

Cara install Google Web Designer di Linux Mint 17.3


 Pada kesempatan kali ini, saya akan membagikan tutorial cara menambahkan efek musim gugur pada website. Efek musim gugur ini sangat menarik membuat website kita terlihat sangat indah untuk terlihat menarik oleh pengunjung. Silahkan perhatikan tutorial di bawah ini.

Berikut code sederhana untuk menambahkannya :

<!DOCTYPE html>
<html lang="en">

<meta charset="utf-8">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>New Day After Autumn</title>

<div id="container">
<link rel="stylesheet" type="text/css" href="css/autumn.css">
</head>
<body>
</div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
 <script type="text/javascript" src="js/autumn.js"></script>
</body>

</html>

Download source code lengkapnya pada link di bawah ini.


Referensi :

Membuat Efek Musim Gugur pada Website


 Imagezoom adalah plugin javascript yang bisa digunakan untuk melihat sebuah gambar dalam website dengan mode zoom. Saya akan membagikan source dari contoh website imagezoom. Mari baca dulu tutorialnya agar kamu dapat membuatnya dengan website yang sedang kamu kerjakan.

Bahan - bahannya :

Tutorialnya :

  1. Buat template sesuai keinginan anda. Pastikan terdapat gambar!
  2. Tempatkan link javascript di bagian header dan jquerynya. Contoh :
      3. <head>
          <script src="jquery.min.js"></script>
          <script src="imagezoom.js"></script>
        </head>
  3. Isikan pada bagian yang terdapat tag <img> nya code data-imagezoom="true" berikut :
    4. <img src="sampleimage/1.jpg" data-imagezoom="true">


Download source code:

Source code : Membuat image zoom Toko Online

Langganan: Postingan (Atom)