silahkan anda ikuti langkah-langkah di bawah ini untuk membuatnya :
Download template lengkap dulu !!! Guna mengantisipasi kesalahan nantinya XD..., Terimakasih.
- Login Ke Blogger
- Pilih Rancangan -> Edit HTML -> Centang Expand Widget
- Kemudian cari kode ]]></b:skin> Untuk lebih mudah gunakan CTRL+F kemudian copy kode di bawah ini dan letakan di atas kode berikut :
#menu-bar {
margin: 0px 0px 0px 0px;
padding: 6px 6px 0px 6px;
height: 34px;
line-height: 100%;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
box-shadow: 2px 2px 3px #666666;
-webkit-box-shadow: 2px 2px 3px #666666;
-moz-box-shadow: 2px 2px 3px #666666;
background: #8B8B8B;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#A9A9A9, endColorstr=#7A7A7A);
background: -webkit-gradient(linear, left top, left bottom, from(#A9A9A9), to(#7A7A7A));
background: -moz-linear-gradient(top, #A9A9A9, #7A7A7A);
border: solid 1px #6D6D6D;
}
#menu-bar li {
margin: 0px 6px 0px 6px;
padding: 0px 0px 6px 0px;
float: left;
position: relative;
list-style: none;
}
#menu-bar a {
font-weight: bold;
font-family: arial;
font-style: normal;
font-size: 12px;
color: #E7E5E5;
text-decoration: none;
display: block;
padding: 8px 20px 8px 20px;
margin: 0;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
text-shadow: 0px 0px 3px #000000;
}
#menu-bar .current a, #menu-bar li:hover > a {
background: #0399D4;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#EBEBEB, endColorstr=#A1A1A1);
background: -webkit-gradient(linear, left top, left bottom, from(#EBEBEB), to(#A1A1A1));
background: -moz-linear-gradient(top, #EBEBEB, #A1A1A1);
color: #444444;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
text-shadow: 0px 0px 0px #FFFFFF;
}
#menu-bar ul li:hover a, #menu-bar li:hover li a {
background: none;
border: none;
color: #666;
-box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#menu-bar ul a:hover {
background: #0399D4 !important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#04ACEC, endColorstr=#0186BA);
background: -webkit-gradient(linear, left top, left bottom, from(#04ACEC), to(#0186BA)) !important;
background: -moz-linear-gradient(top, #04ACEC, #0186BA) !important;
color: #FFFFFF !important;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0px 0px 0px #FFFFFF;
}
#menu-bar ul {
background: #DDDDDD;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#CFCFCF);
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CFCFCF));
background: -moz-linear-gradient(top, #FFFFFF, #CFCFCF);
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 30px;
left: 0;
border: solid 1px #B4B4B4;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-box-shadow: 2px 2px 3px #222222;
-moz-box-shadow: 2px 2px 3px #222222;
box-shadow: 2px 2px 3px #222222;
}
#menu-bar li:hover > ul {
display: block;
}
#menu-bar ul li {
float: none;
margin: 0;
padding: 0;
}
#menu-bar ul a {
padding:10px 0px 10px 15px;
color:#424242 !important;
font-size:12px;
font-style:normal;
font-family:arial;
font-weight: normal;
text-shadow: 2px 2px 3px #FFFFFF;
}
#menu-bar ul li:first-child > a {
border-top-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
border-top-right-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topright: 5px;
}
#menu-bar ul li:last-child > a {
border-bottom-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
}
#menu-bar:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#menu-bar {
display: inline-block;
}
html[xmlns] #menu-bar {
display: block;
}
* html #menu-bar {
height: 1%;
}- Kemudian cari kode <body> dan copy kode di bawah ini kemudian letakan di bawahnya
<ul id="menu-bar">
<li class="current"><a href="#">Home</a></li>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Products Sub Menu 1</a></li>
<li><a href="#">Products Sub Menu 2</a></li>
<li><a href="#">Products Sub Menu 3</a></li>
<li><a href="#">Products Sub Menu 4</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Services Sub Menu 1</a></li>
<li><a href="#">Services Sub Menu 2</a></li>
<li><a href="#">Services Sub Menu 3</a></li>
<li><a href="#">Services Sub Menu 4</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
Kalau Sudah Selesai Silahkan Anda Save / Simpan dan lihat hasilnya !
Semoga bermanfaat dan sangat membantu bagi kalian....
PERINGATAN! Bagi Yang Suka COPAS! Harap Cantumkan Link Sumbernya !!!, Terimakasih.
Demikianlah Artikel Pasang Menu Navigasi Horizontal Blog
Sekian Artikel Pasang Menu Navigasi Horizontal Blog, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingan Androkomp.net kali ini semoga bisa bermanfaat.
Anda sedang membaca artikel Pasang Menu Navigasi Horizontal Blog dan artikel ini url permalinknya adalah https://trajumas11.blogspot.com/2014/07/pasang-menu-navigasi-horizontal-blog.html Semoga artikel ini bisa bermanfaat.
Tag : Info, Study, Tips Blogger,