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

Naufal Maulana Ramadhan 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 ^_^

Anonim mengatakan...

kk Bisa Minto Tolong Gak.?

Anonim 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 _^

Unknown 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 :)

Unknown 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'>

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

Unknown 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 :)

Unknown 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 ^_^

Unknown 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

Juliantriono.blogspot.com mengatakan...

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

Deo Pradipta mengatakan...

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

Adhyra Irianto mengatakan...

mantab,, btw blog mu canggih sahabat,,

Unknown mengatakan...

thanks gan

Unknown 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

Posting Komentar

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