Cara Mudah Membuat Menu Horizontal CSS Stripped Red Blogger/Blogspot ~ Knowledge Of The World

Menu/Navigasi adalah bagian blog/website yang tidak dapat dipisahkan. Keberadaannya sangat penting sebagai alat bagi pengunjung menuju ke bagian/halaman blog/website.

Pada posting kedua CSS Horizontal Menu untuk Blogger/Blogspot, saya persembahkan "Stripped Red Horizontal Menu for Blogger Blog"

Cara memasang widget menu horizontal menu di Blogger/Blogspot:

1. Masuk ke dashboard > Design/Rancangan > edit HTML

2. Masukkan kode CSS tepat di ATAS ]]></b:skin> (gunakan Ctrl + F untuk mencari)
Kode CSS:

ul.menu {list-style-type:none;width:auto;position:relative;display:block;height:33px;font-size:.6em;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifDnspj-YE2mu0N1Z5H3rVLtj3VAe6bBVbGKeEi8zpPJUufhInHqHs1f6rauZvRGcHBy47N2jgyudZko7wj_zq_IE2vHxHn0_5rt8UBf03twOSEa4-yCmeDM82Zex-blJ0oE2v9s4LLWs/s1600/bg.png") repeat-x top left;font-family:Verdana,Helvetica,Arial,sans-serif;border:1px solid #000;margin:0;padding:0;}
ul.menu li {display:block;float:left;margin:0;padding:0;}
ul.menu li a {float:left;color:#A79787;text-decoration:none;height:24px;padding:9px 15px 0;font-weight:normal;}
ul.menu li a:hover,.current {color:#fff;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifDnspj-YE2mu0N1Z5H3rVLtj3VAe6bBVbGKeEi8zpPJUufhInHqHs1f6rauZvRGcHBy47N2jgyudZko7wj_zq_IE2vHxHn0_5rt8UBf03twOSEa4-yCmeDM82Zex-blJ0oE2v9s4LLWs/s1600/bg.png") repeat-x top left;text-decoration:none;}
ul.menu .current a {color:#fff;font-weight:700;}
/*Garis Merah*/
ul.menu.red{background-color:#B11718;}
ul.menu.red li a:hover, .menu.red li.current {background-color:#DE3330;}

3. Save template.

4. Copy Kode HTML, ganti #(url homepage anda) dengan url homepage blog, dan # dengan url-url lain yang ingin dipasang di menu. Ganti kata-kata Home, Daftar Isi Blog, dan lain-lain dengan anchor text yang diinginkan.
Kode HTML:

<ul class="menu red">
<li class="current"><a href="#(url homepage anda)">Home</a></li>
<li><a href="#">Daftar Isi Blog</a></li>
<li><a href="#">Contact Me</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">SMS Gratis!</a></li>
</ul>

Model menu horizontal yang lain:

Menu horizontal sering dijumpai di banyak blog/website sebagai navigasi/menu utama. Di blog Blogger/Blogspot kita pun dapat dengan mudah membuatnya, bahkan hanya dengan CSS dan HTML.

Pada posting perdana CSS Horizontal Menu untuk Blogger/Blogspot kali ini, saya persembahkan kepada sobat Blogger semua "Simple Black Tabbed Horizontal Menu for Blogger Blog"

Cara memasang widget menu horizontal menu di Blogger/Blogspot:

1. Masuk ke dashboard > Design/Rancangan > edit HTML

2. Masukkan kode CSS tepat di ATAS ]]></b:skin> (gunakan Ctrl + F untuk mencari)
Kode CSS:

ul#menu {width: 100%;height: 43px;background: #FFF url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRPMMNu_XQ9al4KPBBXJ9OrqDtZ6mZ2doojGVDCtECfnZ1yPVVFX7CV1jsVo9MfypKZBR2mrTRKtJjWDHbxSlQNzNL9OGCOyfSOlrHGq7JoWgeCNW9l6JD_u0kKGd0Evyi9K87tW7ud1k/s1600/menu-bg.gif") top left repeat-x;font-size: 0.8em;font-family: "Lucida Grande", Verdana, sans-serif;font-weight: bold;list-style-type: none;margin: 0;padding: 0;}
ul#menu li {display: block;float: left;margin: 0 0 0 5px;}
ul#menu li a {height: 43px;color: #777;text-decoration: none;display: block;float: left;line-height: 200%;padding: 8px 15px 0;}ul#menu li a:hover {color: #333;}
ul#menu li a.current {color: #FFF;background: #FFF url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEfTUpyWSl-xWS5YKjvm53V3OuOHeBusoJ6cmAS-HJWnkXMDtZikHifWRhAPVT__Euitx4AVJrxu7Dk8IF2m-D4kd-Kqg8irS2G69NZKyRkJsVn1BlCiZwq9OudyNEsEqsPYBFKP2m9k0/s1600/current-bg.gif") top left repeat-x;padding: 5px 15px 0;}

3. Save template.

<ul id="menu">
<li><a class="current" href="#(url homepage anda)">Home</a></li>
<li><a href="#">Daftar Isi Blog</a></li>
<li><a href="#">Contact Me</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">SMS Gratis!</a></li>
</ul>

Contoh: