Selasa, 05 Juni 2012

Cara Membuat Menu di Bawah Header pada Blogspot

Cara Membuat Menu di Bawah Header pada Blogspot. Kali ini saya akan membahas bagai mana cara memasang menu di bawah header dan berikut adalah langkah-langkahnya.
1. Login di blogger dengan ID blog sobat
2. Klik menu Layout
3. Klik Tab Edit HTML
Selanjutnya Anda cari kode dibawah ini, untuk mempermudah pencarian silahkan gunakan CTRL+F 

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
</b:section>
</div>

Anda ubah kode showaddelement='no' menjadi  showaddelement='yes' , kalau sudah klik simpan ya
Setelah yang pertama sudah disimpan, sekarang klik Page elements / Elemen LamanTambah Gadget > HTML/Javascript , copy kode dibawah ini,simpan dan letakan tepat dibawah header. 

<a href="http://madhigokil.blogspot.com " class="navigation">HOME</a>

<a href="http://madhigokil.blogspot.com " class="navigation">CONTACT</a>
<a href="http://madhigokil.blogspot.com " class="navigation">BUKU TAMU</a>
<a href="http://madhigokil.blogspot.com " class="navigation">FACEBOOK</a>
<a href="http://madhigokil.blogspot.com " class="navigation">TWITER</a>
<a href="http://madhigokil.blogspot.com " class="navigation">DOWNLOAD</a>
<a href="http://madhigokil.blogspot.com " class="navigation">LAIN-LAIN</a>
<a href="http://madhigokil.blogspot.com " class="navigation">CHATTING</a>

*Alamat url diatas silahkan sesuaikan dengan blog Anda.
Hal ketiga adalah supaya menu itu menimbulkan efek warna sehingga menjadi kelihatan menarik.
Klik Tata Letak > Edit HTML , cari kode </b:skin> , agar mudah gunakan tombolCTRL+F
Copy kode dibawah ini dan letakan tepat diatas kode  </b:skin> kemudian simpan.


a.navigation {
background: #3333ff ;
color: #ffffff;
margin: 1px;
padding: 2px;
border-width: 0;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}
a.navigation:hover {
background: #333333;
color: #ffffff;
text-decoration: none;
}


Harap di Perhatikan:
Kode yang berwarna biru adalah warna tombol dan efek hover dan bisa dirubah sesuka hati Anda.Dan yang berwarna merah adalah jarak antara tombol satu dengan lainnya, silahkan Anda sesuaikan sesuai selera

30 komentar:

  1. Udh bbrpa kali ini nemuin blogger cewk lagi, hehehe . . .
    Sukses y bloggingnya!!!

    By: http://otowebsite.blogspot.com

    BalasHapus
  2. sepp mba langsung dipraktekkan

    http://krizafterlife.blogspot.com/

    BalasHapus
  3. mampir lihat artikelnya njeeh,,,hehe...!!!

    BalasHapus
  4. thanks ya mbak

    http://blog.ub.ac.id/handikafiaub

    BalasHapus
  5. Terus gimana caranya memasukan postingan kemasing masing menu

    BalasHapus
    Balasan
    1. yg menu link --> http://madhigokil.blogspot.com <-- diganti dgn link yg di tuju,

      Hapus
  6. G da gunanya nyebar ilmu kayak gini klo toh G bsa dicopy.
    Sia-sia postingan anda ini. Terima kasih :/

    BalasHapus
  7. haha bnr bro ga bsa copy buat aph coba..
    jgn lupa mampir di link saya
    http://rvsproduction.blogspot.com/

    BalasHapus
  8. kasih saran dong buat pernak pernik di blog.... heheheh

    BalasHapus
  9. mantab

    http://goodshare2us.blogspot.com/

    BalasHapus
  10. Ga bisa di copy ??? Bukan nya bisa ya ? O.o

    Thx ya Info'a ..boleh di coba nih ;)

    BalasHapus
  11. MAMPIR YA http://reymondrolls.blogspot.com/ :)

    BalasHapus
  12. Sederhana banget taunya ya ? Thks 4 share nya

    BalasHapus
  13. mantef info nya simple tapi langsung ke pusat sasaran....
    mampir yuk ke blog kami(siapa tau mau sekalian shoping,p --> http://cherylaghniparfum.blogspot.com/

    BalasHapus
  14. makasih infonya ya..... salma kenal lagi dr ku lagi.....

    http://budakbageer.blogspot.com/

    BalasHapus
  15. kunjungi juga ya http://bayuweldy.blogspot.com/

    BalasHapus
  16. makasihh.... :)
    langsung praktek..... ;)

    BalasHapus
  17. makasihh banyak yaa,mbak...
    lsg praktek nihh...hehe...

    BalasHapus
  18. Makasih
    Kunjungi blogku juga ya
    www.earnuang.blogspot.com

    BalasHapus
  19. wah, siph nih, kebetulan blog q belum ada.. dicoba yahhh
    501kck.blogspot.com

    BalasHapus
  20. terima kasih atas tutorialnya , sangat membantu, salam sukses , dan salam blogger

    BalasHapus
  21. Uraiannya tentang cara membuat menu sangat bermanfaat Sob. Ringkas dan padat namun sangat jelas. Oh ya, tidak lupa saya sampaikan salam kenal serta salam berbagi. :)

    BalasHapus
  22. thx yea blognya http://kerjadapetdollar.blogspot.com/

    BalasHapus
  23. Thanks infonya kakak sangat membantu sekali... Kunjungan balik ke blog ku ya gan :D

    BalasHapus