Home CSS Tutorial Blog Tutorial Menciptakan Border Warna-Warni Di Sajian Navigasi

Tutorial Menciptakan Border Warna-Warni Di Sajian Navigasi

Tags

Cara Membuat Border Warna-warni di Navigasi Menu ala Evo Magz - Ok pada postingan kali ini Blog Espada akan membahas bagaimana menciptakan border warna-warni, Buat anda yg pernah melihat template Evo Magz niscaya anda menemukan ada Istimewa dari hidangan navigasinya, yap.., pada hidangan navigasi pada Template Evo Magz memakai Border warna-warni, yg menciptakan hidangan navigasi-nya terlihat lebih bagus serta cantik.

Cara tersebut pun saya gunakan pada template Blog saya ini, Berawal dari saya yg tertarik ingin menciptakan hidangan navigasi ibarat mirip Evo Magz, Namun tidak membuahkan hasil ketika membuatnya, itupun pun Googling dari di Internet, Kemudian saya berinisiatif untuk menempatkan bordernya saja pada template ini serta ternyata berhasil 100%.


Tertarik ingin mensokan Border Navigasi pada template blog anda ibarat diatas, Jika tertarik silahkan ikuti tutorial dibawah ini, mungkin caranya agak ribet namun nanti sanggup 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 hidangan Navigasi, Code-nya kira-kira ibarat 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 ibarat diatas, biasanya Kodenya berbeda-beda pada setiap template. Kalau kesulitan mencarinya silahkan cari isyarat nav (Kode tersebut niscaya terdapat pada isyarat Menu Navigasi)
  • Jika sudah ketemu, Langkah selanjutnya yaitu menambahkan Code border. Caranya silahkan Copy code CSS di Bawah ini serta paste di antara Kode Navigasi.
  • Contohnya jikalau Code Menu navigasi anda ibarat ini!
#navitions{background-color:#2C2C2C;border-bottom:0px solid #000}
#mobilenav{display:none}
#nav{height:50px;position:relative}
  • Maka tinggal menambahkan isyarat ini!
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0ixqxFWdKrjmSS03ylXVTGi0_8W6mzE7JRCSiTilknPUrI7dsRJdbl_CDO4m9VT6CaA5q_jbhDR_ez3tBm4Fl826tJBEUdGoL3op0HlXThZpzzg4Oio8aAIuhQJJmfhSNU1LpMVQ33fLq/s1600/line.png); background-repeat:repeat-x;background-position:Bottom center; 
  • Maka kesannya ibarat di bawah ini!
#navitions{background-color:#2C2C2C;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0ixqxFWdKrjmSS03ylXVTGi0_8W6mzE7JRCSiTilknPUrI7dsRJdbl_CDO4m9VT6CaA5q_jbhDR_ez3tBm4Fl826tJBEUdGoL3op0HlXThZpzzg4Oio8aAIuhQJJmfhSNU1LpMVQ33fLq/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 jikalau ingin border ada di atas Navigasi
  • Simpan Template serta Lihat hasilnnya, Biasanya border belum sesuai dengan Menu Navigasi di template anda.
  • Untuk mengatasinya silahkan Ubah sedikit Ukuran navigasi anda, sanggup dikurangi maupun ditambah ibarat ukuran 50px diatas serta sanggup anda sesuaikan sendiri
  • Semoga berhasil
Demikian artikel wacana Cara menambah Border Warna-warni di Menu Navigasi, Sekian yg sanggup saya bagikan serta biar Berhasil.

Artikel Terkait