Top Menu Fancy LavaLamp

      Menu di dalam sebuah blog sangat berguna, dengan menu kita bisa memasang beberapa link yang mempunyai peran pokok dalam blog tersebut.  Seperti di menu kita bisa memasang profil penulis, daftar isi, topik, link teman atau bisa juga di gunakan untuk memasang posting yang sangat-sangat berguna.  Seperti contohnya di blog ini,  top menu yang lumayan menarik menurutku karena jika di sentuh dengan kursor bisa memperbesar dirinya ^^

Top

      Semua blog pastinya udah mempunyai top menu sendiri-sendiri dengan tampilan yang berbeda-beda.  Tapi kalian juga bisa merubahnya dengan top menu yang aku temukan ini dan akan aku bagi buat kalian yang ingin merubah top menu blog kalian.  Ada beberapa warna yang tersedia.. ada warna merah muda, biru muda, kuning, hitam dan orange.  Sudah siap merubahnya ?  Silahkan ikuti langkah-langkah berikut ini !


  1. Login Blogger.com
  2. Klik Design > Edit HTML
  3. Pasang kode berikut di atas kode ]]></b:skin>

    /*LAVALAMP START*/
    .lavalamp {
    position: relative;
    border: 1px solid #d6d6d6;
    background: #fff;
    padding: 15px;
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    border-radius : 10px;
    -moz-border-radius : 10px;
    -webkit-border-radius : 10px;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
    background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
    height: 18px;
    }
    .magenta {
    background : rgb(190,64,120);
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
    background : -moz-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
    border: 1px solid #841144;
    }
    .cyan {
    background : rgb(64,181,197);
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
    background : -moz-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
    border: 1px solid #2f8893;
    }
    .yellow {
    background : rgb(255,199,79);
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
    background : -moz-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
    border: 1px solid #c08c1f;
    }
    .orange {
    background : rgb(255,133,64);
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
    background : -moz-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
    border: 1px solid #c04f11;
    }
    .dark {
    background : rgb(89,89,89);
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
    background : -moz-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
    border: 1px solid #272727;
    }
    .magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a{
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,.40);
    }


    a {
    text-decoration: none;
    color: #262626;
    line-height: 20px;
    }
    ul {
    margin: 0;
    padding: 0;
    z-index: 300;
    position: absolute;
    }
    ul li {
    list-style: none;
    float:left;
    text-align: center;
    }
    ul li a {
    padding: 0 20px;
    text-align: center;
    }
    .floatr {
    position: absolute;
    top: 10px;
    z-index: 50;
    width: 70px;
    height: 30px;
    border-radius : 8px;
    -moz-border-radius : 8px;
    -webkit-border-radius : 8px;
    background : rgba(0,0,0,.20);
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    }

  4. Pasang kode berikut di atas kode </head>

    <script src='http://yourjavascript.com/3131111161/jquery-1.4.1.min.js'/>
    <script src='http://yourjavascript.com/1414311106/lavalamp.js'/>

  5. Terakhir kita pasang kode nya di Design > Add Gadget > HTML/Javascript

    <div class='lavalamp'>
    <ul>


    <li class='active'><a href='http://www.paulsantosh.com/'>Home</a></li>


    <li><a href='YOUR-LINK-HERE'>About</a></li>


    <li><a href='YOUR-LINK-HERE'>Blog</a></li>


    <li><a href='YOUR-LINK-HERE'>Services</a></li>


    <li><a href='YOUR-LINK-HERE'>Portfolio</a></li>


    <li><a href='YOUR-LINK-HERE'>Contacts</a></li>


    </ul>


    <div class='floatr'/>


    </div>
    <span class='Apple-style-span' style='font-size: xx-small;'><a href='http://dopind.blogspot.com/2012/07/top-menu-fancy-lavalamp.html'>Design by Deo Pradipta</a></span>

    #Ganti YOUR-LINK-HERE dengan link yang ingin kalian pasang

  6. Semoga bermanfaat buat keindahan blog kalian.. Makasih ^^
Referensi : http://bloggerbin.com/css3-fancy-lavalamp-menu-for-bloggers/

Artikel Terkait

27 komentar:

Mire Tahu Tempe mengatakan...

keren sob menu navigasinya :)

Deo Pradipta mengatakan...

hehe.. kerenan yg nulis kok B|

Anonim mengatakan...

bos, gimana cara menampilkan menu pada blog ? maklum masih sangat newbi

Deo Pradipta mengatakan...

kalo template dapet download biasanya langsung di layout klik edit pada 'menu' ..

kadang ada juga yg lewat edit HTML, klik F3 ketik '#' lalu ganti pagar dengan link anda.. sesuaikan dgan nama menunya yaa , jgan sampe salah pasang ^_^


*gunakan tanda petik juga

adjeng aprinna mengatakan...

Ini yang aku cari-cari ....
makasih infonya ..

