Senin, Juni 21, 2010

Membuat menu navigasi horisontal di blogspot dengan css menu (versi blue sprite)

Menu navigasi secara default belum tersedia di template blogspot. Untuk menampilkan atau membuat menu navigasi perlu ditambahkan script agar menu tersebut muncul di bagian header blog. Dalam postingan ini kita akan membuat menu navigasi  horisotal sederhana menggunakan script css.Menu navigasi horisontal versi blue sprite adalah varian dari menu navigasi sebelumnya seperti menu navigasi massive blue yang menggunakan script css .


Untuk membuatnya lakukan prosedur berikut:



1. Login ke akun blogger
Pilih Dashboard - Tata letak - Edit HTML

menu horisontalcari kode berikut:


]]></b:skin>


2. Di bagian atas kode tersebut masukkan kode berikut

ul#menu
{
margin:0;
padding:0;
list-style-type:none;
width:auto;
position:relative;
display:block;
height:30px;
font-size:12px;
font-weight:bold;
background:transparent url(http://i48.tinypic.com/2zgf4mo.jpg) repeat-x top left;
font-family:Arial, Helvetica, sans-serif;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
}

ul#menu li
{
display:block;
float:left;
margin:0;
padding:0;
}

ul#menu li a
{
display:block;
float:left;
color:#999999;
text-decoration:none;
font-weight:bold;
padding:8px 20px 0 20px;
}

ul#menu li a:hover
{
color:#FFFFFF;
height:22px;
background:transparent url(http://i48.tinypic.com/2zgf4mo.jpg) 0px -30px no-repeat;
}


ul#menu li a.current
{
display:inline;
height:22px;
background:transparent url(http://i48.tinypic.com/2zgf4mo.jpg) 0px -30px no-repeat;
float:left;
margin:0;
}


3.  Klik tombol "Simpan Template"

4. Buka halaman "Tata Letak -> Elemen Halaman"

5. Pada Elemen header , klik " Tambah Gadget"

Catatan: Jika anda menggunakan template default (bawaan) blogger maka tombol "Tambah gadget" tidak muncul pada bagian header, untuk menampilkannya bisa lihat postingan saya tentang cara menampilkan "tambah gadget" di header 

6. Pilih gadget html/javascript
masukkan script berikut :

<ul id="menu">
<li class="button"><a class="current" href="#">Home</a></li>
<li class="button"><a href="#">Mobile Phone</a></li>

<li class="button"><a href="#">Blogger Tips</a></li>
<li class="button"><a href="#">SEO</a></li>
<li class="button"><a href="#">Credit Card</a></li>
<li class="button"><a href="#" target="_blank">Computer</a></li>
</ul>
</div><!-- End of Nav Div -->


Catatan:
Pada script di atas
Ganti  semua tanda # pada href="#" dengan url target atau url tujuan.
misalnya: http://artikelkomputerku.blogspot.com/
Home, Mobile Phone, Blogger Tips ..., diganti dengan teks yang akan ditampilkan di menu

Agar script bisa berfungsi dengan baik, maka sebaiknya dicopy ke notepad atau word pad kemdian diedit sesuai kebutuhan blog anda.

Contoh blog yang memakai menu horisontal bisa dilihat disini Blog





Artikel Terkait :



26 komentar:

admin mengatakan...

Thanks bro, artikelnya sangant membantu apalagi buat kita-kita yang masih awam ne.
ada sedikit masalah ne bro:
Setiap kita mau menambahkan Gadget baru HTML/JavaSript yang biasanya judul bisa kosong tapi sekarang kok ga bisa ya bro...? soalnya ketika saya menambahkan gadget JavaSript dan memasukkan kode script lalu mengklik tombol simpan tiba-tiba muncul "Bidang yang dipersyaratkan tidak boleh kosong" tapi setelah memberikan judul pada gadget baru bisa simpan.
Tolong pencerahannya ya bro.
Thanks be4 n good luck

Ali Mas'adi mengatakan...

sekarang klo nambah gadget di blogger harus pake judul klo nggak.. nggak bisa di save.. padahal klo yg ini kan nggak perlu judul.. gimana .. ada solusi nggak...

Artikel Komputer mengatakan...

@admin
@Ali Mas'adi
Bisa dilihat disini solusi menghilangkan judul gadget html/javascript
http://artikelkomputerku.blogspot.com/2010/06/cara-membuat-gadget-htmljavascript-agar.html

admin mengatakan...

Thanks bro ats pencerahannya, tapi blog saya tetap aja ga bisa alias gatot= gagal total

solusi berpromosi mengatakan...

wow ini bagusnya langsung dicoba. trims sharingnya
salam

Monetize Blog mengatakan...

Ini dia yang saya cari sob. Saya coba dulu. Mudah-mudahan berhasil. thanks

Art Gallery mengatakan...

Thx shob hebat banget artikel ini, ada sedikit pertanyaan lagi nich, bagaimana sih cara menampilkan menu di google search seperti punya artikelkomputerku dibawah ini, wah hebat banget....share dong. trim

Artikel Komputer
Artikel komputer,tutorial komputer,Internet,Computer,Trik Windows,Setting Nokia Modem,Microsoft Office,trik komputer,Blog,SEO,Bisnis Online untuk pemula ...
artikelkomputerku.blogspot.com/ - Tembolok - Mirip

Download Video Youtube Windows XP
Software Email
Excel 2003 Word 2003
Windows 7 Windows Vista

Artikel Komputer mengatakan...

Kalau tampilannya seperti diatas kemungkinan karena menu navigasi yang saya gunakan. Ada sedikit bahasan yang agak berbeda dengan tampilan yang anda maksud, bisa dilihat disini
http://artikelkomputerku.blogspot.com/2010/06/tips-seo-menampilkan-deskripsi-blog-di.html

aginkiswara mengatakan...

bang gmn crax ganti warna

Artikel Komputer mengatakan...

@aginkiswara
cara ganti warna
1. Download gbr ini
http://i48.tinypic.com/2zgf4mo.jpg
2. Ubah warnanya pakai paint
3. upload ke tinypic
4. Ganti url http://i48.tinypic.com/2zgf4mo.jpg dgn url gambar anda

Aguy Rspd mengatakan...

Makasih . sangat bermanfaat

iin mengatakan...

kereeenn abiisss,, sangat membantu.. makasih banyaakk,, oh yah,, gadged ku yang ada di rancangan>elemen laman>diatasnya posting blog .. gk sengaja ke hapus,, gmn cara kembaliinnya??

sebelumnya makasih yah

dedi mengatakan...

tipsnya keren walopun belum saya jalanin. sudah pernah buat, tapi masih bingung cara membuat artikel masuk ke sub-menu tersebut. pikir saya "masa 100 artikel harus dibuat 100 sub-menu"?
atau saya yang kurang jelas dengan infonya ya? minta pencerahannya mas...

makasih banyak sebelumnya...

Artikel Komputer mengatakan...

@iin
Kalau terhapus terpaksa dipasang ulang secara manual
@dedi
Menu navigasi scriptnya terpasang di template dan gadget html, jadi tidak berkaitan langsung dengan postingan,kita hanya memilih link postingan yang akan dihubungkan dengan menu navigasi, jadi saat membuat postingan akan tampil menu navigasi secara otomatis, cukup sekali membuat menu, maka menunya akan tampil pada setiap halaman postingan yang dibuat.

cahbountenrzorg mengatakan...

bang admin seblum bertanya trima kasih dulu nih, navigasinya sudah jadi tapi navigasinya kayaknya kurang panjang untuk merubah ukurannya gimana ya saya liat di kodena ga ada yang tujuannya ke ukuran width sama heigtna kurang jelas,coba di koreksi langsung aja mas http://bilikherbal.tk/

MurubFik mengatakan...

terimakasih,...bang,..artikelnya berguna sekali,...

prof-P mengatakan...

thank brow.....
saya coba dlu bro..
mdh2an brhasil....

WALKKER mengatakan...

mav gan ane mau tanya nih...ane dah make ni script...sesuai sih ma tutorialnya...
tapi ane mw nambahin supaya ada sub menunya nih..??gimana ya ko malah berantakan...??

Enchancers Indonesia mengatakan...

bagus nih..
tapi kalau saya sudah memakai menu laman lalu ingin menggunakan ini, laman nya apa harus di hapus dulu?
trims.

ChicoJoJo-Lo- mengatakan...

mas, aq ud bwt ni menu navigasinya..
aq mw tny, gmn caranya ngisi menu" tsb ?
msal : menu q ad home, windows 7, tips n trick windows, dll..
nah, aq mw ngelompokin itu satu" gmn caranya ?
jd klo aq klik windows 7 dy munculnya y bahas windows 7 gt..

distro templates mengatakan...

tips nya work gan langsung ane pake ,,,
makasih gan.. kunjungi balik blog ane ya

Artikel Komputer mengatakan...

Untuk isi link bisa buka salahsatu halaman web, linknya terlihat di adress bar, masukkan link tersebut ke tanda # pada script yang ada di script postingan di atas,
Bisa lihat gambarnya disini
http://artikelkomputerku.blogspot.com/2009/06/membuat-menu-navigasi-horizontal_08.html

Arriyadl mengatakan...

brooooo................ setelah menu navigasi di klik.... kenapa kok tetap pada halaman beranda????? tidak bisa menuju pada halaman menu????? balas ea brooooo????

Artikel Komputer mengatakan...

Coba dilihat script yang ada di postingan di atas :di bagian href="#"
tanda # diganti dengan utl blog anda, misalnya:
href="http://al-asna-arriyadl.blogspot.com/"

atau
href="http://google.com"

Little Bee mengatakan...

ko stiap msukin data dbwah skin ska slah trus y?

Adie mengatakan...

kau adalah penyelamat blog ku.... <3 Terimakasih BanyaK.. di coba Langsung Bisa... :D