Membuat Design Navigasi Keren Kekinian

Created by - Adi Hermansyah
Malang, Jawa Timur

script css - membuat design (navigasi)

Dalam postingan pertama ini, saya akan membahas bagaimana cara membuat design navigasi header yang bagus dengan menggunakan coding berupa HTML, CSS ( mulai dari nol ),, untuk dapat mengketikan source code HTML, CSS anda membutukan software Text Editor seperti Notepad++ atau bisa juga Sublime Text, ada banyak sekali Text Editor, silahkan pilih sesuai keinginan anda.
Baiklah, langsung saja, tidak perlu basa basi lagi Langkah langkah nya adalah

1.Buatlah File HTML ( terserah akan dinamakan apa file nya yang penting dengan syntax .html / php )
Misal : index.html
Copy paste kode ini :

HTML

<header> <nav> <ul class ='ul1'> <li><a class ='home' href ='home.php'> Home </a></li> <li class ='active'><a class ='aktivitas' href ='admin-aktivitas.php'> Aktivitas </a></li> <li><a class ='img' href ='admin-profil.php'> <p style ='visibility: hidden;'> Gambar</p> </a> </li> <li><a class ='kategori' href ='admin-kategori.php'> Kategori </a></li> <li><a class ='user' href ='admin-user.php'> User </a></li> </ul> </nav> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"> <polygon class="svg--sm" fill="white" points="0,0 30,100 65,21 90,100 100,75 100,100 0,100"/> <polygon class="svg--lg" fill="white" points="0,0 15,100 33,21 45,100 50,75 55,100 72,20 85,100 95,50 100,80 100,100 0,100" /> </svg> </header>

2.Buatlah File CSS nya
Misal : style.css
Copy pastekan kode berikut ini :

CSS

header { position: relative; height: 250px; background-image: linear-gradient(#B3FFAB, #12FFF7); /*background-image: linear-gradient(#1F1C18, #dc2430);*/ } svg { position: absolute; bottom: 0; width: 100%; height: 100px; } *{ } input,textarea,select,a{ outline: none; } body{ margin: 0; } nav{ width: 100%; } nav .ul1{ border: none; margin-left: 22%; } nav .ul1 li{ position: relative; display: inline-block; margin: 0px 15px; padding: 15px 0px; } nav .ul1 li a{ width: 100px; display: block; text-decoration: none; text-align: center; padding: 50px 0px 50px 0px; font-family: Open Sans; font-weight: bold; font-size: 10pt; overflow: hidden; color: #000; position: relative; } nav .ul1 a.img{ background-image: url(../image/logo.png); background-size: 80px 80px; background-repeat: no-repeat; background-position: center; position: relative; } nav .ul1 li a.img:after{ color: blue; font-family: Quicksand; font-size: 8pt; padding: 5px; width: 88px; position: absolute; top: 119px; display: block; border-radius: 5px; border: 1px solid blue; transition: 0.5s; } nav .ul1 li a.img:hover:after{ background: blue; color: #fff; } nav .ul1 li a:before{ position: absolute; top: 25%; left: 45%; font-family: fontawesome; } nav .ul1 li a.home:before{ content: '\f015'; } nav .ul1 li a.aktivitas:before{ content: '\f113'; } nav .ul1 li a.kategori:before{ content: '\f12e'; } nav .ul1 li a.user:before{ content: '\f0f0'; } nav .ul1 li.active a{ text-shadow: 0px 0px 5px blue; border-top: 2px solid blue; color: #fff; transition: 1s; } nav .ul1 li.actives a:after{ background: blue; color: #fff; } nav .ul1 li.actives a:hover:after{ background: #fff; color: blue; } /* */ @media screen and (max-width: 707px){ nav .ul1 li{ margin: 0px 15px; } nav .ul1 li a{ width: 80px; font-size: 9pt; } nav .ul1 li a.img{ background-position: top; } nav .ul1 li a.img:after{ width: 68px; position: absolute; top: 90px; } } /* */ /* responsive : ?px */ @media screen and (max-width: 1100px){ nav .ul1{ margin-left: 12%; } } @media screen and (max-width: 900px){ nav .ul1{ margin-left: 5%; } } @media screen and (max-width: 800px){ nav .ul1{ margin-left: 0%; } } /* responsive : ?px */ @media (max-width: 699px) { .svg--lg { display: none; } } @media (min-width: 700px) { .svg--sm { display: none; } }

3. Dan Hasilnya akan jadi seperti ini :

Nah kira - kira akan jadi seperti ini nantinya Gaes ,,, 

Tapi ...

Ada beberapa kemungkinan FONT nya tidak jadi seperti hasil diatas

Nah kenapa? karena Font nya hanya akan muncul apabila font sudah terinstall di pc anda, atau akan muncul jika anda panggil melalui sumber dari font google . Bagaimana caranya? Ikuti langkah di bawah ini :

- Cari di Script Koding anda <head> </head>

- Tambahkan kode ini didalam head .. tepatnya disini <head> ( kode ) </head>

- Script Pemanggilan Font

<link rel ='stylesheet' href ='https://fonts.googleapis.com/css?family=Quicksand|Questrial|Fredoka+One|Patua+One|Montserrat|Open+Sans|Didact+Gothic|Antic+Slab|Overlock|Cherry+Swash|Didact+Gothic'>

Nah .. kira kira segini saja untuk Episode Pertama alias Posting paling awal di blogger

Terima Kasih telah berkunjung 

Untuk info lebih lanjut atau bertanya seputar design web/grafis hubungi nomor di bawah ini :

CP : 0853 5737 0938