Hallo semua kali ini saya akan share semua tentang bagaimana cara membuat top menu atau link menu di atas header blog. Kalau kalian bingung kalian bisa tilik dech contoh nya di http://www.fhasixteen.blogspot.com/ atau bisa juga di blog saya sendiri . Bagaimana apakah sudah paham maksud top menu itu..?kalo udah langsung dech dicoba semoga tips ini bisa anda sekalian mengerti
1. Login di blogger dengan ID kamu
2. Klik menu Layout
3. Klik Tab Edit HTML
4. Centang Expand Template Widget agar code dapat terlihat semua
5. Masukan code berikut
/*The top Menu*/
#top{
margin:auto;
padding: 0;
width: 100%;
background:#000000;
border-bottom:1px solid #373127;
}
#top-wrap{
margin:auto;
padding: 0;
width: 960px;
background:#000000;
}
#navwrap {margin: 0px auto; width:560px; float:left;background:#080705;}
.topnav ul {list-style:none;margin:0;padding:0px; float:left;}
.topnav li {float:left;margin:0;text-align:center;}
.topnav li a {font-family: georgia; font-weight:bold; font-size:10px;display:block;padding:10px 10px;color:#fff;text-decoration:none; text-transform:uppercase;}
.topnav li a {background:none; }
.topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#ffffff; color:#000000;}
/*The top Menu*/
#med{
margin:auto;
padding: 0;
width: 100%;
background:#000000;
}
#med-wrap{
margin:auto;
padding: 0;
width: 960px;
}
.mednav ul {list-style:none;margin:0;padding:0px; float:left;}
.mednav li {float:left;margin:0;text-align:center;}
.mednav li a {font-family: georgia; font-weight:bold; font-size:11px;display:block;padding:10px 10px;color:#000000;text-decoration:none; text-transform:lowercase;}
.mednav li a {background:none; }
.mednav li a:hover, li a:focus, li a:active {text-decoration:underline; color:#000000;}
#navbar-iframe {
display: none !important;
}
#top{
margin:auto;
padding: 0;
width: 100%;
background:#000000;
border-bottom:1px solid #373127;
}
#top-wrap{
margin:auto;
padding: 0;
width: 960px;
background:#000000;
}
#navwrap {margin: 0px auto; width:560px; float:left;background:#080705;}
.topnav ul {list-style:none;margin:0;padding:0px; float:left;}
.topnav li {float:left;margin:0;text-align:center;}
.topnav li a {font-family: georgia; font-weight:bold; font-size:10px;display:block;padding:10px 10px;color:#fff;text-decoration:none; text-transform:uppercase;}
.topnav li a {background:none; }
.topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#ffffff; color:#000000;}
/*The top Menu*/
#med{
margin:auto;
padding: 0;
width: 100%;
background:#000000;
}
#med-wrap{
margin:auto;
padding: 0;
width: 960px;
}
.mednav ul {list-style:none;margin:0;padding:0px; float:left;}
.mednav li {float:left;margin:0;text-align:center;}
.mednav li a {font-family: georgia; font-weight:bold; font-size:11px;display:block;padding:10px 10px;color:#000000;text-decoration:none; text-transform:lowercase;}
.mednav li a {background:none; }
.mednav li a:hover, li a:focus, li a:active {text-decoration:underline; color:#000000;}
#navbar-iframe {
display: none !important;
}
tepat dibawah code <b:skin><![CDATA[ lalu tarik slide kebawah sedikit dan dibawah code tadi kalian pasti akan menemukan serangkaian code perihal deskripsi blog. nah lalu kamu copy code panjang di atas tadi tepat di bawah serangkaian code deskripsi blog.
6. lalu kamu cari code <body> gunakan ctrl + F untuk memudahkan pencarian.
7. Lalu cyber mania copas code berikut tepat dibawah code <body>
<div id='top'>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a href='http://www.fhasixteen-tutorial.blogspot.com/'>Home</a></li>
<blink><li><a href='http://fhasixteen-tutorial.blogspot.com/search/label/Tips-Trik%20Windows%20dan%20Komputer' title='Tips Trik'>Tips Trik Windows & Komputer</a></li></blink>
<li><a href='isi dengan URL Anda' title='Isi Tittle Tab'>isi dengan keterangan URL</a></li>
<li><a href='................................' title='...................'>.......................</a> </li>
<li><a href='.................................' title='.................'>.........................</a></li>
<li><a href='................................' title='..............'>.................</a> </li>
<li><a href='...................................' title='..............'>.........................</a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>
yang perlu diperhatikan kata berwarna biru silahkan Anda ganti sesuai keinginan Anda dan kalau inign memperbanyak tab tinggal copy <li><a href='isi dengan URL Anda' title='Isi Tittle Tab'>isi dengan keterangan URL</a></li> dan Anda isi .
8. Simpan dan lihat hasilnya. Semoga Tips yang saya share ini bisa membantu anda dalam Blogging
Salam Fhasixteen...
0 komentar "Cara Membuat Top Menu Horizontal di Atas Header", Baca atau Masukkan Komentar
Posting Komentar