Adjeng Aprinna mengatakan...

kalau cara bikin kayak kakak itu gimana?

home|Topik|daftar isi|

Deo Pradipta mengatakan...

ehehehe.. makasih juga yaa sob :)

silahkan cek sendiri di view page source ^_^

Hairul Chairul mengatakan...

kk Bisa Minto Tolong Gak.?

Hairul Chairul mengatakan...

kk Gimana yah caranya buat menu lalu kalau menu itu terdiri dari menu lagi??

Deo Pradipta mengatakan...

cek di blog sebelah http://allfreetips4u.blogspot.com/2009/12/membuat-menu-navigasi-dengan-sub-menu.html _^

kedai mubile mengatakan...

gan bisa ajarin cara ngisi menu2 blog ?
sperti menu about me, kontak, servis dl.
ane bingung cara masukan Descriptions ?

Deo Pradipta mengatakan...

kalo itu caranya cek di template -> edit html , trus F3 ketik '#' , ganti tanda # jadi link ... misal 'http://dopind.blogspot.com' ^_^

descriptons ? di Settings terus Basic :)

kedai mubile mengatakan...

ane paham gan klo cara elo pertama di atas wal hasil akan seperti ini kan jadi nya ( ane lampirin HTML/JavaScript dalam bentuk gambar gan biar jelas).

{IMAGE}http://s15.postimage.org/4rz2hyrnv/capture_20120925_003328.jpg{IMAGE}

nah pertanya ane gan, di ane kudu masukin di descriptons nya ?

contoh nih gan misal ane mau jelasin tentang "Kontak" produk ane ?

gitu gan makasud ane!!
mohon bimbinganya gan yg baik hati
terima kasih.

Deo Pradipta mengatakan...

jelasin tentang kontak ? gapaham ane sob.. kalo ngerubah link seperti diatas tadi..

kalo di tambah keterangan gitu tambahin aja setelah
a href=...' title='keterangan loe'>

kedai mubile mengatakan...

ya maksud ane sprti kata2 penjelasan elo diatas,
a href=(#)diganti link blogs>title "about me"<tambah keterangan ,,
tapi gitu ane masukin keterangannya, pada berantakan semua keluar tulisannya gan, gak kyak di blogs elu, klo klik baru kebaca keterangannya.

Deo Pradipta mengatakan...

sumpah ane gapaham kata2 ente ._.
bisa lebih dijelasi lagi sob ? bingung bacanya ane..

kedai mubile mengatakan...

oke bro, pertama template -> edit html , trus F3 ketik '#' , setalah tu akan muncul,a href=..."title ", maksud ane gan, pengen masukin keterangan nya !
misal nich, pada klo clum kontak maka, mau ane masukin keterangan kontak ane gan,,,
seperti punya elu diatas, pada bagian About Me, ente jelasin mulai dari NISN, Nama Lengkap, Nama Panggilan sampe segudang Prestasi elo.
gue juga pengen masukin sperti itu gan pada clum yg ane tentukan nanti nya,,
klo ga paham2 juga nyerah dech ane gan !!

Deo Pradipta mengatakan...

oalah paham2 sob, maaf sebelumnya ane ga liat positngan ane sendiri.. ternyata yg diganti itu yang bertuliskan YOUR-LINK-HERE diganti dg link posting/pages sobat , mohon maaf bgt yaa :)

kedai mubile mengatakan...

ow jd cuma ganti links doank,
terus gimana munculin keterangannya sob,
nah pada bagian ini2 ane kagak paham2 nich,,
utak atik seharian belum nemuin caranya sob,

Deo Pradipta mengatakan...

iya cuma diganti aja link nya sob :)
munculinnya ? kan tadi di pasang di postingan sob, linknya di pasang di menu itu ^_^

kedai mubile mengatakan...

oke2 paham gan,,
bisa kasih tips ga supaya postingnya rapi,,
seperti yg elo buat about me blogs elo gan..

Deo Pradipta mengatakan...

kalau aku sendiri sih di kira2.. kalau seumpamanya gak lurus gitu ya di 'space' sampe pas, manual aja kok :D

Julian Triono mengatakan...

kereeenn, dari tadi yang gk bisaa, langsung bisaa (y) thanks brotha

Deo Pradipta mengatakan...

waaa.. ini diaa akhirnyaaa.. makasih juga sob :D

Adhy Pratama mengatakan...

mantab,, btw blog mu canggih sahabat,,

Yudi puspayoga mengatakan...

thanks gan

Bambang Ardie mengatakan...

gaada cara lebih gampang gan, ane pernah nyoba beginian sekali gagal trus malah nongol bacaan banyak banget.. kalo bisa mah kasih screenshotnya gitu maklum ane masih pemula

Poskan Komentar

Askorus Distro Askorus Distro
Copyright 2010 - 2012 ^ Akatsuki Blog™ - Compatible with Chrome 1024 x 768 -