Januari 20, 2012

Cara Memasang Menu Horizontal CSS

Tentu semua blogger sudah tahu menu horizontal dan kalau kita cari di google juga sudah banyak postingan tentang menu horizontal.
Kali ini Tutorial Blog sekedar share Cara Memasang Menu Horizontal CSS untuk yang belum tahu cara memasang menu horizontal CSS dan saya akan menjelaskan cara memasang menu horizontal CSS

Berikut ini tutorial cara memasang menu horizontal CSS :

1.     Login ke blogger dengan akun kamu

2.     Pilih Design lalu pilih Edit HTML tanpa mencentang Expand Widget Template

3.     Kenudian cari kode ]]></b:skin>

4.     Masukan kode di bawah ini tepat di atas ]]></b:skin>

ul#menu { margin:0; padding:0; list-style-type:none; width:auto; 
position:relative; display:block; height:36px; font-size:12px; 
font-weight:bold; text-transform:lowercase; background:transparent url
("http://2.bp.blogspot.com/-s8vZlDKkCRM/TxkljIIxXGI/AAAAAAAAALo/FacUqwdkibQ/s1600/bg.jpg") repeat-x top left; font-family:"Trebuchet MS",Helvetica,Arial,Verdana,sans-serif; border-bottom:1px solid #000000; border-top:1px solid #000000; } 
ul#menu li { display:block; float:left; margin:0; pading:0; } 
ul#menu li a { display:block; float:left; color:#999999; 
text-decoration:none; font-weight:bold; padding:12px 20px 0 20px; height:24px; } 
ul#menu li a:hover { color:#FFFFFF; background:transparent url("http://2.bp.blogspot.com/-C_c7Swba4oA/Txkoy32w5WI/AAAAAAAAALw/Qyxn7idOsMI/s1600/over.jpg") no-repeat top right; }

5. Cari kode script <body>

6. Masukan kode di bawah ini tepat di bawah <body>

<ul id="menu"> 
<li><a href="http://trikdantutorialblog.blogspot.com/2012/01/cara-memasang-menu-horizontal-css.html" title="Home">Home</a></li>
<li><a href="#" title="">Portfolio</a></li>
<li><a href="#" title="">Blog</a></li>
<li><a href="#" title="">Contact</a></li> 
<li><a href="#" title="">Links</a></li> 
</ul>

7. Setelah selesai simpan template kamu dan lihat hasilnya

Selamat mencoba, semoga berhasil dan bermanfaat.

Happy Blogging

Tags : Menu Horizontal

Berlangganan artikel
dari Tutorial Blog

Buy me a cup of Cofee

Penulis: Tutorial Blog ~ Tutorial Blogger | Free Template | SEO Blogger

Artikel Cara Memasang Menu Horizontal CSS ini dipublish oleh Tutorial Blog pada tanggal, Januari 20, 2012
Terima kasih Anda telah membaca artikel tentang Cara Memasang Menu Horizontal CSS dan Anda bisa menemukan artikel Cara Memasang Menu Horizontal CSS ini dengan url http://trikdantutorialblog.blogspot.com/2012/01/cara-memasang-menu-horizontal-css.html, Anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara Memasang Menu Horizontal CSS ini sangat bermanfaat bagi teman-teman anda, namun jangan lupa untuk meletakkan link Cara Memasang Menu Horizontal CSS sebagai sumbernya. Semoga artikel ini dapat bermanfaat dan menambah wawasan kita semua. Terima kasih atas kunjungan serta kesediaan Anda membaca dan berkomentar tentang artikel ini

:: Get this widget ! ::

Berikan komentar asal jangan Spam!!
Mohon tidak memasang anchor text link di dalam kotak komentar,
nanti komentar akan saya hapus, terima kasih