Cara Mudah Membuat Menu Navigasi Blog Dengan Gambar


Cara Mudah Membuat Menu Navigasi Blog Dengan Gambar - Hai hai... Jadi, kali ini saya mau berbagi sedikit tutorial mempercantik blog blogspot sederhana. Adakah dari kamu yang senang dan suka dengan design blognya Diana Rikasari (dianarikasari.blogspot.co.id)? Terus pengen bikin menu navigasi ala-ala Diana pakai gambar-gambar ala dia yang lucu-lucu atau pakai gambar ala-ala kamu? BISA, semua bisa diatur sama saya wkwkwk... Biar gak salah persepsi coba perhatikan gambar di bawah ini!


Nah, kurang lebihnya menu dengan gambar seperti itu yang akan kita buat dalam tutorial kali ini. Yuk, langsung saja kita simak dengan seksama langkah-langkah di bawah ini!

Note: Ini hanya untuk platform blogspot ya!

1. Pertama persiapkan gambar yang akan kamu gunakan sebagai menu. Ukurannya bebas tergantung keinginan kamu, tapi kalau gambar yang akan saya gunakan kali ini berukuran 199 x 299 pixel. Editing gambar bebas ya terserah kamu mau pakai software editing apapun yang dikuasai, kalau saya memakai photoshop. Dan di bawah ini contoh gambar yang akan saya gunakan sebagai menu navigation.

2. Setelah gambar sudah siap hal selanjutnya adalah upload gambar tersebut ke photobucket atau ke blog untuk mendapatkan link URL. Kalau kali ini saya akan menggunakan cara yang mudah dengan meng-upload gambar tersebut ke new post di blog untuk mendapatkan kode URL gambar.

Caranya adalah sebagai berikut :
  • Klik New Post.
  • Upload gambar di bagian Compose.
  • Setelah gambar berhasil terupload di New Post, sekarang menuju ke bagian HTML dan copy link "src"-nya seperti gambar di bawah ini.


3. Nah, setelah code "src" di dapat pastekan kode tersebut pada bagian "src" kode HTML di bawah ini.

<center>
<a href="LINK MENU"><img border="0" src="LINK SRC GAMBAR" /></a>
<a href="LINK MENU"><img border="0" src="LINK SRC GAMBAR" /></a>
<a href="LINK MENU"><img border="0" src="LINK SRC GAMBAR" /></a>
<a href="LINK MENU"><img border="0" src="LINK SRC GAMBAR" /></a>
<a href="LINK MENU"><img border="0" src="LINK SRC GAMBAR" /></a></center>

Keterangan:
Ubah "LINK MENU" dengan link menu yang kamu kehendaki/ link postingan dan page yang kamu inginkan.
Ubah "LINK SRC GAMBAR" dengan link "src" gambar yang didapat dari langkah nomor 2.

Contoh:
<center>
<a href="www.handdriati.com"><img border="0" src="https://4.bp.blogspot.com/-xlPJTxZQPrM/V0f3siFp_RI/AAAAAAAAARQ/oqPA066X9zAHdHLOvl_vBk7Err1H1E6-QCLcB/s1600/1.png" /></a>
<a href="LINK MENU"><img border="0" src="LINK SRC GAMBAR" /></a>
<a href="LINK MENU"><img border="0" src="LINK SRC GAMBAR" /></a>
<a href="LINK MENU"><img border="0" src="LINK SRC GAMBAR" /></a>
<a href="LINK MENU"><img border="0" src="LINK SRC GAMBAR" /></a></center>

4. OK, jika kode HTML sudah lengkap seperti di atas. Maka, langkah selanjutnya adalah menuju ke menu Layout > Kemudian Add gadget HTML/ Javascript gadget. Pastekan kode di atas kemudian Save. Oiya, letakan HTML/ Javascript gadget tersebut pada kolom di bawah Header. Lihat gambar di bawah ini (lihat bagian Cross-Column)!


5. Preview terlebih dahulu, jika sudah OK dan cocok maka klik Simpan.

Voillaa... Menu Navigation dengan gambar ala kamu sudah jadi XD. Nah, kalau punya saya seperti gambar di bawah ini.


Mudah bukan?
Gimana? Tertarik untuk membuat menu navigation dengan gambar juga?


