Tutorial Tab Menu Jenis Lava Lamp Navigation
STEP 1
Daripada DASHBOARD>DESIGN>PAGE ELEMENTS>ADD A GADGET(Sila ambil “add a gadget” yang kedudukan bawah header)>HTML/Javascript
STEP 2
Copy code di bawah ke dalam “Content“. Sila tinggal kosong/blank pada “Title“
<style>#container {width: 100%;margin: 0px 0px;padding: 0px 0px 40px 10px;}ul, li {margin: 0; padding: 0;}#blob {-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;border-right: 1px solid #0059ec;border-left: 1px solid #0059ec;position: absolute;top: 0;z-index : 1;background: #FFC1C1;background: -moz-linear-gradient(top, #FFC1C1, #FFC1C1);background: -webkit-gradient(linear, left top, left bottom, from(#FF0033), to(#FF0033));-moz-border-radius: 4px;-webkit-border-radius: 4px;-moz-box-shadow: 2px 3px 5px #011331;-webkit-box-shadow: 2px 3px 5px #011331;}#lava-lamp {background: #D41A1F;float: left;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;border: 1px solid #BDBCBA;margin: 0px 0px 15px;padding: 8px 100px 10px 0px;}#lava-lamp li {float: left;list-style: none;border-right: 1px solid #4a4a4a;border-left: 0px solid #4a4a4a;}#lava-lamp li a {color: #DDDCD8;text-shadow: 0 0px 1px #81807B;position: relative;z-index: 2;float: left;font-size: 13px;font-family: arial, sans-serif;font-weight: bold;text-decoration: none;padding: 0px 20px;}</style><div id=”container”><ul id=”lava-lamp”><li id=”selected”><a href=”URL/LINK BLOG” target=”_blank”>HOME</a></li><li><a href=”URL/LINK BLOG 2” target=”_blank”>TAJUK MENU TAB 2</a></li><li><a href=”URL/LINK BLOG 3” target=”_blank”>TAJUK MENU TAB 3</a></li></ul></div><script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js” type=”text/javascript”></script><script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js”></script><script type=”text/javascript” src=”https://sites.google.com/site/jquery01/jquery.spasticNav.js”></script><script type=”text/javascript”>$(‘#lava-lamp’).spasticNav();</script>
Pada code dalam Step 2, korang boleh adjust pada code yang berwarna;
Merah: boleh tukar code warna rujuk CODE WARNA HTMLBiru: Jarak antara last tab menu dengan background. Boleh try and error untuk panjang dan pendekkan jarak ni.
Hijau: Tukar url/link blog dan tajuk yang akan keluar pada tab menu. Untuk tambah lagi just copy coding;
<li><a href=”URL/LINK BLOG” target=”_blank”>TAJUK MENU TAB</a></li>
STEP 4
Klik SAVE>PREVIEW>Kalau puas hati boleh klik SAVE ye.
Credit: coding ni telah di upgrade sedikit dari sumber maribinablog
Sharing is caring
cik tom !
menarik menu bar tu..
tapi SCC tak buat la kowt..huhu
p/s: Cik tom,,nak tanye..
sal tittle image kat sidebar tu,,kenape tittle utk follower tak menjadi???
cube cik tom usha blog SCC, tgk tittle tuh..
makaseh berkongsi…
nanti GKSB nk try buat gk la =)
makaseh berkongsi…
nanti GKSB nk try buat gk la =)
@SCC:
erm psl title follower tue…scc xtukar lg text "bunny lover" pada code gambar macam title sidebar yang lain…cuba klik "ctrl+f" dan search "bunny lover" …pastu ubahkan text tue pada code gambar yang scc dah edit;
<center><img src="URL IMAGE"/></center>
@GKSB: ur wlcm dear..selamat mencuba 🙂
cik tom mmg hebat la, den kagum!!haha;p
fuyoo!
Banyak betul ilmu cik tom ni.
Terima kasih ya kerana sudi berkongsi.
cik tom sy da cuba jadi!tp kan cik tom.. cene pulak nak masukkan kiter punya blog dalam tab menu?
salam petang khamis =)
rasa mcm payah la ni…hehe..sbb suka yang simple je..hehe
thanx cik tom..bergune tuk org yg suke design2 template..
yah nice2..buat yg ni lg senang lah syira..amik dr label jer..
hai ciktom….
(shoutmix xde…jadi hai kat sini)
hahaha…
cik tommmm. terima kasih 🙂
akhirnya cik tom buat juga yaa 🙂
miza memang suka tab menu cik tom. simple ja. miza nak try buat macam cik tom plak 🙂
nice tutorial cik tom
tp yang pasti ia memberatkan blog kita kan?
xp xefek kot..
nt nas akan try kalau jadi..
hehehe
lama xsinggah sini 😛
gambar hukuman maut zaman dulu dan kini (gambar kartun,jgn takut ea :P)
CTom, tutorial pun tutorial laaa…janji dapat baca entri Tom…kalau lama tak de, rindu tau kat Tom….he he he…akak ni dah fobia dik oi…tengok coding ni…hi hi hi…hanya Tom yang tau…
assalamualaikum cik TOm..alief nak tanya pndapat cik Tom dan org2 yg komen ni..cik tom,,hari tu kan,,ada satu anonymous ni,,dia dtg blog alief..lps tu dia komen mcm ni..dia ckp lelaki yg ber blog is LOSER!!..sedih alief…dah la skrg ni alief baru nk berjinak2 dgn dunia berblogging..apa pndpt cik tom??betul ke si anonymous tu ckp??? cik tom,kalau cik tom free,,dtg2 la blog alief..bagi kritikan mmbina kat blog alief..mana taw,,boleh kembalikan smgt alief nak ber blog..dan berjaya mcm bro MAMAT tu..dan kalau cik tom rasa blog alief boleh prgi jauh,,follow la..alief tunggu cik tom..thanx sbb sudi baca komen ni cik tom..
Wahh~ Macam menarik. Boleh guna bila Shag nak tukar template lain nnt 😛
Entri terbaru Shag : Surat tak rasmi untuk Nelly
terbaik ar cik tom~ mar mmg agk mencari bendalah nie~ thanks eh~
ok cik tom..mamat nak try buat..kalau jadi happy mamat..he3
OK cik tom jadi..
tapi satu je masalh dia..
bila buka page tu,,ada tulisan read more..Tapi bila tekan read more tu,tak jadi apa2 dia still masih sama..
Mamat rasa…mungkin bila buat page,dia tak sesuai untuk read more..btul ke??
pernah nampak yg effect nie tapi x tau nama…thanks cik tom…waaa cik tom pergi gathering bersama ben ashaari…hu3.jauhnya batu buroks tu…hu3
wahhh…ni best ni..kalo jadi, ezma belanje cik tom mcd eh..hehehe… 😀
Blog ko ni memang bagus untuk tutorial lah..
Pernah sekali tau, aku cari tutorial ape ntah, sekali kuar tau entry ko..
1st page google ok..
Sila berbangga..
Maybe ade tutorial yang aku terskip kat blog ni kot tu yang tak pernah baca..
Huhu..
Latest entry : Istimewa di Hari Ulangtahun ke-23 Deen Hotfm
best2 tutorial cik tom!
tp xsempat la nak godek blog sbb skang ngah bz nk mula tesis..huu..
tq cik tom sbb kongsiiiiiii!
happy CNY!
nnt nak upah cik tom cantikkan blog yaty lah. buleh ka? hehehe
Owh.. Sama ngan mamat buat.. hu3
nak copas dulu simpan dalam file.
mana lar tau teringin nak layout kat blog.Mekasih atas perkongsian nih cik Tom.
comel blog cik tom. baby saya pun suka tengok. ni lah babynya..
http://adzriel.blogspot.com/2011/02/hebat-sungguh-ciptaan-allah.html
aloo xjadik pun cik tom..sob!
cik tom amat kaya dgn ilmu2 cmni 🙂
wah… menarik3.. hehe…
cik tom tau x camna nak buang readmore button dalam page kite??
ermmm.,hnya mampu melihat cik tom tanpa boleh mengubah blog sy…eheheeee
aiii cik tom…zati ada new n3…terbaekkk dr atiiiiiiiiiii..come
nak try ni.. skng
@nazirul: thanks.xde duit kecik nak bg..hehehehhe…
apa ni buat ni cik tom??mamat buat jadi..
tpi bila buka page…kene klik read more pula…adussssss
@she retarded: fuyooo jgklah..huhu
@lunaticg: hanya berkongsi setakat mana yang mampu 🙂
@bella: masukkan blog dalam tab menu??bella just masukkan link log pada tulisan yang warna hijau tue (url/link blog)..
@syira: ada banyak cara untuk buat tab menu..boleh pilih mana2 cara yang disukai…
@dLa: yup..pada yang suka design blog boleh la mencuba 🙂
@puanbee: mmg agak mudah just copy code dan ubah yang bahagian warna tue je…huhu
@belalang: sori terpaksa buang sebab xdpt nak catch up pertanyaan blogger di shoutmix..kalau dah ok nanti maybe letak blk ke..tgk keadaan
@miza: sori tau lambat…huhu..buat la mana yang miza suka ye..huhu..
@nas: setakat yang cik tom rasa xefek berat loading pada blog..slmt mencuba..
@nurin: hehe…terpaksa marathon untuk tutor request sebab dah makin bertambah…kesian kat kawan2 yang nak belajar..huhu
@aliefcmoi: psl lelaki loser kalau buat blog..tue semua nonsense..xyah peduli..kalau lelaki buat blog tue la nmpk lg versatile dan macho..sbbnya bukan senang tau lelaki nak duk dpn blog menaip entry…dan bukan semua orang ade bakat nak buat camtu..so just ignore it..
akak sekarang ni berenti jap dari layan tutorial ni..
broadband tengah slow..
huhu..
akan datang akak akan cuba jugak..
terima kasih cik tom..:)
@shag: boleh je…huhu
@mar: selamat mencuba ye mar 🙂
@matika: cik tom pun xberapa pasti..tp mmg ade masalah sesetengah blog xleh terima sesetgh coding yg lain..maybe mmg template tue xsesuai readmore or cuba mamat cari coding lain untuk buat readmore yang sesuai dgn code template blog mamat sekarang..
@adam: aaah cik tom pi gathering tue..hehe….jom la join gathering blogger trg lain kali ye 🙂
@~eZmALiZa~: nak belanje mcD??wah bestnya…hehehe
@iRa~": boleh cuba bila free2 nanti ye..good luck on thesis 🙂
@poyaty: boleh2..bagi pengeras best2..hehehe
@decrewz: ye ke?mamat ni mmg pantas dan rajin…
@ghost writer: boleh je..lain kali boleh buat bila rajin n free 🙂
@Adzriel AB: ye ke??nanti cik tom tgk baby..hehe
@: husna :olo nape plk tak jadi…husna copy je coding ni..pastu just adjust/edit pada code yang cik tom kalerkan warna hijau, biru n merah..yang lain jgn adjust…
@macy: belajar dari blog lain jgk macy…sj kongsi mana yang tahu…
@..:akyn:..: akyn kena carik balik dari mana tutorial yang aky amaik utk buat readmore sebelum ni…pastu undo balik cara dgn buang code yang diajar dalam tutorial tue..
@woofer: jgn sedih2 ye achie…cb cr blog yg ade buat tutorial yg sesuai dgn code blog achie
@tieah: ye ke??ok bangga2…wakakka
@zaty: ok dear
@encik blogger: slmt mencuba ye
@mamat: ye ke??sat lg cik tom pi terjah k…
@diana:cik tom punya berukband slow gak akak..tension nak on9..
@
hebat la cik tom! syabas~~ ^_^
nice la cik tom..thnks berkongsi..insyaallh klu sempt nnt fatin try wat k 😀
Thanks sharing benda ni ya Tom..nanti ellen try aplikasikan dalam blog,.itupun kalo reti..hehe
ok..TQ
dah belajar benda baru lagi
cik tom, nak tny lg ek..utk wat tab menu ni..mknanye kite kena ada byk blog ker? pastu letak url link setiap blog tu kat coding ek?
hope cik tom sudi tlg sy lagi..=)
@keen: tenkiu
@fatin: ok..good luck!
@ellen: ala ellen buat ni…
@kak ati: ur wlcm…huhu
@embun pagi: untuk buat ni xsemestinye kita kena banyak blog yunk…tp byk pages/menu tab…sebelum ni kena buat tab menu dulu.
https://www.ciktom.com/2010/08/tutorial-tab-menu.html
tp boleh jgk kalau nak masukkan apa2 link..bebas..tp kalau contoh yg cik tom guna link dr pages…
nanti incase awak dah buat menu tab dr link tutorial pastu nak buat cam yg cik tom ajar dlm tutorial ni plk…just remove je page dr "page element"..pastu amik link page dr "edit page"…
faham x?cuba buat dl ye…kl xfaham o pe2 leh tanya ^_^
cik tommmmm !!!! da boleh…… terima kasih tersangat2 cik tom !! =) cuba cik tom tgk…
http://qasehmarissa2.blogspot.com/
dan kalau kite nk adjust background tu tang mn ek coding nye cik tom?dia jadi x sama dgn panjang dan lebar tab menu sy..
cik tom..nak tanye ckit!!macam mana nak asingkan entry,contoh bile tekan tab tutorial yang keluar cuma entry tutorial je,pastu bile tekan tab home just keluar entry kite jer…camne ye nak asingkan????please….
Hai Cik Tom…. Syaf Dah CUBa BUat Tab Menu Nie Tapi… NapE Tak Leh Jadi CenTer MacaM cik Tom PUnYa Ek
hye cik tom.. nk tanya.. bila nak tambah page yg seterusnya, xjadi lah.. die jadi 2 baris.. kenapa yer..
@mohd ridwan:nak asingkan boleh guna tab menu/pages…pada entry tue boleh letakkan link untuk semua entry tutorial or apa2 yg diinginkan…
@SYAF: kalau nak center boleh cuba adjust dgn tmbh coding;
<center>CODE TAB MENU</center>
atau tambah pages lagi bagi penuh utk satu baris…hehee..
@The Pure-Blood Girl : Maisarah Azami: maybe jadi 2 baris jugak kalau banyak sgt pages(panjang nama)…kalau nak boleh adjust kat code "padding"
padding: 8px 100px 10px 0px;
dari "100px" tue adjust kecilkan sizenya…
Cik Tom,saya tak dapat buat.Dia bukan memanjang,dia macam dalam point.Tak tahu nak otter macam mana
Jom baca entri terkini haiqal …Kontest-Mari Berjiwa
sori cik tom xdapat nak komen sbb xnampak contoh or codingnya macam mana…or maybe haiqal boleh cuba testing di satu blog contoh dan tunjukkan kat cik tom..
Asal jadi dalam bentuk point eh?
Jom baca entri terkini haiqal …Kontest-Mari Berjiwa
bentuk point?macam mana tue ye?jadi ada bullet list ker?cik tom jenguk blog haiqal..tgk dah cun tab menu tue..
jadi dalam bentuk point jugak la…. terus remove balik… huhuhu
Jom baca entri terkini Hanim Mahali …Hikmah disebalik kedukaan
Cik Tom, tak menjadi lah…. tetiba keluar bullet list… camne erk nak buat?
Jom baca entri terkini Hanim Mahali …Bukit Malawati tumpuan pelancong
X DPT BUAT PON..HUHUHU..X DPT MASUK
thanxs ya..tapi npe sy wat x jdik boxs cmtu erk? jadik ade font jer..huk2..help me pls..;(
apa blod adik ye?cik tom nak kena tengok dulu..nape jadi camtu…or cuba buat sekali lagi follow betul step..jangan termiss apa2 code..
apsal takbleh nak linkkan setiap tab.bila klik trus page not found.apsal?
ye ke?betul ke url link yang dimasukkan? biasa kalau case klik kuar “page not found” means error pada link yg dimasukkan..
ok cik tom.problem tu da pun setel.second prob.kenapa tak boleh tukar warna? da mcm2 color code sy test.masih di warna basic pada code asal.kenapa?
eh ye ke?sepatutnya boleh tukar..betul x copy code warna tue? jangan lupa masukkan juga tanda # depan code warna..
URL LINK/BLOG tu ape?
url blog awak contoh: http://tashatunasorlokman.blogspot.com/