Cara membuatnya :
1. Login blogger
2. Rancangan, Edit Html, Cari kode ]]></b:skin> :
3. Dan Simpan kode berikut diatasnya
/* ---------------
lavaLamp With Image
---------------------------------- */
.lavaLampWithImage {
position: relative;
height: 29px;
width: 421px;
background:-moz-linear-gradient(left, #ff6900, #ff9700, #ff6900, #ff9700, #ff6900); no-repeat top;
-moz-border-radius:10px;
-khtml-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
padding: 15px;
margin: 10px 0;
overflow: hidden;
}
.lavaLampWithImage li {
float: left;
list-style: none;
}
.lavaLampWithImage li.back {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkN_wuvsY4ffBvt4BojAUSFujhbulVgXV6BHKrT9vVplBGZ7o2_iWiKGFevDcBHnQf6qcnzUcHLk2AJtOAJ0NV5dFB1lJUxWe-EtpmfD8IVJRNgiRyXDIO-9g0SETGrQjDQFQGL9RH7Dk/s1600/lava.gif") no-repeat right -30px;
width: 9px; height: 30px;
z-index: 8;
position: absolute;
}
.lavaLampWithImage li.back .left {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkN_wuvsY4ffBvt4BojAUSFujhbulVgXV6BHKrT9vVplBGZ7o2_iWiKGFevDcBHnQf6qcnzUcHLk2AJtOAJ0NV5dFB1lJUxWe-EtpmfD8IVJRNgiRyXDIO-9g0SETGrQjDQFQGL9RH7Dk/s1600/lava.gif") no-repeat top left;
height: 30px;
margin-right: 9px; /* 7px is the width of the rounded shape */
}
.lavaLampWithImage li a {
font: bold 14px arial;
text-decoration: none;
color: #fff;
outline: none;
text-align: center;
top: 7px;
text-transform: uppercase;
letter-spacing: 0;
z-index: 10;
display: block;
float: left;
height: 30px;
position: relative;
overflow: hidden;
margin: auto 10px;
}
.lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited {
border: none;
}
4. Simpan java script berikut tepat diatas kode </head>
kalau mau posisinya seperti punya saya di atas cari kode ini <div id='top-wrap'>
6. jika sudah ketemu simpan kode beikut dibawah kode yang dicari tadi :
5. Cari kode berikut (ctrl+F untuk mempermudah pencarian) :<script src='http://hanjs.googlecode.com/files/jquery.easing.min.js' type='text/javascript'/>
<script src='http://hanjs.googlecode.com/files/jquery-1.1.3.1.min.js' type='text/javascript'/>
<script src='http://hanjs.googlecode.com/files/jquery.lavalamp.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$("#1").lavaLamp({
fx: "backout",
speed: 700,
click: function(event, menuItem) {
return false;
}
});
});
</script>
ini kalau mau posisi nya di bawah header ..<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>
kalau mau posisinya seperti punya saya di atas cari kode ini <div id='top-wrap'>
6. jika sudah ketemu simpan kode beikut dibawah kode yang dicari tadi :
<ul class="lavaLampWithImage" id="1">
<li><a href="#">Home</a></li>
<li><a href="#">Plant a tree</a></li>
<li><a href="#">Travel</a></li>
<li><a href="#">Ride an elephant</a></li>
</ul>
Semoga Bermanfaat
Related Posts :
Membuat Recent Post Efek Slide Plus Thumbnails V2 With JqueryRecent post menunjukkan apakah post terbaru yang baru dihasilkan oleh seseorang blogger untuk blognya.Dan sebelumnya saya juga udah share t… Read More...
Membuat Author Threaded Comments Highlight Dengan Jquery View Demo Langsung : Assalamualaikum . Malam ini saya akan share Membuat Author Threaded Comments Highlight Dengan Jquery .Seperti a… Read More...
Membuat Efek Image Zoom Dengan JqueryScreen Shot :Mau Langsung View Demo Aslinya Cekidot : Assalamualaikum . Malam ini saya akan share Efek Image Zoom Dengan Jquery .Seper… Read More...
Membuat Rocking Rolling Rounded Menu dengan JQuery dan CSS3Membuat Menu Navigasi Rocking Rolling Rounded – Pertama kali melihat tampilan Rocking Rolling Rounded Menu dengan JQuery dan CSS3 ini lang… Read More...
Cara Membuat Tabber Tab Menu Dengan JQuerySaat ini tabber tab mulai banyak terkenal dalam dunia desain web. Banyak situs yang menggunakan tabber tab dan mengisinya dengan berbagai … Read More...
0 Response to "Membuat Menu LavaLamp Jquery Blogger"
Posting Komentar