Tutorial - Menu Bar Menggunakan Gambar

Tweet

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