SERVIS SANYO BLUMBUNGAN

.
Home » » tutorial cara pasang sub menu di blogger

tutorial cara pasang sub menu di blogger

kalau kemaren saya posting tutorial blogger cara pasang auto readmore yang tampil dengan gambar  dalam kesempatan ini saya akan bahas tutorial cara pasang sub menu  dimana menu semacam ini tidak disediakan oleh blogger jadi jika blog menggunakan blogger dan ingin pasang sub menu   kita harus memasangnya sendiri,

beda dengan blog wordpress yang fasilitas semacam ini sudah tersedia di dalam template  bawaan wordpress.com, jadi pengguna wordpress tidak perlu repot-repot memasangnya. cuma di wordpress kita tidak bebas mendesain template kecuali kita mengupgrade CCS terlebih dahulu,itupun masih belom bebas secara total seperti blog yang menggunakan blogger


oke mari kita mulai tutorialnya. cara pasang sub menu  di blogger:

1-> masuk dasboard-> design->dan pilih edit HTML

2-> jangan lupa centang kotak kecil di sebelah expand widget template dan backup dulu template asli.

3-> silahkan cari kode  ]]></b:skin>
klo sudah ketemu letakkan kode dibawah ini di atas kode tersebut

#NavbarMenu { background: #000; width: 874px; height: 35px; font-size: 13px; font-family: Arial, Tahoma, Verdana; color: #fff; font-weight: bold; margin: 0px; padding: 0px; } #NavbarMenuleft { width: 874px; 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: #808080; height: 24px; color: #fff; display: block; font-size: 14px; font-family: trebuchet ms, Times New Roman; font-weight: bold; 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: #c0c0c0; color: #000; 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: #c0c0c0; width: 150px; color: #000; font-size: 14px; font-family: trebuchet ms, Times New Roman; 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: #000; color: #fff; 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; }

sebelum melanjutkan kita harus menetukan dimana kita akan meletakkan sub menu tersebut. dan biasanya di letakkan diatas header
nah untuk meletakkan di atas header silahkan cari kode berikut

<div id='header-wrapper'>

4-> setelah ketemu silahkan letakkan kode dibawah ini di atas kode tersebut


<div id='NavbarMenu'>

<div id='NavbarMenuleft'>

<ul id='nav'>

<li><a href='http://ipoenkblb.blogspot.com'>Home</a> </li>

<li><a href='#'>Blogger Template</a>

<ul>

<li><a href='http://ipoenkblb.blogspot.com/search/label/2 column'>2 Column</a> </li>

<li><a href='http://cara2daninfo.blogspot.com/search/label/3 column'>3 Column</a> </li>

<li><a href='http://ipoenkblb.blogspot.com/search/label/4 column'>4 Column</a> </li> </ul> </li>

<li><a href='#'>Blogging Trick</a> </li>

<li><a href='#'>Forum</a>

<ul>

<li><a href='http://cara2daninfo.blogspot.com/search/label/Learn SEO'>Learn SEO</a> </li>

<li><a href='http://ipoenkblb.blogspot.com/search/label/Adsense'>Adsense</a> </li>

<li><a href='http://cara2daninfo.blogspot.com/search/label/Blog Monetize'>Blog Monetize</a> </li>

<li><a href='http://ipoenkblb.blogspot.com/search/label/Link Exchange'>Link Exchange</a> </li>

</ul> </li> </ul>

</div> </div>


5-> sekarang silahkan anda ganti kode di atas yang saya beri warna biru adalah link/URL menu yang ingin anda tampilkan,
dan yang berwarna merah adalah judul dari menu yang anda tampilkan.

contoh URL yang saya pasang diatas adalah link/URL yang berdasarkan label,

6-> jangan lupa simpan pekerjaan anda.dan lihat hasilnya.

jika anda kesulitan dalam menerapkan tutorial ini silahkan layangkan pertanyaan anda jangan ragu ragu di kotak komentar dibawah ini
selamat mencoba
happy blogging......................by rajacolek


12 comments:

  1. nice

    selalu dpt ilmu tiap berkunjung kesini

    keep fight :)

    BalasHapus

  2. Mila :
    nice
    selalu dpt ilmu tiap berkunjung kesini
    keep fight


    terimakasih atas kunjungan mila...........hehhehehe

    BalasHapus
  3. Template aku sama dengan yang abangk pakai tapi aku yg versi blogspot, bisa bantu cara pasang submenunya, soalnya gagal terus, aku sebenarnya baru kali ini dapat sub yang pakai '' mohon pencerahanya








    Home
    About
    Posts RSS

    Comments RSS

    Contact





    BalasHapus

  4. Rifqi :
    Template aku sama dengan yang abangk pakai tapi aku yg versi blogspot, bisa bantu cara pasang submenunya, soalnya gagal terus, aku sebenarnya baru kali ini dapat sub yang pakai ” mohon pencerahanya


    Home
    About
    Posts RSS
    Comments RSS
    Contact





    kode script di atas adalah kode CCS dan kode HTML buat blogspot. jadi silahkan dicoba dulu kalau sudah di pasang script di atas sesuai panduan silahkan bertanya dan dimana yang buat ente kesulitan. nanti saya coba bantu
    atau ente kunjungi blog saya di blogspot disana ada tutorial cara pasang menu horizontal paling mudah tampa harus MASUK edit HTML. jika ente mau mencobanya silahkan klik DISINI..thanksss

    BalasHapus
  5. Mohon Bantuan na pencarian ,

    karna sy tidak dapat menemukan di edit HTML

    BalasHapus

  6. AB :
    Mohon Bantuan na pencarian ,
    karna sy tidak dapat menemukan di edit HTML


    bisa di jelaskan gak gan code yang mana yang tidak ada di template anda? coba cari yang mirip aja klo gak ada code yang sama dengan di atas

    BalasHapus
  7. cari script yang mirip gan..coz tiap template kadang tidak sama

    BalasHapus
  8. cara bikin subsubmenu gimana ya ?
    apa yang harus ditambah ?

    BalasHapus

ayukk berikan tanggapan di kotak komentar ini

DAFTAR POST

Translate blog

DONASI/DONATION

donation this blog my bank

BANK: BRI atas nama: abdus syukkur
No Rek: 6470-01-015176-538

Popular Posts

komentar terbaru

Servis pompa air blumbungan

google+

.comment-content a {display: none;}