nah, kali ini saya akan beri tips buat sobat tentang bagaimana cara membuat menu di atas header blog.
nah, dengan header itu pengunjung blog sobat dapat memilih bagian mana yang sekiranya ada bacaan yang menarik untuk dibaca.
Langsung aja ya sob ke TKP !!!
Pertama :
sobat log in dulu di blog
Kedua :
sobat masuk ke menu templates => edit HTML kemudian centang expand widget yang ada di kiri atas.
Ketiga :
sobat cari kode ]]></b:skin> (mudahnya tekan tombol kombinasi CTRL+F, kemudian cari kode tadi)
Keempat :
sobat letakkan script berikut di atas kode itu.
/*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;
}
Kelima :
sekarang sobat cari kode </head>
Keenam :
silakan letakkan script berikut di bawah kode tadi
<div id='top'>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a href='url / link homepage '>home</a></li><li><a href='url / link 1'>judul link</a></li>
<li><a href='url / link 2'>judul link</a></li>
<li><a href='url / link 3'>judul link</a></li><li><a href='url / link 4'>judul link</a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>
Ketujuh :
ganti kode url / link 1' dengan url link yang ingin sobat jadikan menu. dan ganti judul link dengan judul lonk yang sobat inginkan. Contohnya : Link exchange.
seperti ini sob salah satu contohnya
<li><a href='http://fajarwahyuutama.blogspot.com/2012/10/ayo-bertukar-link.html'>Link Exchange</a></li>
Kedelapan :
silakan simpan.
Jadi deh..
Cara membuat menu di atas header blog ini sebenarnya mudah kalau sobat mau berusaha.
Nah, silakan mencoba ya sobat...
good luck! semoga tips yang saya berikan selalu bermanfaat buat sobat.
terimakasih ^_^
0 komentar:
Posting Komentar
Silakan berkomentar sesuai dengan topik. Jangan menyisipkan link aktif pada komentar dan jangan sampai komentar Anda masuk komentar SPAM.
Jangan salahkan Saya bila komentar Anda dihapus !