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

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

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 !

Login Blogger.com
Klik Design > Edit HTML
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;
}
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'/>
Terakhir kita pasang kode nya di Design > Add Gadget > HTML/Javascript

<div class='lavalamp'>
<ul>

<li class='active'><a href='http://www.anonymouse545.blogspot.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://www.anonymouse545.blogspot.com/'>Design by AnonyMouse545</a>AnonyMouse545</span>

#Ganti YOUR-LINK-HERE dengan link yang ingin kalian pasang
Semoga bermanfaat buat keindahan blog kalian.. Makasih ^^