Info Terkini

Membuat Sub Menu Di Blogspot

Cara membuat sub menu di blog.....

Halo sobat....

Anda mungkin pingin tampilan blog anda seperti yang terlihat di bawah ini






Disini saya akan memberitahu sobat cara caranya....

tapi,.. jangan sampai salah urutannya yaa.....

Buka blog sobat
Singkat cerita, sobat buka yang biasanya untuk ngatur ngatur template
Nah,...disitu coba liat dengan tenang tenang pasti ada --------------- edit HTML,...Klik edit HTML itu,.... tapi ...sebelum sobat klik coba simpan dulu file html nya ....Ini gunanya untuk mengantisipasi, kalo sampai salah input di html nya....Jadi kalau sobat salah dalam membuat html nya sobat bisa masukin lagi html yang sudah sobat simpan ini dikomputer sobat
Singkat cerita, segeralah masuk ke "Edit HML" itu
Jangan lupa centang yang ada kotak bacaannya --------Expand Template Widget
Nah,... kalau sudah sampai disini,.. coba sobat cari yang kodenya adalah ]]> Cara mencarinya bisa dengan ctrl + F
Sesudah sobat ketemu dengan kode  ]]>  sobat masuk kan kode di bawah ini, tapi ingat.... masukkinnya tepat sebelum kode  ]]>  ---------Ini kodenya :

#NavbarMenu { background: #000; width: 400px; height: 10px; font-size: 11px; font-family: Trebuchet MS, Tahoma, Verdana; color: #fff; margin: 0px; padding: 0px; } #NavbarMenuleft { width: 400px; float: left; margin: 0; padding: 0; } #nav { margin: 0; padding: 0; } #nav ul { float: left; list-style: none; margin: 0; padding: 0; } #nav li { list-style: none; margin: 0; padding: 0; } #nav li a, #nav li a:link, #nav li a:visited { background: #222222; height: 15px; color: #fff; display: block; font-size: 11px; font-family: trebuchet ms, ; text-transform: none; text-decoration: none; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; border-right: 1px solid #000; } #nav li a:hover, #nav li a:active {background: #222222; color: #ffffff; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #ffffff; width: 150px; color: #222222; font-size: 11px; font-family: trebuchet ms,; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #000; } #nav li li a:hover, #nav li li a:active { background: #222222; color: #ffffff; padding: 7px 10px; } #nav li { float: left; padding: 0; } #nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; } #nav li ul a { width: 140px; } #nav li ul ul { margin: -32px 0 0 171px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li:hover, #nav li.sfhover { position: static; }


Jangan malu malu,....mainkan aja kopi paste

Simpan HTML nya ......
Sekarang sobat cari widget,......ini adanya di layout (tata letak)
Pilih yang untuk ngisi html lagi,....
Sobat masukin nih kode berikut :






mainkan lagi copas

Selesai deh....

Mudah mudahan berguna buat sobat.....

Jangan lupa kasi komentar ya.... masak udah dikasi ilmu, komentar aja ga mau .... ya gak.....


3 komentar:

  1. thank gan...
    tolong di liat blog hasil kreasi ane
    berkat artikel ente
    http://berkamandiri.blogspot.com/

    BalasHapus
  2. Loh, ko ga ketemu widgetnya ?

    BalasHapus
  3. terimaskasih informasinya saya akan coba pasang

    BalasHapus

Mohon beri komentar yg tidak berbau sara