Tempat Berbagi Berita, Cerita dan Derita

Kategori Yang Kalian Suka

Post ini diterbitkan pada : Sunday, August 15, 2010

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)
Download template lengkap
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 ^^
Do you like this post? You can share it with your community..
Dapatkan update artikel lewat email

Artikel Terkait

16 comments:

Mantaph sobat saya sangat senang anda dapat menulis posting kembali :)

ganti template nih mas
saya mau modif template mas yang saya pake :)

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

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 ^^

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.

oh iya saya mau nanya bagaimana cara membuat kolom post jadi bnayak kayak http://all-free-template.blogspot.com/

<div id='content-wrapper'>

Kode yg di atas ga ada, gimana dung?

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

kok kode div id='content-wrapper' gada ?

saya pake template lama, mohon bantuannya , thx

Beberapa template default blogger yang baru, mempunyai penulisan kode yang berbeda.

Coba cari kode :

div class='main-outer'

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 :)

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"/>

Sebelumnya makasih banyak Atas Tutor nya Sob. . .
Sudah aku cobain, tapi kok Menu kebawahnya ketutup Sama Baground Sob. . .
Ditunggu pencerahaanya. . .

mas tanya.
apakah "content-wrapper" dengan "main-outer" apakah sama?

mas....
gimana caranya menghapus navbar dari mas itu...
sooalnya navbar nae kejedot nih...

please reply as soon as possible

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

My Tweet

 
Site Meter
© 2008 Blogger Abstrak | Template by : O-zone | Owner : Angga Leoputra