Tutorial Tab Menu Jenis Lava Lamp Navigation

Tutorial lagi. Harap tak boring tengok ye sebab sekarang blog cik tom dah blogger kenal dengan blog tutorial. hehe… Tutorial ni pertanyaan dari miza yusof tapi cik tom tengok sekarang blog miza dah buat tab menu yang cun ada gambar ladybird lagi. Sorry ye lambat buat tapi harap dapat bagi manfaat kat mana2 blogger lain cara nak buat /pasang tab menu jenis Lava Lamp Navigation. Kat bawah ialah contoh gambar tab menu jenis Lava Lamp yang cik tom guna sekarang. Kalau korang nak belajar buat tab menu yang biasa boleh belajar dengan klik “Tutorial Buat Tab Menu Cara Mudah“.


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>

STEP 3

Pada code dalam Step 2, korang boleh adjust pada code yang berwarna;

Merah: boleh tukar code warna rujuk CODE WARNA HTML
Biru: 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

ciktom

Cik tom seorang part time blogger yang sangat sukakan dunia blogging dan buah tomato. Mula menulis blog 15 Julai 2010. Menaip segala ilham dari akal fikiran dan hati ke dunia alam cyber. Sebarang persoalan atau pengiklanan/advertorial/review sila hubungi ciktom; tomatogurl86[at]gmail.com...gantikan [at] dengan @

