Translate...

Rabu, 08 Februari 2012

Cara Membuat Top Menu di atas Header

21.01  Unknown  No comments

r
1. Login di blogger dengan ID Anda
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, anda pasti akan menemukan serangkaian code perihal deskripsi blog. nah lalu code panjang di atas tadi tepat di bawah serangkaian code deskripsi blog.


6. Lalu cari code <body> gunakan ctrl + F untuk memudahkan pencarian.
7. Lalu copas code berikut tepat dibawah code <body>

<div id='top'>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a href='http://id-answer.blogspot.com/'>Blogger</a></li>
<blink><li><a href='http://pisbon.blogspot.com/' title='Pisbon'>Pisbon</a></li></blink>
<li><a href='http://pisbon-muslim.blogspot.com/' title='Al Quran'>Al Quran</a></li>
<li><a href='http://fishbonec.blogspot.com/' title='Comp@rtWork'>Comp@rtWork</a> </li>
<li><a href='http://retnosalon.blogspot.com/' title='Beauty'>Beauty</a></li>
<li><a href='http://mail.yahoo.com' title='Ymail'>Ymail</a> </li>
<li><a href='http://www.gmail.com' title='Gmail'>Gmail</a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>

yang perlu diperhatikan kata berwarna biru silahkan anda ganti sesuai keinginan anda

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

Posted in:

0 komentar:

Posting Komentar

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 

Horas....!!! tuhita sasudena....Selamat Datang kawan-kawan..

Selamat datang di situs blog saya, maaf atas kekurangannya atau saya dianggap sok atau yang laennya, sebenarnya saya membuat blog ini sebagai tempat belajar saya, sebagai tempat memuaskan rasa penasaran tentang semua yang ingin saya ketahui Selengkapnya tentang saya

Sedikit Profil tentang saya

Nama Saya Raja inal ritonga, saya seorang siswa SMK S.Harapan Al-washliyah Sigambal.Saya jurusan komputer, Yang terletak di Rantau Prapat,Medan,Indonesia

Navigasi

Social Stuff

Info