zonaridwan

- on 16.14 - No comments

Membuat Menu Responsive Ala Google

in tutorial - on 21.33 - No comments

Saya yakin Anda sudah familiar dengan desain google, karena anda setiap saat menggunakan internet pasti akan membuka google. Oke sekarang kita akan coba membuat desain ala google khususnya pada menu. Menu google akan muncul setelah Anda melakukan pencarian, diantara menunya yaitu ada Web, Images, Videos dan News. Ciri khas pada menu google yaitu ada semacam garis di bawah menunya.

Buat dulu file htmlnya

<html>
<head>
<link rel="stylesheet" href="styles.css">
<title>Menu Ala Google</title>
</head>
<body>
<div id='cssmenu'>
<ul>
<li class='active'><a href='#'><span>Web</span></a></li>
<li><a href='#'><span>Images</span></a></li>
<li><a href='#'><span>News</span></a></li>
<li class='last'><a href='#'><span>Videos</span></a></li>
</ul>
</div>
</body>
<html>

Selanjutnya buat file css nya

#cssmenu {
  background: #ffffff;
  width: auto;
}
#cssmenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1;
  display: block;
  zoom: 1;
}
#cssmenu ul:after {
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}
#cssmenu ul li {
  display: inline-block;
  padding: 0;
  margin: 0;
}
#cssmenu.align-right ul li {
  float: right;
}
#cssmenu.align-center ul {
  text-align: center;
}
#cssmenu ul li a {
  color: #aaa;
  text-decoration: none;
  display: block;
  padding: 15px 25px;
  font-family:'Calibri';
  font-weight: 300;
  font-size: 14px;
  position: relative;
  -webkit-transition: color .25s;
  -moz-transition: color .25s;
  -ms-transition: color .25s;
  -o-transition: color .25s;
  transition: color .25s;
}
#cssmenu ul li a:hover {
  color: #f96e5b;
}
#cssmenu ul li a:hover:before {
  width: 100%;
}
#cssmenu ul li a:after {
  content: "";
  display: block;
  position: absolute;
  right: -3px;
  top: 19px;
  height: 6px;
  width: 6px;
  background: #ffffff;
  opacity: .5;
}
#cssmenu ul li a:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: #f96e5b;
  -webkit-transition: width .25s;
  -moz-transition: width .25s;
  -ms-transition: width .25s;
  -o-transition: width .25s;
  transition: width .25s;
}
#cssmenu ul li.last > a:after,
#cssmenu ul li:last-child > a:after {
  display: none;
}
#cssmenu ul li.active a {
  color: #f96e5b;
}
#cssmenu ul li.active a:before {
  width: 100%;
}
#cssmenu.align-right li.last > a:after,
#cssmenu.align-right li:last-child > a:after {
  display: block;
}
#cssmenu.align-right li:first-child a:after {
  display: none;
}

Jenis huruf menggunakan calibri dan ketebalan 300 font-family:'Calibri'; font-weight: 300; dan warna #aaa. Sedangkan css untuk garis bawah tiap menu yaitu :

#cssmenu ul li a:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: #f96e5b;
  -webkit-transition: width .25s;
  -moz-transition: width .25s;
  -ms-transition: width .25s;
  -o-transition: width .25s;
  transition: width .25s;
}

Hasilnya adalah sebagai berikut, walaupun tidak mirip - mirip amat sih, silahkan di bandingkan.

Cara Membuat Menu Drop Down Sederhana

in tutorial - on 21.42 - No comments

Setelah kemarin saya posting jenis navigasi, sekarang kita mulai masuk tahap praktek. Untuk kali ini saya akan membuat menu drop down, masih ingatkan pembahasan kemarin. Kalau lupa bisa lihat lagi disini.
Hal yang harus dipersiapkan Anda sebelum praktek yaitu : Aplikasi Editor Text (bisa notepad, notepad ++, atau PSPad Editor), lalu Aplikasi Browser (seperti Mozila Firefox, google chrome dll).

Pertama buat file htmlnya simpan dengan nama index, yaitu :

<html>
<head>
<title>Menu Drop Down</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Kategori</a>
<ul>
<li><a href="#">Desain Web</a></li>
<li><a href="#">Internet</a></li>
<li><a href="#">Komputer</a></li>
<li><a href="#">Pemrograman</a></li>
</ul>
</li>
<li><a href="#">About</a>
<ul>
<li><a href="#">Kontak</a></li>
<li><a href="#">Tentang</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</li>
<li><a href="http://zonaridwan.blogspot.com">Sumber</a></li>
</ul>
</div>
</body>
</html>

