Home / CSS / Cara Membuat Border Warna-Warni di Menu Navigasi

Cara Membuat Border Warna-Warni di Menu Navigasi

Cara Membuat Border Warna-Warni di Menu Navigasi 1

Cara Membuat Border Warna-warni di Navigasi Menu ala Evo Magz – Ok pada postingan kali ini Blog hhandromax.com akan membahas bagaimana menciptakan 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 menciptakan menu navigasi-nya terlihat lebih bagus dan cantik.

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

Cara Membuat Border Warna-Warni di Menu Navigasi 2

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

Cara Membuat Border Menu Navigasi ala Evo Magz

  • Sebagaimana 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 merupakan 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(https://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(https://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 mengganti 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, dapat dikurangi inginpun ditambah seperti ukuran 50px diatas dan dapat anda sesuaikan sendiri
  • Semoga berhasil
Demikian artikel tentang Cara menambah Border Warna-warni di Menu Navigasi, Sekian yang dapat admin bagikan dan semoga Berhasil.

Baca :  Cara Memasang Tombol Share MedSos Responsive di Blog

About Erzed