Senin, 27 Februari 2012

Filled Under:

Cara Membuat Menu Horizontal Blog


Membuat menu horisontal atau menu navigasi pada blogspot sudah sepatutnya anda ketahui,tapi kalo template yang kamu gunakan sudah ada menu horisontalnya mungkin kamu pengen mengganti dengan menu horisontal baru yang kamu sukai juga gak apa2,biasanya menu navigasi berada tepat dibawah header.dan kali ini aq akan share tutorialnya aja buat temen2 yang pengen membuat menu horisontal tepat dibawah header.

  • Login ke account blogger kamu.
  • Pilih Tata Letak --> Edit HTML --> centang "Expand Templte Widget". Sebelum melakukan edit template, sebaiknya simpan dulu kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.
  • Cari Kode kode ]]></b:skin> dan Copy-Paste (copas) kode berikut di atasnya.Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

/* navbar
================== */

#bg_nav {
background: #ffffff;
width: 850px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #000000;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #000000;
border-bottom: 1px solid #ffffff;
overflow: hidden;
}
#bg_nav a, #bg_nav a:visited {
color: #000000;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}

#bg_nav a:hover {
color: #000000;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}

#navleft {
width: 500px;
float: left;
margin: 0px;
padding: 0px;
}
#navright {
width: 220px;
font-size: 11px;
float: right;
margin: 0px;
padding: 3px 5px 0px 0px;
}
#navright a img {
border: none;
margin: 0px;
padding: 3px 5px 0px 0px;
}

#nav {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}

#nav a, #nav a:visited {
background: #ffffff;
color: #000000;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px 8px 15px;
border-left: 1px solid #ffffff;
}
#nav a:hover {
background: #c06000;
color: #000000;
margin: 0px;
padding: 8px 15px 8px 15px;
text-decoration: none;
}

#nav li {
float: left;
margin: 0px;
padding: 0px;
}
#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}
#nav li li a:hover, #nav li li a:active {
background: #c06000;
padding: 7px 30px 7px 10px;
}

#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}

#nav li:hover ul {
left: auto;
display: block;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}

  • Kode css yang berwarna merah diatas sesuaikan dengan blog kamu.
  • Kemudian cari kembali kode seperti di bawah ini.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'
showaddelement='no'>
<b:widget id='Header1' locked='true' title='test
(Header)' type='Header'/>


... dan seterusnya ...

</b:section>
</div>

  • Letakkan kode dibawah ini tepat dibawah kode yang berkedip

<div id='bg_nav'>

<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
</ul>
</div>
</div>

<div id='navright'>

<form action='http://Alamat_Blog_Kamu.blogspot.com/search' id='searchform' method='get' name='searchform'> <input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Cari'/>
</form>

</div>

</div><!-- akhir bg_nav -->

  • Lalu save template kamu.
Petunjuk: rubah kode yang berkedip dengan link kamu.




9 komentar:

  1. http://Link_yang_dituju'>Add Link

    itu di masukin link yg mana gan... ? maaf bru belajar hehehee

    BalasHapus
  2. http://link yg di tuju . .
    masukan alamat untuk menuju ke halaman yang di tuju
    misalnya langsung menuju ke halaman ini :
    http://desta17.blogspot.com/2012/02/cara-membuat-menu-horizontal-blog.html

    terus add link
    bisa anda masukkan "nama" unt halman tsb

    jika msih ada yg blm mngrti bs d tanyak lg mas , , :)

    BalasHapus
  3. Trimakasih gan infony..

    sangat bermanfaat bagi perkembangan blog saya.. :)

    Blog Fuadditiya | The FIM Site

    BalasHapus
  4. siipp sukses selalu unt agan-agan blognya , ,

    BalasHapus
  5. infonya bkin tambah semangat mereparasi blog..
    mksh bgt om desta..
    kutunggu tips2 ngeblog lainnya..

    BalasHapus
    Balasan
    1. oke sama-sama mas hadi,,
      Semoga membantu tips-tipsnya

      Hapus
  6. oiya kalau mau naruh plug in facebook kyk pny om desta gitu gmn yach..
    1 lg :-)
    biar loadingnya ga lemot gitu gmn carannya..
    maaf msh gaptek ne om...:-)

    BalasHapus
    Balasan
    1. hehe,, tidak apa-apa mas hadi, sekedar sharing-sharing lebih asik,
      kalau mau bikin facebook kayak punya saya bisa kunjungi http://www.cerdasshare.com/2015/02/cara-membuat-fanspage-melayang-di-blog.html
      dan untuk agar loading biar tidak lemot jangan terlalu banyak pasang <iframe atau gambar atau animasi yang bisa membuat blog mas hadi terasa lemot.
      yang penting simple tapi berkualitas. Semoga Membantu :)

      Hapus