Pada html diatas menu yang ada drop downnya yaitu pada menu kategori dengan bagiannya Desain Web, Internet, Komputer dan Pemrograman. Yang kedua yaitu pada about dengan bagiannya Kontak, Tentang dan FAQ.

Selanjutnya buat file cssnya dengan nama style sesuai dengan html diatas

.menu{
 border:none;
 border:0px;
 margin:0px;
 padding:0px;
 font: 67.5% Verdana, Helvetica, sans-serif;
 font-size:14px;
 font-weight:bold;
 }
 
 .menu ul{
 background:#BBB;
 height:50px;
 list-style:none;
 margin:0;
 padding:0;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;
        -webkit-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, .1);
 -moz-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, .1);
 box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, .1);
 }
 
 .menu li{
 float:left;
 padding:0px 0px 0px 1px;
 }
 
 .menu li a{
 color:#000;
 display:block;
 font-weight:normal;
 line-height:50px;
 margin:0px;
 padding:0px 25px;
 text-align:center;
 text-decoration:none;
 }
 
 .menu li a:hover{
 background:#BBB;
 color:#FFFFFF;
 text-decoration:none;
 -webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
 -moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
 box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
 }
 
 .menu ul li:hover a{
 background:#BBB;
 color:#FFFFFF;
 text-decoration:none;
 }
 
 .menu li ul{
 display:none;
 height:auto;
 padding:0px;
 margin:0px;
 border:0px;
 position:absolute;
 width:200px;
 z-index:200;
 }
 
 .menu li:hover ul{
 display:block; 
 }
 
 .menu li li {
 display:block;
 float:none;
 margin:0px;
 padding:0px;
 width:200px;
 background:#BBB;
}

.menu li:hover li a{
 background:none;
 }
 
 .menu li ul a{
 display:block;
 height:50px;
 font-size:12px;
 font-style:normal;
 margin:0px;
 padding:0px 10px 0px 15px;
 text-align:left;
 }

Silahkan dicoba dan dimodifikasi agar kemampuan anda terasah, source diatas berasal dari cssmenumaker dengan sedikit perubahan. Semoga bermanfaat.

6 Jenis Navigasi Web Yang Perlu Anda Ketahui

in desain - on 20.24 - 2 comments

Navigasi merupakan elemen yang sangat penting dalam sebuah website. Karena dengan navigasi pengunjung akan mengetahui lebih dalam lagi bagian - bagian situs / web yang dilihatnya. Dengan adanya navigasi, pengunjung akan merasa betah karena merasa dimudahkan untuk mengetahui hal- hal lain selain yang ada di halaman utama.

Navigasi pun harus diatur sedemikian rupa agar pengunjung merasa mudah ketika mengunjungi website anda. Serta harus disesuaikan tipe navigasi apa yang cocok untuk website anda, berikut saya akan memberikan beberapa referensi tipe navigasi.

# Menu Horizontal

Navigasi secara horizontal yang berbasis teks adalah menu yang paling umum dan sering dipakai oleh kebanyakan web. Menu horizontal terdiri dari daftar bagian dari situs yang masing - masing menggunakan satu atau dua kata. menu ini dibuat dengan gambar atau teks html, contohnya adalah :

# Menu Vertikal

Menu ini juga umum dan sering digunakan pada sidebar sebelah kiri atau sebelah kanan, biasanya terdiri dari bullet dan teks atau teks saja, contohnya adalah :

# Menu Drop Down

Merupakan bagian dari menu horizontal, hal ini digunakan ketika sebuah menu horizontal memiliki sub bagian lagi, contohnya adalah :

# Sub Menu

Untuk sub menu yaitu bagian dari menu drop down, atau dengan kata lain bagian yang lebih kecil dari menu horizontal, contohnya adalah :

# Teks dan Deskripsi

Menu ini berbentuk horizontal tapi perbedaanya adalah dari masing - masing menu menu ada deskripsi pendek yang terletak dibawahnya, contohnya adalah :

# Icon

Icon bisa ditambahkan diawal teks pada menu vertikal, dengan cara ini akan menambah kesan menu yang lebih hidup, karena dengan icon secara tidak langsung akan menggambarkan isi dari menu tersebut, contohnya adalah :

Jenis - jenis diatas adalah yang sering ditemukan di website, jika Anda menemukan yang baru silahkan menambahkan di kolom komentar.

Terimakasih

5 Langkah Membuat Desain Web Yang Benar

in desain - on 22.53 - 1 comment

Desain web yang bagus itu bermula dari tahapan atau langkah yang benar dalam proses desainnya. Tidak hanya asal jadi, seorang desainer harus memikirkan dahulu konsep web yang akan dibuat itu. Jika seorang desainer maupun Anda yang akan mencoba membuat desain tanpa ada perencaan yang matang maka hasil akhir dari desainnya juga tidak akan memuaskan.

