Sebelum Menutup WebSite Ini, Tinggalkan Pesan Anda Dengan Mengeklik Iklan di Bawah ini 1x...... % TERIMA KASIH %MAHASISWA UNIVERSITAS ISLAM RIAU PEKANBARU DAN MAHASISWI UNIVERSITAS SUMATERA UTARA MEDAN

Cara Membuat Menu Horizontal Navigasi pada Blog

Diposting oleh Rytha Teguh Aza di 09.11

Pernahkah anda meliat blog yang pada kolom paling atas banyak sekali tulisan seperti HOME, TUTORIAL, PUISI dan lain lain. Nah Pada postingan ini sengaja saya buat karena saya sering di tanya beberapa temen saya, tentang bagaimana sich membuat menu di blog paling atas di bawah judul blog atau bisa di katakan tombol navigasi seperti Home, About Me, Tutorial Blog, Daftar Isi dan sebagainya seperti blog saya ini

Sebenar nya hal itu tidak lah sulit akan tetapi desain template antara yang satu dengan yang lain sangatlah berbeda, sehingga ada banyak hal yang harus di atur seperti ukuran besar dan kecil, lebar dan panjang nya dan link yang ada dan lain lain, nah untuk itu bila anda berminat membuat menu navigasi maka lebih baik anda membuat satu blog percobaan, agar jika terjadi kesalahan tidak merusak blog utama anda, nanti setelah lancar dan bisa mengerjakan nya dapat langsung di praktek kan pada blog utama



Adapun langkah-langkah membuat menu navigasi blog adalah sebagai berikut:
  1. Silahkan login ke blogger dengan ID anda
  2. Masuk pada Dasbor
  3. Klik Rancangan
  4. Kemudian Klik Edit HTML
  5. Kemudian  sebelum melakukan langkah selanjutnya lebih baik klik Download Template Lengkap (Antisipasi jika ada kesalahan atau ingin kembali pada blog semula)
  6. Setelah di downloud template lengkap maka ceklis  
  7. Cari Kode kode  ]]></b:skin>
  8. Copy paste kode berikut persis di atas kode  ]]></b:skin>


/*  navbar
==================  */
#bg_nav { 
    background: #000000; 
    width: 660px; 
    height: 29px; 
    font-size: 11px; 
    font-family: Arial, Tahoma, Verdana; 
    color: #FFFFFF; 
    font-weight: bold; 
    margin: 0px auto 0px; 
    padding: 0px; 
    border-top: 1px solid #333333; 
    border-bottom: 1px solid #333333; 
    overflow: hidden; 
    } 
#bg_nav a, #bg_nav a:visited { 
    color: #FFFFFF; 
    font-size: 11px; 
    text-decoration: none; 
    text-transform: uppercase; 
    padding: 0px 0px 0px 3px; 
    } 
#bg_nav a:hover { 
    color: #FFFFFF; 
    text-decoration: underline; 
    padding: 0px 0px 0px 3px; 
    } 
#navleft { 
    width: 440px; 
    float: left; 
    margin: 0px; 
    padding: 0px; 
    } 
#navright { 
    width: 200px; 
    font-size: 11px; 
    float: right; 
    margin: 0px; 
    padding: 6px 5px 0px 0px; 
    } 
#navright a img { 
    border: none; 
    margin: 0px; 
    padding: 0px; 
    }
#nav { 
    margin: 0px; 
    padding: 0px; 
    list-style: none; 
    } 
#nav ul { 
    margin: 0px; 
    padding: 0px; 
    list-style: none; 
    }
#nav a, #nav a:visited { 
    background: #222222; 
    color: #FFFFFF; 
    display: block; 
    font-weight: bold; 
    margin: 0px; 
    padding: 8px 15px 8px 15px; 
    border-left: 1px solid #000000 
    } 
#nav a:hover { 
    background: #6e6d6d; 
    color: #FFFFFF; 
    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: #333333; 
    width: 160px; 
    float: none; 
    margin: 0px; 
    padding: 7px 30px 7px 10px; 
    border-bottom: 1px solid #000000; 
    border-left: 1px solid #000000; 
    border-right: 1px solid #000000; 
    } 
#nav li li a:hover, #nav li li a:active { 
    background: #666666; 
    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; 
    }

Lalu cari Kode yang mirip kode seperti berikut ini (Mirip, bukan sama)

<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'/> 
</b:section> 
</div>

Saya sarankan Fokuskan pada kode <div id='header-wrapper'> 

Jika sudah ketemu Copy paste code berikut persis di bawah kode yang barusan anda cari tepatnya di bawah kode </div>

<div id='bg_nav'>
<div id='navleft'> 
<div id='nav'> 
<ul> 


<li><a href='http://www.nama blog anda.blogspot.com/'>home</a></li> 
<li><a href='http://www.unjabisnis.com/'>My Blog</a></li> 
<li><a href='http://unjabisnis.net/'>Makalah</a></li> 
<li><a href='http://www.unjatersenyum.blogspot.com/'>puisi </a></li> 


</ul> 
</div> 
</div>
<div id='navright'>
    </div>
</div><!-- akhir bg_nav -->

Kemudian Klik tombol SIMPAN TEMPLATE.
Selesai.


Untuk sementara percobaan ini sudah selesai, namun tentunya jika anda menerapkan pada template anda, ada beberapa yang perlu di sesuaikan. Beberapa di antaranya yaitu lebar dari navigasi, link, keyword yang di inginkan serta yang lainnya. beberpa contoh di antaranya :

Pada langkah ke 8 anda melakukan paste yang ukuran nya terkadang tidak sesuai dengan blog anda jadi anda harus mengubah menjadi ukuran yang sesuai dengan blog anda, perhatikan apa yang anda pastekan pada langkah ke 8 pada /*  navbar bagian bawah anda melihat kode width: 660px; Maka Jika ukuran itu tidak sesuai atau tidak pas dengan blog anda maka harus anda ganti dengan ukuran yang sesuai, anda dapat mencobanya dengan mengurutkan ke atas atau kebawan misal nya 990px atau 679px dan lain lain
Kemudian anda juga harus mengubah link yang ada, karena yang anda postingkan tadi adalah blog saya maka anda harus mengganti link nya ke blog anda 

Terima Kasih Telah mengunjungi website kami

 

Label: ,

1 Comment:

  1. Master Blogger said...
    20 Desember 2011 pukul 05.50  
    Isi Blognya Lumayan Bagus, banyak tutorial tentang blog / mempercantik tampilan blog

Post a Comment



Subscribe to: Posting Komentar (Atom)