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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWDvFxudMdZ1fhgyMn27TTz2zqA6iIe2-w8O2TUfYSHQPy8xfneRvvoJRpYLxLTsws4KPx7sFBh2-Z8L9PapvocYvdTAQsG3m1OF7eQccXVuIC6r0rTEhlx6gsMXLsBnG_aczpMsVvz-Pb/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWDvFxudMdZ1fhgyMn27TTz2zqA6iIe2-w8O2TUfYSHQPy8xfneRvvoJRpYLxLTsws4KPx7sFBh2-Z8L9PapvocYvdTAQsG3m1OF7eQccXVuIC6r0rTEhlx6gsMXLsBnG_aczpMsVvz-Pb/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.

Sumber https://www.blogespada.net/

Share this post