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.
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 Santosh Setty (http://webdesigninfo.wordpress.com) */
/*Modified : IB (http://www.menurutpendapatku.blogspot.com/) */
.glossymenu{
position: relative;
padding: 0 0 0 34px;
margin: 0 auto 0 auto;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJpcqK2yRc5HxpBW4GXTFzP1TJhogZRvmakutkimE1jQ90n9BYSfdkhHKP2q6m6PTObIxh-6VsjRBO0W6UhdTV1O2_SrmZFJqm0tjcvoqtzguFbp9vm-12YsjFwKyQR9HkW_xjA7UKIeAM/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/AVvXsEhon478DaYHDnYq-F_EJm9WTtJ1WO3_UbtEyGouPTXVPjOqYOci9ROfyj51cqeGGwXHWkxINXHwrclILwQBq1yLglA3h6fP8Km421yBZY2i4eSsbiCqof-eLXt1WwMMMOIVGbh_cmXA4YEN/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/AVvXsEjLSXPc_VGB0b8i2U7mvbRxiXOa0Zas1Ad4QgPzfKhYu3_6_1Y5BOjRCWvq850gqC_jcz95q3Ncv2dEmYOXgQm-5Wi3ACMax8VeML8EOhV8lOCyDQQM-yiifQEhxPZjBDftXqdzd5dLG3Gx/s1600/3.bmp) no-repeat right top; /*right tab image path*/
}
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 Santosh Setty (http://webdesigninfo.wordpress.com) */
/*Modified : IB (http://www.menurutpendapatku.blogspot.com/) */
.glossymenu{
position: relative;
padding: 0 0 0 34px;
margin: 0 auto 0 auto;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJpcqK2yRc5HxpBW4GXTFzP1TJhogZRvmakutkimE1jQ90n9BYSfdkhHKP2q6m6PTObIxh-6VsjRBO0W6UhdTV1O2_SrmZFJqm0tjcvoqtzguFbp9vm-12YsjFwKyQR9HkW_xjA7UKIeAM/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/AVvXsEhon478DaYHDnYq-F_EJm9WTtJ1WO3_UbtEyGouPTXVPjOqYOci9ROfyj51cqeGGwXHWkxINXHwrclILwQBq1yLglA3h6fP8Km421yBZY2i4eSsbiCqof-eLXt1WwMMMOIVGbh_cmXA4YEN/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/AVvXsEjLSXPc_VGB0b8i2U7mvbRxiXOa0Zas1Ad4QgPzfKhYu3_6_1Y5BOjRCWvq850gqC_jcz95q3Ncv2dEmYOXgQm-5Wi3ACMax8VeML8EOhV8lOCyDQQM-yiifQEhxPZjBDftXqdzd5dLG3Gx/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="http://www.menurut pendapatku.blogspot.com/Ayo/"><b>Ayo</b></a></li>
<li><a href="http://menurut pendapatku.blogspot.com/search/label/Memasak/"><b>Memasak</b></a></li>
<li><a href="http://menurut pendapatku.blogspot.com/search/label/Ikan/"><b>Ikan</b></a></li>
<li><a href="http://menurut pendapatku.blogspot.com/search/label/Asin/"><b>Asin</b></a></li>
<li><a href="http://menurut pendapatku.blogspot.com/search/label/Enak/"><b>Enak</b></a></li>
<li><a href="http://menurut pendapatku.blogspot.com/search/label/Sekali"><b>Sekali</b></a></li>
</ul>
Jangan lupa pada bagian a href="http://menurut pendapatku.blogspot.com/search/label/Enak/ anda ubah suaikan dengan tampilan 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.
<ul class="glossymenu">
<li class="current"><a href="http://www.menurut pendapatku.blogspot.com/Ayo/"><b>Ayo</b></a></li>
<li><a href="http://menurut pendapatku.blogspot.com/search/label/Memasak/"><b>Memasak</b></a></li>
<li><a href="http://menurut pendapatku.blogspot.com/search/label/Ikan/"><b>Ikan</b></a></li>
<li><a href="http://menurut pendapatku.blogspot.com/search/label/Asin/"><b>Asin</b></a></li>
<li><a href="http://menurut pendapatku.blogspot.com/search/label/Enak/"><b>Enak</b></a></li>
<li><a href="http://menurut pendapatku.blogspot.com/search/label/Sekali"><b>Sekali</b></a></li>
</ul>
Jangan lupa pada bagian a href="http://menurut pendapatku.blogspot.com/search/label/Enak/ anda ubah suaikan dengan tampilan 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.
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!
