الهي لست للفردوس اهلا * ولا اقوى على نار الجحيم

Sabtu, 27 April 2013

Cara membuat menu di atas header blog


Kali ini saya akan membagi kan cara tentang membuat menu diatas header , caranya sangat mudah dan simple aja,
Mungkin anda mau tahu tampilan menunya seperti apa, jika ingin tahu tampilannya lihat aja tampilan atas blog saya, langsung aja kita buat yah.. .
1. Langkah pertama, Login ke blogger.com dengan akun anda
2. Pilih Edit HTML pada elemen Template anda
3. Cari kode ]]></b:skin>
4. Setelah ketemu, letakkan kode berikut ini di ATASnya
#catmenucontainer{
height:33px;
width:962px;
margin:0 auto;
background:url(http://4.bp.blogspot.com/_4HKUHirY_2U/S6mTqAdkycI/AAAAAAAAA2E/zxCSk-6MwLI/catmenu.jpg) repeat-x;
display:block;
padding:0px 0 0px 0px;
font-size:12px;
font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;
font-weight:normal;
border-top:1px solid #ffffff;
}
#catmenu{
margin: 0px;
padding: 0px;
width:962px;
background:#252525 url(http://4.bp.blogspot.com/_4HKUHirY_2U/S6mTqAdkycI/AAAAAAAAA2E/zxCSk-6MwLI/catmenu.jpg) repeat-x;
height:33px;
}
#catmenu ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#catmenu li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#catmenu li a, #catmenu li a:link, #catmenu li a:visited {
color: #ffffff;
display: block;
margin: 0px;
padding: 9px 10px 10px 10px;
}
#catmenu li a:hover, #catmenu li a:active {
background:url(http://3.bp.blogspot.com/_4HKUHirY_2U/S6mTqmy1HdI/AAAAAAAAA2M/6D7APyygWZA/catmenuhov.jpg) repeat-x;
color: #b9bf13;
margin: 0px;
padding: 9px 10px 10px 10px;
text-decoration: none;
}
#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {
background:#ff0202;
width: 150px;
color: #fae7df;
font-family:Tahoma,century gothic,Georgia, sans-serif;
font-weight: normal;
float: none;
margin: 0px;
padding: 9px 10px 10px 10px;
border-bottom: 1px solid #FF7800;
}
#catmenu li li a:hover, #catmenu li li a:active {
background:url(http://3.bp.blogspot.com/_4HKUHirY_2U/S6mTqmy1HdI/AAAAAAAAA2M/6D7APyygWZA/catmenuhov.jpg) repeat-x;
color: #00fff6;
padding: 9px 10px 10px 10px;
}
#catmenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 0px;
}
#catmenu li li {
}
#catmenu li ul a {
width: 140px;
}
#catmenu li ul a:hover, #catmenu li ul a:active {
}
#catmenu li ul ul {
margin: -34px 0 0 170px;
}
#catmenu li:hover ul ul, #catmenu li:hover ul ul ul,
#catmenu li.sfhover ul ul, #catmenu li.sfhover ul ul ul {
left: -999em;
}
#catmenu li:hover ul, #catmenu li li:hover ul,
#catmenu li li li:hover ul, #catmenu li.sfhover ul,
#catmenu li li.sfhover ul, #catmenu li li li.sfhover ul {
left: auto;
}

#catmenu li:hover, #catmenu li.sfhover {
position: static;
}
Untuk kode yang berwarna merah, silahkan ganti sesuai dengan lebar header blog anda . lebar header kode di atas adalah panjang header blog saya.
4. Setelah itu cari kode  <div id='header-wrapper'>
5. Letakkan kode berikut ini di atasnya
<div id='catmenucontainer'>
<div id='catmenu'>
    <ul>
      <li><a href='http://ariefradcliffe.blogspot.com/'><strong>Home</strong></a></li>
      <li><a href='http://ariefradcliffe.blogspot.com' title='Link-Title'><strong> Blog</strong></a>
          <ul class='children'>
            <li><a href='http://ariefradcliffe.blogspot.com/search/label/Tutorial%20blog' title='Tutorial blog'>Tutorial blog</a></li>
          </ul>
      </li>
      <li><a href='#='Link-Title'><strong>Photoshop</strong></a>
          <ul class='children'>
          </ul>
      </li>
      <li><a href='#' title='Link-Title'><strong>Php and Mysql</strong></a>
          <ul class='children'>
          </ul>
      </li>
      <li><a href='#title='Link-Title'><strong>Program VB 6</strong></a>
          <ul class='children'>
            <li><a href='#' title='Link-Title'>Visual Basic</a>
              </ul>
      </li>
      <li><a href='#' title='Link-Title'><strong>Animasi</strong></a>
          <ul class='children'>
            <li><a href='#' title='Link-Title'>Animasi 2D</a></li>
            <li><a href='#' title='Link-Title'>Animasi 3D</a></li>
          </ul>
      </li>
      <li><a href='#' title='Link-Title'><strong>Downloads</strong></a>
          <ul class='children'>
            <li><a href='#' title='Link-Title'>Aplikasi</a></li>
          </ul>
      </li>
      <li><a href='#' title='Link-Title'><strong>My facebook</strong></a></li>
      <li><a href='#' title='Berisi tentang info-info'><strong>Twitter</strong></a></li>
      <li><a href='#' title='Berisi tentang info-info'><strong>Google+</strong></a></li>
    </ul>
  </div>
</div>
Silahkan anda ganti kode yang berwarna Biru (dengan Link yg anda inginkan) dan kode berwarna Merah dengan judul menunya.
6. Jika sudah selesai, silahkan simpan template, sebelum di simpan lebih baik di Pratinjau dulu (hanya untuk memastikan).
Comments
0 Comments

Tidak ada komentar:

Poskan Komentar

Dalam hidup, akan selalu ada orang yg tak menyukaimu,namun itu bukan urusanmu.Lakukan apa yg kamu anggap benar dan hargai sisa hidupmu