Senin, 19 September 2016

Cara membuat menu di blog



Cara Membuat Menu Di Blog
Cara edit menu-menu yang ada di blog

  • dan di akhiri dengan kode
  • yaitu pada Menu 2.
    Untuk membuat menu di blog blogger kita, maka sudah pasti kita wajib login ke blogger, silakan login di ke blogger, kunjungi www.blogger.com untuk login.
    Loading..... :-)
    Sekarang saya anggap sobat sudah login di blogger dan sudah siap mengikuti tutorial langkah demi langkah membuat menu di blogger.


    Pertama klik menu Tata Letak
    Tutorial Membuat Menu Di Blog

    Pandangi bagaimana tampilan Tata Letak Blogger, di sana ada kolom Posting Blog, Tambahkan Gadget, dsb...
    Cara Membuat Menu Di Blog Dengan Mudah

    Tugas sobat adalah memilih kolom Tambahkan Gadget tapi yang lebar, contohnya pilih kolom Tambahkan Gadget yang ada di atas kolom Posting Blog => Klik tulisan Tambahkan Gadget, makan akan keluar window baru.
    Pada window baru tersebut pilih HTML/JavaScript (klik aja sob)

    Tutorial Membuat Menu Di Blog Dengan Mudah

    Kemudian masukkan semua kode css dan html dibawah ini pada kolom isian yang tersedia, tepatnya pada kolom Konten. Lihat gambar dibawah css dan html ini:


    Tutorial Cara Membuat Menu Di Blog Dengan Mudah
    Jika semua kode sudah dimasukkan klik Simpan.



    Sampai tahap ini blog sobat sudah memiliki menu horizontal, namun saya yakin sobat ingin menu-menu tersebut sesuai keinginan. Jika demikian, mari kita lanjutkan edit menu horizontal tersebut.

    Pada kode css dan html yang sobat masukkan tadi ada kode 
    Di situ ada nama2 halaman, mulai dari Home, About, Daftar Isi, Menu, dsb. Dan kode pagar #
    Kode pagar # silakan sobat ganti dengan link halaman yang di inginkan

    AboutDaftar IsiMenu, dst... silakan ganti dengan nama menu yang di inginkan
    Untuk mengedit menu silakan lihat contoh ini, mengganti menu About menjadi Tentang.
    Kode asal :

    Yang perlu di edit adalah kode pagar # dan nama menunya, contoh : About.
    Kode setelah di edit :

    Menu About saya ganti menjadi Tentang, dan kolom link/url (yang saya beri tanda pagar #) saya masukkan link http://www.blogbacatulis.com/p/tentang.html


    Untuk cara edit menu-menu yang lainnya sama dengan contoh di atas, yang perlu sobat ganti hanya tanda #dan nama Menunya saja.


    Link yang di masukkan ke menu harus link yang benar, karena jika salah maka jika di klik akan masuk ke halaman 404 / Error / Halaman Tidak Ditemukan.
    Untuk pengembangan dan bahan belajar edit menu :
    setiap menu harus di awali dengan kode
    Contoh yang benar:

    Pada contoh yang salah, ada satu menu yang tidak di akhiri dengan kode


    Untuk mengganti tampilan menu, baik warna, lebar, dsb. sobat perlu mengerti bahasa CSS, kode css pada menu tersebut dimulai dari kode 


    Tambahan

    Drop down menu di blog


    Karena tutorial ini saya anggap masih perlu tambahan, akhirnya saya putuskan untuk meneruskan tutorial cara membuat menu ini, sebab kemaren udah capek :-D
    Langsung ...
    Pada kode menu di atas ada bagian
    Di situ terlihat 1 menu seperti tidak sempurna/salah, tepatnya pada kode ini

    Menu disitu tidak ditutup dengan kode 
    Kenapa bisa seperti demikian? Karena itu adalah bagian menu yang memiliki sub menu (drop down menu/menu turun). Jadi kode
    nya diletakkan di akhir kode sub menu, tepatnya kode ini.



    Jadi, jika sobat ingin menambahkan menu dropdown, konsepnya sama, yaitu harus di awali dengan kode

  • dan ditutup dengan kode
  • Contoh penambahan 2 menu pada dropdown menu


    Mungkin itulah tutorial cara membuat menu di blog yang bisa saya tuliskan kali ini, semoga mudah dipahami dan bermanfaat.

    Tidak ada komentar:

    Posting Komentar