74 thoughts on “Tutorial Tab Menu Jenis Lava Lamp Navigation

  • February 3, 2011 at 3:03 am
    Permalink

    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..

    Reply
  • February 3, 2011 at 3:09 am
    Permalink

    makaseh berkongsi…

    nanti GKSB nk try buat gk la =)

    Reply
  • February 3, 2011 at 3:09 am
    Permalink

    makaseh berkongsi…

    nanti GKSB nk try buat gk la =)

    Reply
  • February 3, 2011 at 3:21 am
    Permalink

    @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>&lt;img src=&quot;URL IMAGE&quot;/&gt;</center>

    Reply
  • February 3, 2011 at 3:24 am
    Permalink

    @GKSB: ur wlcm dear..selamat mencuba πŸ™‚

    Reply
  • February 3, 2011 at 3:51 am
    Permalink

    cik tom mmg hebat la, den kagum!!haha;p

    Reply
  • February 3, 2011 at 5:42 am
    Permalink

    Banyak betul ilmu cik tom ni.
    Terima kasih ya kerana sudi berkongsi.

    Reply
  • February 3, 2011 at 5:49 am
    Permalink

    cik tom sy da cuba jadi!tp kan cik tom.. cene pulak nak masukkan kiter punya blog dalam tab menu?

    Reply
  • February 3, 2011 at 5:56 am
    Permalink

    salam petang khamis =)

    rasa mcm payah la ni…hehe..sbb suka yang simple je..hehe

    Reply
  • February 3, 2011 at 6:22 am
    Permalink

    thanx cik tom..bergune tuk org yg suke design2 template..

    Reply
  • February 3, 2011 at 6:23 am
    Permalink

    yah nice2..buat yg ni lg senang lah syira..amik dr label jer..

    Reply
  • February 3, 2011 at 6:35 am
    Permalink

    hai ciktom….
    (shoutmix xde…jadi hai kat sini)

    hahaha…

    Reply
  • February 3, 2011 at 7:33 am
    Permalink

    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 πŸ™‚

    Reply
  • February 3, 2011 at 7:54 am
    Permalink

    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…

    Reply
  • February 3, 2011 at 7:56 am
    Permalink

    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..

    Reply
  • February 3, 2011 at 9:23 am
    Permalink

    terbaik ar cik tom~ mar mmg agk mencari bendalah nie~ thanks eh~

    Reply
  • February 3, 2011 at 9:35 am
    Permalink

    ok cik tom..mamat nak try buat..kalau jadi happy mamat..he3

    Reply
  • February 3, 2011 at 9:56 am
    Permalink

    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??

    Reply
  • February 3, 2011 at 10:00 am
    Permalink

    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

    Reply
  • February 3, 2011 at 10:27 am
    Permalink

    wahhh…ni best ni..kalo jadi, ezma belanje cik tom mcd eh..hehehe… πŸ˜€

    Reply
  • February 3, 2011 at 6:34 pm
    Permalink

    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

    Reply
  • February 3, 2011 at 11:15 am
    Permalink

    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!

    Reply
  • February 3, 2011 at 11:44 am
    Permalink

    nnt nak upah cik tom cantikkan blog yaty lah. buleh ka? hehehe

    Reply
  • February 3, 2011 at 12:35 pm
    Permalink

    Owh.. Sama ngan mamat buat.. hu3

    Reply
  • February 3, 2011 at 12:51 pm
    Permalink

    nak copas dulu simpan dalam file.
    mana lar tau teringin nak layout kat blog.Mekasih atas perkongsian nih cik Tom.

    Reply
  • February 3, 2011 at 1:31 pm
    Permalink

    aloo xjadik pun cik tom..sob!

    Reply
  • February 3, 2011 at 4:07 pm
    Permalink

    cik tom amat kaya dgn ilmu2 cmni πŸ™‚

    Reply
  • February 3, 2011 at 4:44 pm
    Permalink

    wah… menarik3.. hehe…
    cik tom tau x camna nak buang readmore button dalam page kite??

    Reply
  • February 3, 2011 at 5:00 pm
    Permalink

    ermmm.,hnya mampu melihat cik tom tanpa boleh mengubah blog sy…eheheeee

    Reply
  • February 4, 2011 at 6:51 am
    Permalink

    aiii cik tom…zati ada new n3…terbaekkk dr atiiiiiiiiiii..come

    Reply
  • February 4, 2011 at 3:27 pm
    Permalink

    nak try ni.. skng

    Reply
  • February 4, 2011 at 4:37 pm
    Permalink

    @nazirul: thanks.xde duit kecik nak bg..hehehehhe…

    Reply
  • February 4, 2011 at 4:42 pm
    Permalink

    apa ni buat ni cik tom??mamat buat jadi..
    tpi bila buka page…kene klik read more pula…adussssss

    Reply
  • February 4, 2011 at 4:43 pm
    Permalink

    @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 πŸ™‚

    Reply
  • February 4, 2011 at 4:46 pm
    Permalink

    @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..

    Reply
  • February 4, 2011 at 4:54 pm
    Permalink

    @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..

    Reply
  • February 4, 2011 at 4:56 pm
    Permalink

    akak sekarang ni berenti jap dari layan tutorial ni..
    broadband tengah slow..
    huhu..
    akan datang akak akan cuba jugak..
    terima kasih cik tom..:)

    Reply
  • February 4, 2011 at 5:01 pm
    Permalink

    @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 πŸ™‚

    Reply
  • February 4, 2011 at 5:21 pm
    Permalink

    @~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 πŸ™‚

    Reply
  • February 4, 2011 at 5:29 pm
    Permalink

    @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..

    @

    Reply
  • February 5, 2011 at 5:41 pm
    Permalink

    hebat la cik tom! syabas~~ ^_^

    Reply
  • February 6, 2011 at 8:37 am
    Permalink

    nice la cik tom..thnks berkongsi..insyaallh klu sempt nnt fatin try wat k πŸ˜€

    Reply
  • February 6, 2011 at 11:59 am
    Permalink

    Thanks sharing benda ni ya Tom..nanti ellen try aplikasikan dalam blog,.itupun kalo reti..hehe

    Reply
  • February 8, 2011 at 12:01 am
    Permalink

    ok..TQ
    dah belajar benda baru lagi

    Reply
  • February 19, 2011 at 5:49 pm
    Permalink

    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?

    Reply
  • February 19, 2011 at 5:51 pm
    Permalink

    hope cik tom sudi tlg sy lagi..=)

    Reply
  • February 20, 2011 at 3:01 pm
    Permalink

    @keen: tenkiu

    @fatin: ok..good luck!

    @ellen: ala ellen buat ni…

    @kak ati: ur wlcm…huhu

    Reply
  • February 20, 2011 at 3:06 pm
    Permalink

    @embun pagi: untuk buat ni xsemestinye kita kena banyak blog yunk…tp byk pages/menu tab…sebelum ni kena buat tab menu dulu.

    http://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 ^_^

    Reply
  • February 20, 2011 at 3:46 pm
    Permalink

    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..

    Reply
  • March 7, 2011 at 7:16 am
    Permalink

    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….

    Reply
  • March 16, 2011 at 5:17 am
    Permalink

    Hai Cik Tom…. Syaf Dah CUBa BUat Tab Menu Nie Tapi… NapE Tak Leh Jadi CenTer MacaM cik Tom PUnYa Ek

    Reply
  • March 21, 2011 at 10:09 pm
    Permalink

    hye cik tom.. nk tanya.. bila nak tambah page yg seterusnya, xjadi lah.. die jadi 2 baris.. kenapa yer..

    Reply
  • March 22, 2011 at 1:37 am
    Permalink

    @mohd ridwan:nak asingkan boleh guna tab menu/pages…pada entry tue boleh letakkan link untuk semua entry tutorial or apa2 yg diinginkan…

    Reply
  • April 4, 2011 at 7:53 pm
    Permalink

    @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..

    Reply
  • April 4, 2011 at 7:55 pm
    Permalink

    @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…

    Reply
  • April 20, 2011 at 11:12 pm
    Permalink

    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 BerjiwaMy Profile

    Reply
    • April 22, 2011 at 6:14 pm
      Permalink

      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..

      Reply
  • July 7, 2011 at 9:42 pm
    Permalink

    X DPT BUAT PON..HUHUHU..X DPT MASUK

    Reply
  • August 4, 2011 at 1:40 pm
    Permalink

    thanxs ya..tapi npe sy wat x jdik boxs cmtu erk? jadik ade font jer..huk2..help me pls..;(

    Reply
    • August 15, 2011 at 6:57 pm
      Permalink

      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..

      Reply
    • January 14, 2012 at 5:34 am
      Permalink

      ye ke?betul ke url link yang dimasukkan? biasa kalau case klik kuar “page not found” means error pada link yg dimasukkan..

      Reply
      • January 22, 2012 at 2:49 am
        Permalink

        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?

        Reply
        • February 21, 2012 at 7:47 pm
          Permalink

          eh ye ke?sepatutnya boleh tukar..betul x copy code warna tue? jangan lupa masukkan juga tanda # depan code warna..

  • March 10, 2012 at 3:18 pm
    Permalink

    URL LINK/BLOG tu ape?

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Optimization WordPress Plugins & Solutions by W3 EDGE