Membuat Navigasi menu Horizontal di blog

Membuat Navigasi menu Horizontal di blog - Hallo Sob Jody Blog, artikel kali ini berjudul Membuat Navigasi menu Horizontal di blog, kami telah menuliskan yang kami tahu pada artikel ini, semoga bermanfaat.

Judul : Membuat Navigasi menu Horizontal di blog
link : Membuat Navigasi menu Horizontal di blog

lihat juga


Membuat Navigasi menu Horizontal di blog


Tentunya teman- teman sudah tahu apa itu menu horizontal. Menu navigasi ini biasanya tempatnya di bagian atas dan biasanya di isi link- link yang ditujukan ke halaman- halaman tertentu. Kalau menu navigasi horisontal di blog saya berisikan HOME, TENTANG SAYA, FREE SOFTWARE, dst......OK...kalau tidak faham / mudeng dengan kata- kata saya tadi langsung saja saya beritahu sedikit gambarannya di bawah ini atau langsung saja lihat di Blos saya biar lebih jelas.


Tetapi kali ini akan saya share cara- cara yang sudah saya praktekan di Blog saya ini yang selanjutnya teman- teman bisaa memodifikasinya sendiri menyesuaikan dengan warna / corak / ukuran template blog teman- teman agar lebih serasi. OK..mari kita mulai

Membuat Menu Navigasi Horizontal di Blogspot
  • Login ke akun Blogger teman-teman
  • Pada Dashboard Pilih Tata Letak - Edit HTML
  • Jangan lupa back up dulu template teman- teman dengan mengeklik Download Template Lengkap jika nantinya terjadi kesalahan yang sudah terlanjur kita lakukan dan sudah kita simpan
  • Cari kode  ]]></b:skin>
  • OK...sudah ketemu? kalau sudah letakkan kode di bawah ini tepat di atas kode  ]]></b:skin> tadi

    /* navbar
    ================== */
    #bg_nav{
    background:#ffffff;
    width:900px;
    height:29px;
    font-size:11px;
    font-family:Arial,Tahoma,Verdana;
    color:#000000;
    font-weight:bold;
    margin:0px auto 0px;
    padding:0px;
    border-top:1px dotted #ececec;
    border-bottom:1px dotted #ececec;
    overflow:auto}
    #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:650px;
    float:left;
    margin:0px;
    padding:0px}
    #navright{
    width:220px;
    font-size:11px;
    float:right;
    margin:0px;
    padding:0px 0px 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 url('http://i47.tinypic.com/16ibkvc.jpg')repeat-x top left;
    color:#000000;
    display:block;
    font-weight:bold;
    margin:0px;
    padding:8px 15px 8px 15px;
    border-left:1px solid #ffffff}
    #nav a:hover{
    background:#ffffff url('http://i48.tinypic.com/jakvts.jpg')repeat-x top left;
    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:130px}
    #nav li li a, #nav li li a:link, #nav li li a:visited{
    background:#ffffff url('http://i48.tinypic.com/jakvts.jpg')repeat-x top left;
    width:120px;
    float:none;
    margin:0px;
    font-size:80%;
    padding:5px 5px 5px 5px;
    border-bottom:0px dotted #000;
    border-left:0px dotted #000;
    border-right:0px solid #ffffff}
    #nav li li a:hover, #nav li li a:active{
    background:#ffffff url('http://i48.tinypic.com/jakvts.jpg')repeat-x top left;
    border-bottom:0px dotted #000;
    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}
    1. Sesuaikan kode yang berwarna hijau dengan ukuran template kamu
    2. Sesuaikan warna- warna agar serasi dengan template blog kamu. Untuk kode warna bisa dilihat DISINI


  • Jika sudah selanjutnya cari kode di bawah ini [fokuskan pencarian pada kode berwarna hijau]

    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='4' showaddelement='yes'>
    <b:widget id='Header1' locked='true' title='Trik blog | Blog | Free software | free mp3 (Header)' type='Header'/>
    </b:section>
    </div>

  • Tambahkan Kode ini Tepat di bawah kode di atas

    <div id='bg_nav'>

    <div id='navleft'>
    <div id='nav'>
    <ul>
    <li><a href='http://didikandweta.blogspot.com/'>home</a></li>
    <li><a href='http://didikandweta.blogspot.com/'>Tentang saya</a>
    <ul>
    <li><a href='http://didikandweta.blogspot.com/2009/12/siapakah-didik-ma-saya-itu.html'>Tentang DIDIK MA</a></li>
    </ul></li>
    <li><a href='#'>Free software</a>
    <ul>
    <li><a href='http://didikandweta.blogspot.com/'>software Hp</a></li>
    <li><a href='http://didikandweta.blogspot.com/search/label/Software'>software Komputer</a></li><li><a href='http://didikandweta.blogspot.com/search/label/portable'>Portable software</a></li>
    </ul></li>
    <li><a href='#'>Tips dan trik</a>
    <ul>
    <li><a href='http://didikandweta.blogspot.com/search/label/facebook'>Tips facebook</a></li>
    <li><a href='http://didikandweta.blogspot.com/search/label/panduan%20blog'>Trik Blog</a></li>
    </ul></li>
    <li><a href='#'>free mp3</a>
    <ul>
    <li><a href='http://didikandweta.blogspot.com/2009/11/free-download-mp3-terbaru.html'>new mp3 pop</a></li>
    <li><a href='http://didikandweta.blogspot.com/search/label/mp3%20koplo'>mp3 dangdut koplo</a></li>
    </ul></li>
    </ul>
    </div>
    </div>

    <div id='navright'>

    <form action='http://didikandweta.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 -->
    Catatan:

    1. Ganti kode kode yang berwarna merah dengan link link yang ingin dituju
    2. Kode- kode yang berwarna hijau bisa teman- teman ganti sesuai keinginan teman- teman
    3. Ganti http://didikandweta.blogspot.com/ dengan alamat blog teman-teman


  • Klik Pratinjau atau langsung Klik Simpan Template
Bila teman-teman masih bingung teman- teman bisa mengajukan pertanyaan atau unek- uneknya pada kotak komentar atau bisa bertanya langsung ke e-mail saya di didikweta@gmail.com. Selamat mencoba!!!



    Demikianlah Artikel Membuat Navigasi menu Horizontal di blog

    Sekian Membuat Navigasi menu Horizontal di blog, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingankali ini.

    Anda sedang membaca artikel Membuat Navigasi menu Horizontal di blog dan artikel ini url permalinknya adalah https://caratutorialgratis.blogspot.com/2009/12/membuat-navigasi-menu-horizontal-di-blog.html Semoga artikel ini bisa bermanfaat.

    Related Posts :