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
Untuk berjaga-jaga jika terjadi kesalahan sebaiknya backup dulu template anda dengan mengklik
Download Template Lengkap.
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...
Baca Juga Tutorial Berikut :
55d9fc4d-f159-41f4-b648-648facf9598d
1.03.01
»»