52 comments

  1. wah boleh juga tapi sepertinya saya belum seekspresif itu, hihihi

    ReplyDelete
    Replies
    1. Gpp mba, nanti kl sudah ekspresif br diaplikasikan :D

      Delete
  2. Langsung bookmark, ah *meski eksekusinya entah kapan :p

    ReplyDelete
  3. Sempet mau bikin tapi jadi keramean mbak.

    ReplyDelete
    Replies
    1. Iya sih, tergantung konsep blognya mba... Tergantung gambar yg dipakai juga kalau gambarnya minimalis juga gak terlalu begitu rame kok... Tp balik lagi tergantung selera juga hehehe...

      Delete
  4. kereeennn mbaakk.. aq mau nyoba nanti hehehhe

    ReplyDelete
  5. This comment has been removed by the author.

    ReplyDelete
  6. Yah Mbak pengen banget bikin tapi template-ku kayanya gak memungkinkan karena gak ada pilihan Cross Colums.. Hiks~

    ReplyDelete
    Replies
    1. Selama pakai blogspot bisa aja mba, add gadget yg dr sidebar juga bisa terus nanti didrag aja pindahin dibawah header...

      Delete
  7. Tapi ini jadi berat gak siiihh? secara gambar mulu gituuu..
    *padahal di blogku thumbnail ig nya segede2 gambreng x)))

    ReplyDelete
    Replies
    1. Hmmm... Berat enggaknya keknya tergantung size gambarnya... Tp kl kbanyakan pasang gadget html keknya juga berat sih hahaha...

      Delete
  8. Tutorialmu selalu yahud! :D
    Kapan-kapan kalau bosen sama template blog, coba juga ah.

    ReplyDelete
  9. wow, keren. Tapi gak berani takut berani. Kakak (kakak?) punya cara bikin dropdown di menu? tapi bukan dari template bawaan. Template saya download-an. Btw, yang ada penunjuk artikel ini (yang diatas itu loh) breadcrump ya namanya? ajarin dong.
    Makasih
    Makacih :)

    ReplyDelete
    Replies
    1. Kl template downloadan biasanya susah dimodif coz uda banyak di lock mreka biasanya main html gitu hehe...

      Delete
    2. gitu ya, wah gak jadi deh -_-
      pintar2 ngatur sendiri aja ya

      Delete
  10. Ih keren, bookmark aja dulu deh. Gantinya kapan kapan. Hehhehe

    ReplyDelete
  11. Awesome (y)
    Terima kasih share nya.
    Bookmark dulu ntar belajarnya

    ReplyDelete
  12. waah kece, pingin bikin tapi takut berantakan...
    maklum gaptek pernah bikin tutorial utk bikin menu navigasi biasa di blog ini gak say...? nanti ku oprek ah
    ternyata aku blom follow blog-mu, skelaian tak follow deh. nuhun

    ReplyDelete
    Replies
    1. Pernah keknya mba coba lihat label tutorial atau blogging tips...

      Delete
  13. Udah aja mau serius baca, eh ternyata khusus blogspot. Heuheuheu~

    ReplyDelete
  14. Wa, template saya nggak bisa dibeginiin. Tapi makasih udah berbagi, sangat bermanfaat.

    Btw lodingnya jadi lama nggak han? Kan fotonya banyak tuh

    ReplyDelete
    Replies
    1. Kl blog kita uda berat ya berat aja sih mba, apalagi kl uda kbanyakan widget html... Tp kl msh simpel dan size gambar yg dipake jg kecil keknya normal aja tergantung koneksi juga hehe...

      Delete
  15. Bikin tutorial yg buat wordpress si mak biar aku bisa nyoba bikin

    ReplyDelete
    Replies
    1. Aq gak ahli WordPress mba, biasanya WordPress yg bs diutak atik yg sudah punya hosting sndiri gt apa ya... :D

      Delete
  16. Tertarik bangeeet, hanya punyaku WP :( *bingung*

    ReplyDelete
  17. jadinya keren ya...
    tp supaya lebih jelas, gambarnya coba digedein lg mba :D

    ReplyDelete
  18. Aaa aku juga mauu mbak .. Ta cobanya kalau lagi senggang ^^

    ReplyDelete
  19. cihuuyyyyyy, nyobak ah,doain sukses ya mbk

    ReplyDelete
  20. Ini harus langsung dicobain sambil baca sambil praktek

    Makasih

    ReplyDelete
  21. kebetulan banget aku emang lagi mau kayak beginii.. tapi aku wordpress, hehehe :D

    ReplyDelete
  22. kamu jago ya ngutak ngatik gini mbak :).. aku selama ini slalu minta tolong ke temen yg memang web designer gitu ;p.. jd bayar dia kalo pgn ngerubah2 template :D

    ReplyDelete
    Replies
    1. Gak jago sih, cm dikit2 bisalah... Ayo kalau mau bayar aq atau beli template di aku juga boleh *lho malah promosi wkwkwk...

      Delete
  23. keren, ni mulai otak-atik dan bingung dimana bagiaan "src" :D

    ReplyDelete
    Replies
    1. Pokoknya copy aja yg ada tulisan http nya mba... Kyak contoh di atas dibagian html :)

      Delete
  24. waini, saya bingung baca baca tulisan pakar desain theme :)

    ReplyDelete
  25. apa enggak akan berat mbak ke loading blognya? makasih atas informasinya

    ReplyDelete
    Replies
    1. Kalau menambah berat sih jelas pasti kalau menambah gambar kan menambah berat loading, menambah gadget html/ javascript juga menambah berat. Tapi, kalau memang ingin dan suka mungkin bisa diakalin dengan size gambar dg ukuran kecil, kalau dari photoshop bisa disimpan melalui menu Save for Web. Oiya... Satu lagi, tergantung koneksi juga. Kalau koneksi bagus ya nyantai aja hehehe...

      Delete
  26. wah boleh juga tuh mba,,,saya akan coba buat desain blog saya...

    terimaksih share nya mbak

    ReplyDelete
  27. Cakep tipnya
    Akan saya coba di blog wordpress
    Terima kasih tutorialnya
    Salam hangat dari Jombang

    ReplyDelete
    Replies
    1. Sejauh ini saya cuma nyoba di blogspot pakde, gtw kalau di wordpress hehehe...makanya dikasih note khusus blogspot :)

      Delete
  28. Berarti harus cari foto yg bisa mewakili dulu ya. Save deh caranya

    ReplyDelete
  29. Bookmark... ntar pengen coba ah. Tapi aku sebenernya kurang suka template yang terlihat ramai.

    ReplyDelete
  30. wuihhh keren bu...
    makasih triknya :)

    ReplyDelete
  31. Nice tips Mbak....
    Hebat ini ulikan blogspotnya.

    ReplyDelete
  32. Kereen Mbak, saya juga jatuh cinta dg templatenya Diana Rikasari, tapi gambar saya nggak semeriah itu. Thanks tips berharganya ya, kepengen coba tp masih belum PD,euy! #Gaptek asli

    ReplyDelete

Terimakasih sudah berkomentar yang sopan dan membangun. Jangan bosan untuk berkunjung lagi ya. :)