16 Desember 2010

Cara Membuat Top Menu di atas Header

Tutorial Blog dan Bisnis Online Terpercaya Cara Membuat Top Menu di atas Header , Cari Tutorial blogspot, Bisnis Online terpercaya Cara Membuat Top Menu di atas Header dan Tips seputar komputer Cara Membuat Top Menu di atas Header di Cyber Man yang menyediakan tutorial blogspot dan bisnis online terbaru dan terpercaya.
Salam blogger mania sobat..udah lama nieh cyber man gak menyapa cyber mania semua..kemaren sibuk merayakan hari raya jadinya gak sempet posting dech..hehe tapi untuk menjaga trafic blogger harus terus posting kan..hehe baiklah kali ini cyber man ingin share ke cyber mania 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.akuntanmaniak.co.cc/ atau bisa juga di http://www.jendelamusikindonesia.co.cc/ dech. Bagaimana apakah sudah paham maksud top menu itu..?kalo udah langsung dech capcus.



1. Login di blogger dengan ID Cyber Mania
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;
}


taruh tepat dibawah code <b:skin><![CDATA[ lalu tarik slide kebawah sedikit dan dibawah code tadi cyber mania pasti akan menemukan serangkaian code perihal deskripsi blog. nah lalu cyber mania code panjang di atas tadi tepat di bawah serangkaian code deskripsi blog.6. lalu cyber mania 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.jendelamusikindonesia.co.cc/'>Home</a></li>
<blink><li><a href='
http://www.jendelamusikindonesia.co.cc/2010/09/tangga-lagu-terpopuler.html' title='Tangga Lagu'>Tangga Lagu</a></li></blink>
<li><a href='
http://www.jendelamusikindonesia.co.cc/2010/09/download-mp3.html' title='Download MP3'>Download Mp3</a></li>
<li><a href='
http://www.jendelamusikindonesia.co.cc/2010/09/download-full-album.html' title='Download Full Album'>Download Full Album</a> </li>
<li><a href='
http://www.jendelamusikindonesia.co.cc/2010/09/aliran-musik.html' title='Aliran Musik'>Aliran Musik</a></li>
<li><a href='
http://www.jendelamusikindonesia.co.cc/2010/09/old-pick.html' title='Old Pick'>Old Pick</a> </li>
<li><a href='
http://www.jendelamusikindonesia.co.cc/2010/09/request-lagu.html' title='Request Lagu'>Request Lagu</a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>


yang perlu diperhatikan kata berwarna biru silahkan cyber mania ganti sesuai keinginan cyber mania.

8. Simpan dan lihat hasilnya. Selamat mencoba...

Tidak ada komentar:

Posting Komentar