Cara Membuat Navbar Dengan Code HTML CSS 3

Membuat Navigasi Menu Cantik Dengan CSS3

Menindak lanjuti posting sebelumnya,kali ini kita akan ngebahas tentang cara membuat nvabar menu dengan code HTML CSS 3.
Sebelum mulai proses memasukkan code ke template blog sobat,untuk lebih mudah nya,download dulu file Code CSS,Code HTML dan Preview Panduan nya disini.
Udah…?,sobat sekarang punya 3 file yg telah di download tadi kan? Yaitu file:

Code CSS.TXT
Code HTML.TXT
Preview.HTM

Nah,berhubung semua udah lengkap,sekarang kita lanjut ke tahap pemasangannya.
1. Login ke account blog sobat.
2. Pilih EDIT HTML (Jangan lupa klik Download Template Lengkap untuk berjaga” apabila ada kesalahan dalam mengedit nantinya)

3. Cari kode:

]]></b:skin>

Kemudian letakkan kode yg terdapat di file Code CSS.TXT tepat diatas kode tersebut.
4. Cari kode:

<div id='content-wrapper'>

Kemudian letakkan kode yg terdapat di file Code HTML.TXT tepat diatas kode tersebut.
5. Selesai deh pemasangannya.
Untuk mengedit nya agar sesuai dengan keinginan sobat,gw udah sediain file Preview.htm supaya sobat bisa ngeliat tampilan navbar ini.
Untuk menghapus/mengedit link-link pada navbar ini,coba perhatikan terlebih dahulu kode di bawah ini…

<li class="current"><a href="http://Namablog.blogspot.com">Home</a></li>

Contoh:
1. Sobat ingin mengganti Home dengan link menuju blog ini… maka kode HTML yang perlu sobat ganti di blog sobat adalah:
http://namablog.blogspot.com di ganti menjadi http://anggaleoputra.blogspot.com.
Sedangkan judul link Home di ganti menjadi InfoGaul.
2. Sobat ingin menghapus Link1-1 , maka sobat tinggal menghapus kode dibawah ini.

<li><a href="LINKTUJUAN">Link1-1</a></li>

Kalo ada yg bingung en mw nambahin ataupun ngasih saran,di tunggu commentnya yach..
Thx ^^

August 16, 2010 at 8:47 AM Visitor

K-blogger said...

OH iya mas kayaknya template rounded corner bagus di mozilla tapi di ie kurang rapi
oleh karena itu saya pesan yang versi biasa aja

maaf telah komen untuk ke3 kalinya

August 16, 2010 at 11:52 AM

Admin said...

K-blogger : Wah,akhirnya inget jg skrg.. thx nih udah di ingetin.. 2hari lalu ane memang niat buat update template rounded untuk browser IE,Opera dan Chrome.. cuma pas mati lampu,lupa lagi jadinya. hehe.. yowis,ditunggu yah postingan selanjutnya.. nanti diupdate templatenya ^^

August 16, 2010 at 11:55 AM

Oia, ini saya bukan ganti template koq.. kode template sebelumnya (yg sama dengan k-blogger pakai) hanya di tambahkan kode css 3 aja.. jadilah template yg skarang. Basic HTML nya jga masih sama koq dengan template sebelumnya.

August 19, 2010 at 10:16 PM

K-blogger : Gw udah agak lupa,coz' template yg itu jga masih dalam masa uji coba dan terbengkalai lama banget. Tapi klo gx salah,yg di edit itu code Main widget nya deh.. nanti deh,gw coba cek ulang lagi ^^

Marijuana : Koq bisa gx ada? pake template apa? thx

October 31, 2010 at 8:50 PM Visitor

ylsvtr said...

mau nanya lagi nih, udah ketemu terus dicopy ditarok diatas kode itu , semuanya sama kayak yang disuruh di posting ini , tapi pas di save kok ada tulisan :

Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: The element type "input" must be terminated by the matching end-tag "".

tolong dijawab yah makasih :)

November 1, 2010 at 1:13 AM

Yola --> Solusinya, cari kode div id="search"

Ngga jauh dari kode itu, ada kode yang akhiran penutupnya seperti ini :

type="text">
type="submit">

ganti kedua kode tersebut dengan kode di bawah ini :

type="text"/>
type="submit"/>

February 25, 2015 at 6:54 PM Visitor

Unknown said...

kalau gini caranya gimana gan?" Template tidak valid. Harap pastikan bahwa template well-formed dan sesuai dengan Spesifikasi Bahasa Template Blogger
Error 500"

Blogger Abstrak

Kategori Yang Kalian Suka

Paling banyak dibaca minggu ini

Post ini diterbitkan pada : Sunday, August 15, 2010

Cara Membuat Navbar Dengan Code HTML CSS 3

Artikel Terkait

16 comments:

My Tweet

Followers

Social Network

Labels