Menu Horizontal Menawan Menggunakan CSS Murni

| | Print This! | 8 comments

Do you like this post?

Udah beberapa harimi jarang nulis sebenarnya udah aku siapin tapi aku tunggu waktu yang tepat buat para Blogger. Artikel kali ini tentang Blogger Tutorial bagaimana cara membuat menu Horizontal profesional, menarik menggunakan CSS murni.
Bagi sobat Dunia Tutorial yang tertarik silahkan lihat demonya disini

• Login ke Blog - Rancangan - Edit Html
• Geser kebawah dan temukan kode </head>
• Dan letakkan kode dibawah ini sebelum kode </head>

<style type='text/css'>

#menu {text-align:left;height:36px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC_yi4z-cz0b9FaNbwONLlFqoLDR6fiR2LdeJln_MGq3Mdi4wnqG4tDcJ5ZB7FdPNHOVuTz44LWNWdvcygfJkRqxyv7wn1crVWC6eYpTb27HdnXdhcefr9hoQ7CiRf9UK6I5P9JK8ZJL8n/) repeat-x top;padding:0px 10px 0px 10px;vertical-align: top;margin:0px 4px 0px 4px;}

#menu ul {height:36px; width:100%;overflow:hidden;}

#menu li {  font: 15px Arial, Helvetica, sans-serif; display: inline;  margin-right: 10px; padding:5px 0px 5px 0px; font-weight:bold; line-height:36px;height:36px;}

#menu li a {  color: #494949;  text-decoration: none;}

#menu li a:hover {color: #333;text-decoration: underline;}

</style>

• Jika sobat Dunia Tutorial ingin merubah gambar menu, seilahkan ganti kode gambar berwarna merah 
• Sekarang simpan Template sobat
• Langkah selanjutnya adalah beralih ke Dasboard - Rancangan - Tambah Gadget
• Pilih "Html/JavaScript" dan masukkan kode dibawah ini

<div id="menu">

<ul>

<li><a href="#" title="#">Home</a></li>

<li><a href="#" title="#">Kesehatan</a></li>

<li><a href="#" title="#">Politik</a></li>

<li><a href="#" title="#">Ekonomi</a></li>

<li><a href="#" title="#"&gtHukum</a></li>

<li><a href="#" title="#">Tentang</a></li>

<li><a href="#" title="#">Dukungan</a></li>

<li><a href="#" title="#">Hubungi kami</a></li>

</ul>

</div>

• Simpan dan selesai 

Semoga berhasil!!

Artikel Terkait

Posted in: CSS,CSS3,menu horizontal