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?


By
Tags
loading..

53 comments

  1. Rani R Tyas30 May 2016 at 07:53

    wah boleh juga tapi sepertinya saya belum seekspresif itu, hihihi

    ReplyDelete
    Replies
    1. Handriati30 May 2016 at 10:58

      Gpp mba, nanti kl sudah ekspresif br diaplikasikan :D

      Delete
  2. Ika Puspita30 May 2016 at 09:13

    Langsung bookmark, ah *meski eksekusinya entah kapan :p

    ReplyDelete
  3. Innnayah30 May 2016 at 09:37

    Sempet mau bikin tapi jadi keramean mbak.

    ReplyDelete
    Replies
    1. Handriati30 May 2016 at 11:03

      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. Santi Dewi30 May 2016 at 10:00

    aih... lucu banget ya... :)

    ReplyDelete
  5. Zilqiah Angraini30 May 2016 at 10:34

    kereeennn mbaakk.. aq mau nyoba nanti hehehhe

    ReplyDelete
  6. Hanifa30 May 2016 at 15:07

    This comment has been removed by the author.

    ReplyDelete
  7. Hanifa30 May 2016 at 15:22

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

    ReplyDelete
    Replies
    1. Handriati30 May 2016 at 15:25

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

      Delete
  8. Pungky Prayitno30 May 2016 at 21:13

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

    ReplyDelete
    Replies
    1. Handriati1 June 2016 at 07:13

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

      Delete
  9. Aprie30 May 2016 at 23:51

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

    ReplyDelete
  10. Lidha Maul31 May 2016 at 08:52

    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. Handriati1 June 2016 at 07:14

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

      Delete
    2. Lidha Maul1 June 2016 at 14:40

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

      Delete
  11. windahsaputro31 May 2016 at 08:54

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

    ReplyDelete
  12. Umi Kudori31 May 2016 at 08:58

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

    ReplyDelete
  13. Ophi Ziadah31 May 2016 at 09:18

    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. Handriati1 June 2016 at 07:16

      Pernah keknya mba coba lihat label tutorial atau blogging tips...

      Delete
  14. andyhardiyanti31 May 2016 at 09:44

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

    ReplyDelete
  15. mude mudrikah31 May 2016 at 10:44

    Unyu2.. kiyuutt

    ReplyDelete
  16. Delyanet Karmoni31 May 2016 at 11:50

    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. Handriati1 June 2016 at 07:17

      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
  17. momtraveler31 May 2016 at 12:03

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

    ReplyDelete
    Replies
    1. Handriati1 June 2016 at 07:18

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

      Delete
  18. Ranny31 May 2016 at 12:22

    Tertarik bangeeet, hanya punyaku WP :( *bingung*

    ReplyDelete
  19. Nathalia DP31 May 2016 at 17:09

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

    ReplyDelete
  20. Winda Carmelita31 May 2016 at 18:03

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

    ReplyDelete
  21. Inda Chakim31 May 2016 at 18:54

    cihuuyyyyyy, nyobak ah,doain sukses ya mbk

    ReplyDelete
  22. Tian Lustiana31 May 2016 at 19:22

    Ini harus langsung dicobain sambil baca sambil praktek

    Makasih

    ReplyDelete
  23. Nia K. Haryanto31 May 2016 at 20:11

    Coba-coba, ah. Lucuuuu...

    ReplyDelete
  24. Istiana31 May 2016 at 20:41

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

    ReplyDelete
  25. fanny fristhika nila31 May 2016 at 21:49

    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. Handriati1 June 2016 at 07:20

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

      Delete
  26. cerita dandelion1 June 2016 at 07:19

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

    ReplyDelete
    Replies
    1. Handriati1 June 2016 at 07:21

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

      Delete
  27. Jarwadi1 June 2016 at 11:09

    waini, saya bingung baca baca tulisan pakar desain theme :)

    ReplyDelete
  28. Cuculutus1 June 2016 at 19:07

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

    ReplyDelete
    Replies
    1. Handriati1 June 2016 at 19:12

      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
  29. DoNurdians1 June 2016 at 19:11

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

    terimaksih share nya mbak

    ReplyDelete
  30. Pakde Cholik1 June 2016 at 19:54

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

    ReplyDelete
    Replies
    1. Handriati1 June 2016 at 20:40

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

      Delete
  31. Afrianti Eka Pratiwi1 June 2016 at 21:57

    Wah makasih mba tutorialnyaaa.

    ReplyDelete
  32. Ade Anita2 June 2016 at 07:20

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

    ReplyDelete
  33. Ika Koentjoro2 June 2016 at 11:00

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

    ReplyDelete
  34. Mas Darsono9 June 2016 at 09:53

    wuihhh keren bu...
    makasih triknya :)

    ReplyDelete
  35. TBI - Tips Blogging Indonesia15 June 2016 at 20:13

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

    ReplyDelete
  36. mutia ohorella20 November 2016 at 01:46

    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
  37. Rizal4 January 2021 at 19:57

    Artikel bagus, yuk kunjungi website kami

    ReplyDelete

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

Subscribe to: Post Comments (Atom)