Cara Membuat Border Warna-Warni di Menu Navigasi

Cara Membuat Border Warna-warni di Navigasi Menu ala Evo Magz - Ok pada postingan kali ini Blog Espada akan membahas bagaimana membuat border warna-warni, Buat anda yang pernah melihat template Evo Magz pasti anda menemukan ada spesial dari menu navigasinya, yap.., pada menu navigasi pada Template Evo Magz menggunakan Border warna-warni, yang membuat menu navigasi-nya terlihat lebih bagus dan cantik.

Cara tersebut juga saya gunakan pada template Blog saya ini, Berawal dari saya yang tertarik ingin membuat menu navigasi mirip seperti Evo Magz, Namun tidak membuahkan hasil saat membuatnya, itupun juga Googling dari di Internet, Kemudian saya berinisiatif untuk memasang bordernya saja pada template ini dan ternyata berhasil 100%.


Tertarik ingin menjadikan Border Navigasi pada template blog anda seperti diatas, Jika tertarik silahkan ikuti tutorial dibawah ini, mungkin caranya agak ribet namun nanti bisa anda sesuakian sendiri nantinya. OK Langsung aja

Cara Membuat Border Menu Navigasi ala Evo Magz


  • Seperti biasa silahkan anda login ke akun blogger - Template - Edit HTML
  • Jika sudah cari Kode menu Navigasi, Code-nya kira-kira seperti dibawah ini!
#navitions{font:normal bold 14px Arial, sans-serif;background-repeat:repeat-x;background-position:Bottom center;border-bottom:0px solid #000}
#mobilenav{display:none}
#nav{height:50px;position:relative}
.menu,.menu *{margin:0;padding:0;list-style:none}
.menu li{position:relative}
  • Kira-kira codenya seperti diatas, biasanya Kodenya berbeda-beda pada setiap template. Kalau kesulitan mencarinya silahkan cari kode nav (Kode tersebut pasti terdapat pada kode Menu Navigasi)
  • Jika sudah ketemu, Langkah selanjutnya adalah menambahkan Code border. Caranya silahkan Copy code CSS di Bawah ini dan paste di antara Kode Navigasi.
  • Contohnya bila Code Menu navigasi anda seperti ini!
#navitions{background-color:#2C2C2C;border-bottom:0px solid #000}
#mobilenav{display:none}
#nav{height:50px;position:relative}
  • Maka tinggal menambahkan kode ini!
background-image:url(http://2.bp.blogspot.com/-yNE4A_H3C2o/U1E6RPYNEpI/AAAAAAAADRQ/UOP1mUKaxGE/s1600/line.png); background-repeat:repeat-x;background-position:Bottom center; 
  • Maka hasilnya seperti di bawah ini!
#navitions{background-color:#2C2C2C;background-image:url(http://2.bp.blogspot.com/-yNE4A_H3C2o/U1E6RPYNEpI/AAAAAAAADRQ/UOP1mUKaxGE/s1600/line.png);
background-repeat:repeat-x;background-position:Bottom center;border-bottom:0px solid #000}
#mobilenav{display:none}
#nav{height:50px;position:relative}
  • Silahkan ganti bottom dengan Top bila ingin border ada di atas Navigasi
  • Simpan Template dan Lihat hasilnnya, Biasanya border belum sesuai dengan Menu Navigasi di template anda.
  • Untuk mengatasinya silahkan Ubah sedikit Ukuran navigasi anda, bisa dikurangi maupun ditambah seperti ukuran 50px diatas dan bisa anda sesuaikan sendiri
  • Semoga berhasil
Demikian artikel tentang Cara menambah Border Warna-warni di Menu Navigasi, Sekian yang dapat saya bagikan dan semoga Berhasil.

Related Post :

4 Komentar untuk "Cara Membuat Border Warna-Warni di Menu Navigasi"

terima kasih atas tutorialnya.ijin pake buat background menu navigasi diblog saya

Silahkan gan dan terima kasih atas kunjungannnya!

Gak ngerti gan, coba cek diblog saya komchar.blogspot.com
tetap tidak bisa

Masak sih ngak bisa, template yang mas David gunakan sama dengan yang saya gunakan di blog ini. Gini aja...

coba langsung copy saja kode html yang sudah saya gabungkan diatas dan silahkan paste/ganti pada bagian #navitions ditemplate agan.

# Silahkan berkommentar besuai Topik.
# Disini anda boleh menyisipkan Link di Commentar
# Tetapi akan saya moderasi atau Review terlebih dahulu
# Dan Jangan sampai kommentar anda mengandung SPAM.

# Terima Kasih