Cara Membuat SubMenu Navigasi Horizontal Ver. Glossy (New)

in Membuat Blog, SubMenu

Menurut pendapatku banyak trik/tips blogging yang bisa kita gunakan untuk membuat menu navigasi horisontal pada template blogger. Ketika anda browse di-google menu navigasi horisontal, pasti banyak ditemukan metode pembuatan menu navigasi horizontal . Namun pada kesempatan ini saya akan membahas tips blogging tentang cara pembuatan glossy menu navigasi horizontal. Cara pembuatan glossy menu navigasi horizontal ini tidaklah sulit, dan jika anda mengikuti petunjuk pembuatan glossy menu navigasi horizontal secara teliti dan step by step, maka akan dihasilkan glossy menu navigasi horizontal yang akan mempercantik tampilan blog anda dan bisa membuat blog anda SEO juga loh.

Berikut tips blogging membuat glossy menu horizontal :

1. Sebelum anda akan membuat glossy menu navigasi horizontal, anda tentu harus sign in pada account blogger anda, kemudian tuju Dashboard --> Klik Tata Letak --> Edit HTML

2. Langkah kedua untuk membuat glossy menu navigasi horizontal adalah dengan menambahkan kode CSS berikut diatas tag ]]></b:skin>

/*Credits: By Muhammad Hilmy Haidar Fawwazie (www.thepowerofhilmy.co.cc) */
/*Modified : Hilmy Blogging Team (http://www.thepowerofhilmy.co.cc/) */

.glossymenu{
position: relative;
padding: 0 0 0 34px;
margin: 0 auto 0 auto;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4cU1mHb4OYc8tNAaSVmzGI9qDgBCki8YkT-PayiwLMOhCXI_B70l39f_oG5xkXPA2SdlyHcJbB_a7dKay3UDRjBowCeWx9F8aI3StcR-CpntzzeOqXeLEg1FNXCr_nhdoKLgLsEXwT39h/s1600/1.bmp) repeat-x; /*tab background image path*/
height: 46px;
list-style: none;
}

.glossymenu li{
float:left;
}

.glossymenu li a{
float: left;
display: block;
color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
}

.glossymenu li a b{
float: left;
display: block;
padding: 0 24px 0 8px; /*Padding of menu items*/
}

.glossymenu li.current a, .glossymenu li a:hover{
color: #fff;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW1mQOkccAJyZJ7KX8dWV9XRI7gS6sS1ro5vKVA3PGXRLq5dt2Dk07NMIy9VAuHYziENYggHRPCcOwRfK0fw6wV6HbK57JhUUOKynUEDJO3qcBe1avE0g0gZy14m8pEAXwIOpeJ9C6O5CQ/s1600/2.bmp) no-repeat; /*left tab image path*/
background-position: left;
}

.glossymenu li.current a b, .glossymenu li a:hover b{
color: #fff;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR5wXKdd6B9DfkF2IPJlACz3WGzPrnR1QnHQILCkR0SteMxmNW7COinaGv5tZJ_yHmXOXdZrGSre65H9SW_sh4L28lZzD4fI58YSclBNkdd6JTEc4EZ1qNeIfPRUp0Hp520OtG4YMM2meO/s1600/3.bmp) no-repeat right top; /*right tab image path*/
}

3. Langkah ketiga untuk membuat glossy menu navigasi horizontal adalah cari kode html berikut (letaknya pada bagian bagian bawah). <div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>

3. Langkah keempat untuk membuat glossy menu navigasi horizontal adalah dengan meletakkan kode HTML berikut tepat dibawah kode diatas (langkah ketiga)

<ul class="glossymenu">
<ul class="glossymenu">
<li class="current"><a href="#"><b>MenuHorizontal</b></a></li>
<li><a href="#"><b>Menu</b></a></li>
<li><a href="#"><b>Menu</b></a></li>
<li><a href="#"><b>Menu</b></a></li>
<li><a href="#"><b>Menu</b></a></li>
<li><a href="#"><b>Menu</b></a></li>
</ul>
Jangan lupa pada bagian a href="#" anda ubah suaikan dengan link glossy menu navigasi horizontal yang anda inginkan pada blog anda. Oh ya, jika blog anda lebar templatenya 660 px maka anda tidak bisa memasang 6 sub menu (glossy menu horizontal) oleh karenanya anda hanya bisa memasang 5 sub menu glossy menu navigasi horizontal atau untuk sub menu Sekali tidak bisa anda pasang. Jika Anda Ingin  Menambahkan Menu silahkan copas kode html mulai <li class="current"><a href="#"><b>MenuHorizontal</b></a></li>

4. Langkah terakhir dari membuat glossy menu navigasi horizontal adalah Simpan template anda.

Mudah bukan membuat glossy menu horizontal? Selamat mencoba membuat glossy menu horizontal, semoga bermanfaat dengan tips blogging glossy menu navigasi horizontal ini, terima kasih!