Cara Membuat Menu Horizontal Pada Blog di Blogspot (NAVIGASI)

Cara Membuat Menu Horizontal Pada Blog di blogspot (NAVIGASI) seperti Menu kolom Home, Daftar isi, Komputer, HP Dll secara mendatar. Sebenarnya Banyak sekali jenis menu horizontal yang bisa anda variasikan, seperti dengan script dropdown CSS ,Nanvigasi slide dan dengan html jquery.nah kali ini saya akan berikan Panduan singkat tentang bagaimana cara Membuat Menu Horizontal pada blog di Blogspot Blogger, dan berikut ini adalah cara2nya :

► Seperti biasa silahkan anda Login dulu ke blogger.com, lalu pilih Design .
► Pilih Edit HTML, dan silahkan Download dulu full template untuk menjaga bila nanti ada kesalahan, dan dengan cara ini Nanti template bisa dikembalikan seperti semula.
► Lalu jangan lupa untuk mencentang kotak expand template widget pada template Anda, dan kemudian cari kode: </b:skin> dan untuk mempermudah pencarian silahkan tekan CTRL + F Pada keybord anda.
► Bila </b:skin> tersebut sudah ketemu Hapus kode itu dan ganti dengan kode di bawah ini:

</b:skin><style type='text/css'>.pagemenu-container #pagemenu{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:#000 repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase}.pagemenu-container #pagemenu ul{margin:0;5px;0px;5px;padding:0;border:1px solid $bordercolor;list-style-type:none;width:860px}.pagemenu-container #pagemenu ul li{display:block;float:left;margin:0 1px 0 0}.pagemenu-container #pagemenu ul li a{display:block;float:left;color:#fbdafa;text-decoration:none;padding:10px 18px 0 18px;height:28px}.pageme nu-container #pagemenu ul li a:hover,.pagemenu-container #pagemenu ul li a.current{color:#fff;background:#306 no-repeat top center}</style>


► Setelah sobat sudah mengganti kode tersebut sekarang cari lagi kode : <div id='content-wrapper'> dan gantilah kode tersebut dengan Kode script di bawah ini :

<div class='pagemenu-container'> <div id='pagemenu'> <ul> <li class='page_item home'><a href='http://caramembuatada.blogspot.com/' title='Home'>Home</a></li> <li class='page_item page-item-2'><a href='http://caramembuatada.blogspot.com/' title='About'>About</a></li> <li class='page_item page-item-3'><a href='http://caramembuatada.blogspot.com' title='Contact Us'>Contact</a></li><li class='page_item page-item-4'><a href='http://caramembuatada.blogspot.com' title='Daftar Isi'>Daftar Isi</a></li><li class='page_item page-item-5'><a href='http://caramembuatada.blogspot.com' title='Belajar Blog'>Blog</a></li></ul></div> </div> <div id='content-wrapper'>



Keterangan Kode:

Kode Background: #000 : warna latar belakang dari menu horizontal, #000 adalah kode warna hitam, silakan ubah warna latar sesuai keinginan sobat. dan untuk Kode width: 860px : adalah panjang horizontal dari menu nya, Monggo/silahkan di ATUR/di sesuaikan dengan panjang pada kode #header-wrapper atau panjang #outer-wrapper pada blog sobat.
Kode {color:#fff;background:#306 no-repeat top center} adalah : warna text dan warna background pada saat disorot dengan pointer mouse. Dan Jangan lupa Untuk Mengganti url link http://caramembuatada.blogspot.com dengan Link sobat .

Tips :
Sebelum anda meletakkan script/kode diatas ke Template, sebaiknya anda copy/paste Kode di Notepad terlebih dahulu, setelah anda taruh di notepad barulah anda copy lagi dan Masukkan kode tersebut kedalam TEMPALE ANDA.

Dan akhirnya sekian dari saya, semoga panduan Cara Membuat Menu Horizontal Pada Blog di blogspot (NAVIGASI) ini dapat bermanfaat bagi anda semua.
Posted by: M. Nurrohman
11.10
Bagikan Artikel Ke:

10 komentar:

  1. id wrapper tidak ada boss...

    BalasHapus
  2. yang wrapper ntuh kagak aada gan ...

    BalasHapus
  3. masbro,, kok warna text dan warna background gk bisa di ganti? gmn caranya mas?

    BalasHapus
  4. sipp tutornya gan....ijin mencoba ya....

    BalasHapus
  5. nice info.....
    jgn lupa ya mampir juga di blog saya

    BalasHapus
  6. 'header-wrapper'> kosong mas bro

    BalasHapus
  7. oiya deng hehe ;) udah bisa kok lupa diganti aja hoho maaf

    BalasHapus
  8. gan ini cuma bisa majang doang?? gabisa diisi yah about,contact, dll nya??

    BalasHapus

Mohon Maaf, Untuk Komentar yang Menyertakan Link - URL Tidak akan Diterbitkan!! Terima Kasih. "SUKSES SELALU UNTUK ANDA"

Artikel Yang Sering Dibaca...

  • Kata-Kata Lucu - Kumpulan kata lucu yang 100% Halal dan tanpa bahan pengawet...
  • Cara Cepat Hamil - Panduan agar cepat hamil ini dari seorang dokter Ahli Kandungan yang....
 
Support : Info Online Ku | Kata kata Lucu | Foto Lucu
Copyright © 2013. - All Rights Reserved
Proudly powered by Blogger