Friday, July 22, 2011

6 Warna Menu Blogger Bergaya Lavalamp

memasukkan menu bloggerPada kesempatan kali ini , saya akan kembali menuliskan tentang blogger tutorial yaitu menu blogger bergaya lavalamp . Menu lavalamp ini menurut saya sangat keren karena desain dari menu tersebut sangat menarik dengan disertai gelembung . Di menu lavalamp kali ini saya mempunyai 6 warna yang bisa anda coba .


Nah untuk yang berminat  , ikuti langkah berikut ini untuk memasukkan menu lavalamp kedalam blogger anda.

Memasukkan Menu Lavalam Di blogger anda.
1. Pergi Ke akun blogger anda lalu pilih design > edit html > centang expand

menu blogger seo google panda untuk blogger

Note : untuk menghindari hal yang tidak di inginkan anda bisa bacjup terlebih dahulu template anda dengan mengklik download full template.

2. Setelah itu cari kode ]]></b:skin> lalu letakkan kode berikut ini sebelum kode ]]></b:skin> tadi.

/*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;
}
/*End Lavalamp Css Info @ http://vianjb.blogspot.com */


3. Setelah itu cari lagi kode </head> lalu letakkan kode dibawah ini tepat sebelum kode </head>



<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
<script src='http://vianjb.googlecode.com/files/lv.js'type='text/javascript'/>

4. Setelah itu save template anda

Pekerjaan anda belum sampai disini saja , kini anda harus kembali ke bagian design lalu pada design blog anda , anda bisa memilih page element cross yang berada tepat dibawah bagian header . Anda bisa lihat contoh gambar kolom kross dibawah ini.

cara memasukkan kode css di kolom cross


Diatas adalah letak kolom cross berada. Pada kolom cross anda pilih add gadget > html javascript , lalu masukkan kode berikut ini di dalam kotak html/javascript.


<div class="lavalamp " >
<ul>
<li class="active"><a href="/">Home</a></li>
<li><a href="Link-Disini">About</a></li>
<li><a href="Link-Disini">Blog</a></li>
<li><a href="Link-Disini">Services</a></li>
<li><a href="Link-Disini">Portfolio</a></li>
<li><a href="Link-Disni">Contacts</a></li>
<li><a href="Link-Disini">Back to Article</a></li>
<li><a href="Link-Disini">How it Works?</a></li>
</ul>
<div class="floatr"></div>
</div>

Pada kode yang saya tandai berwarna merah dan hijau anda bisa sesuaikan sendiri , untuk kode yang saya tanda berwarna kuning anda bisa ganti kode itu dengan kode warna dari lavalamp dibawah ini


<div class="lavalamp magenta" >
<div class="lavalamp cyan" >
<div class="lavalamp yellow" >
<div class="lavalamp orange" >
<div class="lavalamp dark" >

Mungkin untuk artikel kali ini cukup sekian saya tulis , mohon maaf jika ada kekurangannya. terima kasih.

2 comments:


Silakan kirimkan komentar anda entah itu kritik atau saran anda dan mohon maaf jika komentar anda tidak mendapatkan tanggapan karena saya tidak selalu online 24 jam