KEKASIH CIK CIRA

TUTORIAL TAB MENU YANG SANGAT MUDAH!!!!

hai sumer...
arini nak kasi tutorial sikit boley....
tenkiu kepada kak ann sbb kasi copy paste entri die ni..
saje nak kongsi ngn korang khusus tok new blogger...
mase mula2 dulu, punya la payah aku nak wat tab menu ni..
cari punya cari terjupe blog kak ann ni..
tewos la ikot dan menjadi..


hah????
tak tahu ape tu tab menu??
cuba nengok kat atas tu..
yang ada HOME, CINTA dan bla,bla....

nampak x???
law tak nampak,lantak korang la..
muahahaha..

Ok.. Tanpa berlenggang lenggang kangkung ataupun lenggang lenggok mak limah...
Jom kite tinjau tutorial tab menu.

<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<.>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

1. Memula fikir dulu ape yang korang nak letak sebagai tab menu?
Tak kisahlah nak letak 'About Me' ke.. 'Twitter' ke.. 'Contact' ke...'Tempahan Nasik Ayam' ke. Ikut suke hatilah.. Lepastu design tab menu mengikut selera, menggunakan software yang sesuai (Adobe Photoshop, Photo Impact..etc). Sila pastikan saiznya sesuai, macam saiz tab menu ann adelah 100px X 54px. Save sebagai file PNG dengan nama yang sesuai. Means..kalau 'Home', letaklah 'Home'. Korang jangan memandai nak letak name file pelik2 nanti payah nak mix & match coding..


2. Copy coding di bawah (tulisan merah) & paste dalam WordPad..



<divid="myMenu">

<a href="PAGE URL">

<a href="PAGE URL">

<a href="PAGE URL">

<a href="PAGE URL">

<a href="PAGE URL">

<style>
#myMenu(position:absolute;
top:50px;
left:380px;
}
</style></divid="mymenu">

Ingat yer.. WordPad. bukan Test Pad ataupun Paddle Pop.... erkk tu aiskrim daa.. Untuk taknak mengelirukan..Anggaplah ni WordPad 1st
Contoh:

**Perhatian yer:
Kalau kamu ade lebih dari 5 tab menu sila tambah coding <a href="PAGE URL"> selepas coding <style> 
Kalau kurang sila padam coding <a href="PAGE URL"> 
Secara ringkasnya coding <a href="PAGE URL"> mewakili 1 tab menu.



3. Login Blogger => Klik New Entry => Upload tab menu mengikut susunan (means mane yang korang nak letak dulu, sila dulukan... jangan lambatkan)
Contoh:




4. Klik => Edit HTML => Copy semua Coding



5. Paste dalam WordPad yang baru (anggaplah ianye WordPad 2nd).
Jangan memandai nak campur cekodokkan dengan coding yang telah di copy dalam WordPad 1st. Fening nanti.. Mulekan mencari coding untuk setiap tab menu kamu yer.
Copy coding bermula dari <img border="0" src=................................... /></a>
Copy satu persatu mengikut turutan.
Contoh:





6. Paste coding yang dah kamu copy tadi dalam WordPad 1st. Satu persatu mengikut turutan. Hingga selesai.
Contoh:



7. Seterusnya, kita akan masukkan pulak 'PAGE URL' pada setiap coding tab menu. Copy 'Page URL' yang bersesuaian dengan tab menu kamu dan paste dalam WordPad 1st.
Contoh:

Penjelasan yang over terjelas, macamnilah copy URL yer..


Pada yang masih samar2 kabur macam mana ann dapatkan URL untuk tab menu 'Recipes' tu.
Macam ni ye...
Setiap kali ann buat entry pasal resepi ann akan letak label Resepi = Yummy.
Nanti kat bahagian 'Labels' di blog akan keluar perkataan Resepi = Yummy.
Bila ann klik perkataan tu akan keluar segala entry koleksi2 resepi mari memasak bersame Chef Ann Onn.
Boleh copy URL nye.

8. Bila dah selesai sesi 'mix n match' segala coding & URL.. Copy yer..

Contoh full coding:

<divid="myMenu">

<a href="http://annfrendly.blogspot.com/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggiIJSmOFlpT_Rwgxui2Vr9j96lOX_r1Bs53b-Qq3maY7CgPVE7mpC9mlC0XLPmmUYW2hMAM08oLI04R5OCpkRrWSyLj0XQzwsBb6SJkMyFhVDesaktdmdbWZGsV5qYlJJnUYGPXOb-P1C/s320/Home.png" /></a>

<a href="http://annfrendly.blogspot.com/search/label/Resepi%20%3D%20Yummy"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM51UYiwxCgLWmiPzl1mWnBKD_3AmawInlXBOQ28K7b4ndzL1xq0bdqEw3DVeBc1Aibnk1P4fgeHsRAqBAFR-li87n3LHsfiVss4MgRKNamDpYPmKhN3XFZiAcnXNeKOuhD0Dol6iYz1sX/s320/recipes.png" /></a>

<a href="http://annfrendlygarden.blogspot.com/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1IuhxnaACBayqEDGlp_PP1MT8eYw2Jryy9yKdT-GcSeg479Zi15CaHKq8GbWJmOKiaGBpmiAiQdxqXxni8BCqMXTOwllaEVJkqTUvWc239u5Llg3nQ3aN6jimIVh3cdTmnEjpGLuCMg4c/s320/garden.png" /></a>

<a href="http://erieq.blogspot.com/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRZOaHtrYTTI__F9kEYiOBjJvrM9fgLyJYttke3Vvip7YUX0yDzfYp8qCVowCF_hLY3qv2fvNjoNq2uHuZ5lr0v6LVsfpS-xp769cGS8QcyyHG1_vY0poCgdpstmyu_4J0lB5d572lLvbg/s320/ErieQ.png" /></a>

<a href="http://annfrendlylinklist.blogspot.com/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyFvDpDbfCIKgD7SsHkzvdmExhZTAYeh1nUP7IWFfTPu-wPWwyk04K9YC93d_akKAfonjRotSrXWhVUfUMGSIBEaseDk4Bk9LqgEfce5va-5zGerSXp0wrxlz-d1YanfhfZwZUoKCRDlah/s320/Followers+.png" /></a>

<style>
#myMenu(position:absolute;
top:50px;
left:380px;
}
</style></divid="mymenu">

9. Kembali ke Blogger.
Klik Design => Add Gadget => Klik HTML/JavaScript

10. Paste Coding => Klik Save

Selesai.. boleh view.. tengok jadi ke tak..


SO APE LAGI...PERGI LA TERJAH BLOG DIE!!!!



No comments:

Post a Comment