Vabrose: Cara Membuat MENU NAVIGASI HORISONTAL Menggunakan CSS dan HTML

Thursday, February 9, 2017

Cara Membuat MENU NAVIGASI HORISONTAL Menggunakan CSS dan HTML

Salam Blogger, Artikel BLOGINGPASURUAN kali ini tentang tutorial “Cara Membuat MENU NAVIGASI HORISONTAL menggunakan CSS dan HTML 2014”. Menu Navigasi Horisontal ini memiliki peran yang sangat penting dalam desain Blog, selain mempercantik blog tujuannya tak lain mempermudah pengunjung blog mengakses semua yang ada di dalam Blog Sobat.

Disini sobat Blogger akan saya sajikan beberapa desain Menu Horisontal, dan Sobat Blogger bisa memilihnya sendiri sesuai selera.

Bagaimana cara membuat Menu Navigasi Horisontal, berikut ini langkah langkahnya :

1. Silahkan Sobat masuk ke Akun BLOGGER Sobat

2. Pilih Template >> Pilih EDIT HTML

Catatan: Silahkan BACKUP dulu template Sobat, hal ini mencegah jika terjadi kesalahan sobat tidak kehilangan DESAIN TEMPLATE Sobat sebelumnya. Caranya lihat sebelah kanan atas menu EDIT HTML lalu tekan backup/restore atau cadangkan/pulihkan.

3. Cari kode berikut ]]></b:skin>

4. Letakkan ( setiap kode CSSdibawah ini ) diatas kode ]]></b:skin>

5. Simpan Template

6. Kemudian masuk ke LAYOUT ( Tata Letak )

7. Pilih Add gadget, Kemudian masukkan kode HTML ( dibawah ini ) dalam kotak HTML lalu tekan SAVE/Simpan ( lihat gambar di bawah ini )

Cara Membuat MENU NAVIGASI HORISONTAL KEREN menggunakan CSS dan HTML

klik untuk melihat gambar lebih besar

Posisi tambah gadget untuk menambahkan kode HTML-nya adalah seperti contoh diatas.

8. Selesai dan lihat hasilnya

CATATAN : Pertanyaannya, Bagaimana jika tidak memiliki desain kolom dibawah header, atau saya sudah memiliki MENU HORISONTAL namun tampilan kurang menarik ?

Okey… BLOGGINGPASURUAN akan sedikit menjelaskan jika ada pertanyaan seperti diatas, karena desain template tentunya berbeda antara satu dengan yang lainnya, Problem seperti pertanyaan diatas tentunya ada.
Langsung saja saya jelaskan :

1. Langkah diatas harus tetap dilakukan kecuali no. 6 sampai dengan no. 8

2. Setelah Sobat selesai melakukan langkah ke 5

3. Silahkan sobat masuk ke TEMPLATE kemudian pilih EDIT HTML ( jangan keluar dari menu ini )

Perhatikan gambar dibawah ini :

Klik untuk memperbesar gambar

4. Pada gambar diatas adalah contoh Menu Horisontal milik saya.

Klik untuk memperbesar gambar

5. Pada gambar diatas lihat no. 2 dan 3

- Lihar gambar no. 2 (Pada menu EDIT HTML ketik Ctrl + F ) : kemudian ketik salah satu judul Menu Horisontal milik sobat (saya mengetikan judul BERANDA judul menu horisontal milik saya )

- Setelah Sobat ketik judulnyalalu tekan ENTER.

- Lihat gambar no. 3 , Yang saya blok warna abu abu adalah kode HTML yang harus Sobat ganti dengan kode HTML dibawah ini.

- Ingat jangan hapus kode yang saya tulis “ jangan hapus kode ini “

Di bawah ini 10 contoh menu horisontal berikut kode CSS dan HTML nya :

Horizontal menu bar: Desain #1

Kode CSS

#Hr-1 {

list-style:none;

margin:0 0 0px 0;

padding:0;

}

#Hr-1 li {

margin:0;

padding:0;

float:left;

}

