CARA MEMBUAT MENU HORIZONTAL DI ATAS HEADER
Senin, 11 Juli 2011
4 Komentar
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 Blog ancur ini 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. Cari Kode berikut untuk lebih cepat (F3) <b:skin><![CDATA[ masukan kode di bawah ini setelah kode tadi.. tepatnya sesudah keterangan /* Variable definitions
/*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;
}
6. lalu kamu cari code <body> gunakan ctrl + F untuk memudahkan pencarian.
7. Lalu sobat copas code berikut ini tepat dibawah code <body>
<div id='top'>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a href='http://adaisinya.blogspot.com/'>adaisinya.blogspot.com</a></li>
<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
SEMOGA BERGUNA
udah berhasil sob., makasih tutor nya., hhe., liat blog saya., ada kan menunya ? oh iya ., komentar balik yaa
BalasHapuslink telah terpasang di blog saya mohon di cek,,
BalasHapuswah detail banget tutorialnya. tapi sayang saya bukan lagi pengguna blogspot jadi ndag bisa ngikutin tutorna. semoga bermanfaat tutorna bagi blogger yaks.
BalasHapusoia kalao gak keberatan ditunggu kunjungan dan komen baliknya yaks.. lebih seneng lagi kalao di share di Facebook/Google+1 tuh ada tombol kanan atas pada postingan mercedes-benz *ngarep.com
BalasHapus