Harry Potter - Golden Snitch

Tutorial - Menu Bar Menggunakan Gambar



Tutorial - Cara Membuat Menu Bar Menggunakan Gambar.

Mungkin dah ramai yang dah tahu tentang cara untuk membuat menu bar menggunakan gambar dalam blogger. Tapi, atas beberapa permintaan dari readers, Khai pun nak buat tuto untuk membantu mereka. Ini merupakan cara paling mudah dan simple untuk membuat menu bar dalam blog. Korang boleh design menu bar mengikut kesukaan korang dengan menggunakan gambar yang menarik or gambar yang korang buat sendiri.

Untuk membuat menu bar menggunakan gambar korang hanya perlu ikut langkah ni.

1. Login ke Blogger Dashboard > Layout > Add HTML/JavaScript

2. Lepas tu, Copy Kod di bawah, dan paste ke dalam ruangan HTML/JavaScript


<center>

<!-- Home -->
<a href="http://www.khaiangel.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgesuR9taz3a4a8S71C8GKi34HYiwBT1AaFRaWwPaChH6QokH3g7R1GCaeEGN234E2kZqwveLIcLPLcjvFPrKevxCBoJbc0geqDWxUXR_YC6ZjPVAaGCtu2o70kIAr1CsaaWR7E76KDwio/s1600/Home_Btn.png" alt="Home Sweet Home"/></a>
<!-- Home -->

<!-- Info -->
<a href="http://www.khaiangel.com/p/info_2.html" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDNteG7J_TfdFrCMHr08nmRBolylvkEQpZ2LWXrqc90hxoiJkscCLc9zdolDauDzKNEYif7W0cpRhyG9PF8wDNxovWKI1eDPjl_7vZoBvKtwj7uWmFdZ8jEgYK6HZm8e3N9Xp9l_T5krg/s1600/Info_btn.png" border="0" title="Collection of Informations" alt="Info" /></a>
<!-- Info -->

<!-- Tutorial -->
<a href="http://www.khaiangel.com/p/tutorial-blog.html" target="_blank" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6PL0Qhngtd1-Q3k0lHrsQnqyVJQt6ZXmD_Tu5_KcPDOlhq6dzDaiUrodapN5GGyWGvJLycFBeCVV_L8BSyRHhHeb5ZnsSNC45Lz1nnblppN04anCowAnfvBfXbBuaWIZM_-I5bn58P3M/s1600/Tuto_btn.png" border="0" title="Blog Tutorial" alt="Tutorial Blog" /></a>
<!-- Tutorial -->

<!-- Tips -->
<a href="http://www.khaiangel.com/p/tips-tips.html" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV5Jp5sWcS63QTuv55Gv3wzSbJyRSchIw6JN56GZ_tRnEgqJNYRHz48M2SZnDgAXx6J1di8-oaPX046OGHCKcx334t6Pg8IVdTUDN56JXPRwSFngRyY8DH29QQqrwC5UtC12JWc5VA5Rw/s1600/Tips_btn.png" border="0" title="Tips" alt="Tips" /></a>
<!-- Tips -->

<!-- My Story -->
<a href="http://www.khaiangel.com/search/label/My Story?max-results=5" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx2NO-CrlMoleQClqOIHlbOxDm_98WEfgdgR7yj3WNmmJ-Qr158fmMgbrhDICS4R9v5aD8z72ewsWmQkf5jhpiyrV6MKpUjSovbNXeYUZYQpwUK62UFevk0MYyox_DvYD1Z9mqY_3GO_A/s1600/MyStory_btn.png" border="0" title="My Story" alt="My Story" /></a>
<!-- My Story -->

<!-- Disclaimer -->
<a href="http://www.khaiangel.com/p/disclaimer.html" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQWmG-b1ahCRfJDlz5tsxRXTJd53j_fZMSckNKHytdmiA3cm9P1Wvn4ixlF_ohof_FKWUSukz4KhSacAf26HHclMMCEfIRExd6Vzqz2oi9Zd54D-Zy75RI6vF4OBx9BmUQfAgQIMfg2GQ/s1600/Disclaimer_btn.png" title="1st Time User, Please Read this!" border="0" alt="Disclaimer" /></a>
<!-- Disclaimer -->

</center>

3. Customization

  • Tukarkan Link yang bewarna Kuning kepada Link Page/Label korang
  • Tukarkan Link yang bewarna Oren kepada Link gambar yang korang nak gunakan or gambar yang korang Upload
  • Gantikan title= dan alt= untuk memberikan sedikit penerangan tentang gambar (Berguna untuk SEO)
  • Untuk membuat menu bar secara menegak, korang boleh tambahkan kod <br />

Cara upload gambar paling mudah 
Korang hanya perlu gunakan tools yang sedia ada dalam blogger.

1. Masuk ke Blogger Dashboard dan klik pada new post kemudian Insert Image.


2. Selepas tu, Klik pada HTML untuk mendapatkan URL/Link Gambar yang korang Upload tadi.


:) Selamat Mencuba

Note : Dalam Tutorial ni, Khai gunakan kod HTML menu bar yang digunakan dalam Khaiangel.com, If korang pakai link gambar tu, Khai akan tahu serta merta. 


Tags : Tutorial - Menu Bar Menggunakan Gambar, Blog Tutorial, Cara Upload Gambar, Cara Buat Menu Bar dalam Blogger, Menu Bar Simple

6 comments:

  1. boleh buatkan link untuk masukkan lgu afghan-padamu Aku bersujud tak?da buat byk kli xjd gak

    ReplyDelete
  2. Hello @NoLaYuLzA.. Klik sini untuk Cara Letak lagu Dalam Blog

    Hmm.. untuk lagu Afgan-Padamu Aku Bersujud.. Boleh Masukkan Link ni dalam Tutorial letak lagu tu..

    http://media.irondj.net/mix/file/24449/PadaMu_ku_bersujud__Afghan_.mp3

    ReplyDelete
  3. hiii awk.. tengs for da tutorial. jd sgt2 heee

    ReplyDelete
  4. Hello @Accounting Lover.. your welcome ^__^

    ReplyDelete
  5. Assalamualaikum..tq info yg amat berguna sy dh berjaya,nk tnya macam mana nk tahu berapa ramai yg tengok blog kita tq2..

    ReplyDelete
  6. Hello Suri.. you ada akaun Nuffnang tak? If ada di sana sangat mudah untuk mengetahui jumlah UV(unique visitor) dan PV(Page View) dalam blog kita.

    Selain itu, kita juga boleh tahu, pelawat itu datang dari mana dan apa keyword yang digunakan.

    untuk mendaftar just gunakan facebook or twitter.
    www.nuffnang.com.my

    ReplyDelete

Don't forget to drop your comment.. Thanks ya!

Tutorial Blog Tutorial Blog Tutorial Blog
Creative Commons License
Khaiangel (Dot) Com is licensed under a
Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License
.
©KhaiAngel.Blogspot.Com All Rights Reserved