#Hr-1 li a {

display:inline;

overflow:hidden;

width:auto;

margin:0;

padding:8px 12px;

text-decoration:none;

text-transform:capitalize;

text-align:center;

font-weight:bold;

font-style:normal;

font-size:23px;

color:rgba(236,236,236,0.5);

text-shadow:0px 1px 0px #000;

border-right:1px solid #202020;

background-color::#4B4B4B;

background:-webkit-gradient(linear,left top,right bottom,from(#2B2B2B),color-stop(0.33 #4B4B4B),color-stop(0.66 #5B5B5B),to(#3D3C3C));

background:-webkit-linear-gradient(top,#2B2B2B 0%,#4B4B4B 33%,#5B5B5B 66%,#3D3C3C 100%);

background:-moz-linear-gradient(top,#2B2B2B 0%,#4B4B4B 33%,#5B5B5B 66%,#3D3C3C 100%);

background:-o-linear-gradient(top,#2B2B2B 0%,#4B4B4B 33%,#5B5B5B 66%,#3D3C3C 100%);

background:-ms-linear-gradient(top,#2B2B2B 0%,#4B4B4B 33%,#5B5B5B 66%,#3D3C3C 100%);

background:linear-gradient(top,#2B2B2B 0%,#4B4B4B 33%,#5B5B5B 66%,#3D3C3C 100%);

-moz-transition:all 0.5s ease-in;

-webkit-transition:all 0.5s ease-in;

-o-transition:all 0.5s ease-in;

transition:all 0.5s ease-in;

}

#Hr-1 li a:hover,#Hr-1 li a:active,#Hr-1 li a:focus {

color:#ECB036;

text-shadow:0px 1px 0px #8E620C;

background:#313130;

-moz-transition:none;-webkit-transition:none;-o-transition:none;transition:none;

}

Kode HTML

<li><a href="#">Tutorials</a></li>

<li><a href="#">Widgets</a></li>

<li><a href="#">Templates</a></li>

<li><a href="#">Services</a></li>

<li><a href="#">Contact</a></li>

<li><a href="#">Advertise</a></li>

</ul>

Horizontal Menu Bar: Desain #2

KODE CSS

#Hr-2 {

list-style:none;

margin:0 0 10px; 0;

padding:0;

}

#Hr-2 li {

margin:0;

padding:0;

float:left;

}

#Hr-2 li a {

display:inline;

position:relative;

margin:0;

padding:10px 13px;

width:auto;

height:auto;

text-decoration:none;

text-align:center;

font-style:normal;

font-size:24px;

font-weight:bold;

color:#2B2B2B;

text-shadow:0px 1px 0px #1F1F1F;

text-transform:capitalize;

border-right:1px solid #666562;

background:-webkit-gradient(100% 0%,0% 0%,from(#ABA9A6),color-stop(0.35 rgba(177,176,173,0.6)),color-stop(0.70 #A3A19D),to(#92908C));

background:-moz-linear-gradient(top,#ABA9A6 0%,rgba(177,176,173,0.6) 35%,#A3A19D 70%,#92908C 100%);

background:-webkit-linear-gradient(top,#ABA9A6 0%,rgba(177,176,173,0.6) 35%,#A3A19D 70%,#92908C 100%);

background:-o-linear-gradient(top,#ABA9A6 0%,rgba(177,176,173,0.6) 35%,#A3A19D 70%,#92908C 100%);

background:-ms-linear-gradient(top,#ABA9A6 0%,rgba(177,176,173,0.6) 35%,#A3A19D 70%,#92908C 100%);

background:linear-gradient(top,#ABA9A6 0%,rgba(177,176,173,0.6) 35%,#A3A19D 70%,#92908C 100%);

-moz-transition:all .8s ease-out;

-webkit-transition:all .8s ease-out;

transition:all .8s ease-out;

}

#Hr-2 li a:hover,#Hr-2 li a:active {

color:rgba(244,244,244,0.3);

text-shadow:0px 1px 0px #545453;

Available link for download