Berikut beberapa tahapan dalam mendesain sebuah website yang perlu Anda ketahui dan praktekan.

1. Menuangkan konsep kedalam sebuah kertas

Tahap ini adalah yang paling penting, sebab segala konsep yang ada dalam pikiran Anda itu harus ditulis atau digambar di kertas. Tapi hanya berupa coretan-coretan saja, jadi segala sesuatu bayangan desain yang ada dalam pikiran Anda harus dituangkan pada kertas. Ttujuannya agar konsep tersebut tidak hilang.

2. Membuat Sketsa Desain Web Pada Kertas

Sebelum Anda menggambar pada photoshop atau aplikasi editor gambar lainnya, Anda harus membuat sketsaweb pada sebuah kertas. Sketsa tersebut meliputi gambaran dari header, menu, area artikel, sidebar dan footer, termasuk didalamnya juga harus ada ukuran berdasarkan pixel.

3. Menentukan Typografi

Yang ketiga yaitu tentukan terlebih daulu jenis huruf yang cocok untuk desain Anda. Apakah arial, courier, georgia, helvetica, times, trebuchet, atau verdana ?

4. Menentukan Warna Desain Web

Warna sangat penting hal ini utuk menunjukan ciri khas dari sebuah website. beberapa warna yang harus ditentukan yaitu warna background, warna body, warna header, warna menu warna footer, warna huruf.

5. Membuat Desain di Aplikasi

Pada tahapan terakhir ini Anda sudah mulai mendesain web dengan bantuan software. Untuk masalah cara - cara dan proses bagaimana mendesain sebuah website di photoshop akan saya jelaskan di artikel berikutnya.

Silahkan bagi yang mau menambahkan langkah yang lain di kolom komentar, saya sangat berterimakasih dan mengapresiasi.

Terimakasih

4 Hal Yang Perlu Dipersiapkan Untuk Mendesain Blog

in desain - on 21.47 - No comments

Blog atau web merupakan tempat seseorang mencurahkan segala apa yang dimilikinya untuk dunia agar diketahui, baik untuk tujuan kesenangan maupun untuk mencari uang di internet. Blog yang kita buat pasti ingin berbeda dengan blog orang lain terutama dalam masalah tempate (tampilan), coba bayangkan bagaimana perasaan kita jika blog kita tampilannya ada yang sama.

Hal ini tidak menutup kemungkinan, karena di internet banyak sekali tersedia template-template gratis dan bagus tentunya. Maka untuk menyiasatinya banyak para blogger yang merubah warna atau yang jago html akan mengutak atik template maupun membuat sendiri template (kalau yang ini pasti 100% beda).

Nah agar proses mendesain template blog bagus maka pada postingan pertama ini saya akan memberikan beberapa hal yang harus dipersiapkan sebelum proses mendesain template blog.

Pertama : Pilih Template Yang Akan Didesain

Anda tentukan dulu tipe template yang akan dipakai dan cocok untuk blog Anda, diantaranya apakah ingin memakai yang dua kolom (satu kolom posting dan satu kolom widget) atau yang tiga kolom (satu kolom posting dan dua kolom widget). Setelah Anda mempunyai pilihan lalu cari templatenya di internet (yang gratisan saja) lalu download.

Kedua : Aplikasi Edit Gambar

Yang harus dipersiapkan oleh Anda selanjutnya adalah aplikasi untuk mengedit gambar. Untuk masalah pemilihan aplikasi tergantung yang biasa anda pakai, misal yang ofline seperti : photoshop, corel draw, paint.net, gimp dan lain-lain sedangkan yang online seperti : Photoshop Express dan Pixlr.

Ketiga : Color Palette Generator

Aplikasi ini online untuk membantu kita menentukan kode warna yang sesuai dengan blog yang Anda desain. Aplikasi ini dapat anda kunjungi di www.degraeve.com

Keempat : Aplikasi Jenis Huruf

Aplikasi ini juga tidak kalah pentingnya yaitu untuk menentukan jenis huruf pada blog Anda, Untuk memilih jenis huruf Anda bisa gunakan Google Fonts atau Anda klik di www.google.com/fonts/ ada banyak sekali variasi huruf, Anda tinggal memilih yang sesuai dengan desain blog Anda.

Mungkin cuma itu yang saya ketahui, beberapa hal yang harus dipersiapkan dan ada ketika Anda mendesain template blog. Bagi Anda yang mau menambahkan silahkan tulis di kolom komentar.

Terimakasih