Lavalamp navigation menu
- Cara membuatnya :
- Login blogger
- Rancangan, Edit Html, Cari kode ]]></b:skin>
- 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/AVvXsEi4UOqtms31160g0XHu_iF4XsgbKO7G3kc-qOwhokUoU5n2tArwFCLybSqoE-aqfq-lAKCV0Y2xMkpZm-Vr3N5PN0VHiwsUfvLSidCzXUomFn9CPLGtW-emKlN5eJoYcqIt9U_wQlDRK_A/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/AVvXsEi4UOqtms31160g0XHu_iF4XsgbKO7G3kc-qOwhokUoU5n2tArwFCLybSqoE-aqfq-lAKCV0Y2xMkpZm-Vr3N5PN0VHiwsUfvLSidCzXUomFn9CPLGtW-emKlN5eJoYcqIt9U_wQlDRK_A/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;
}
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/AVvXsEi4UOqtms31160g0XHu_iF4XsgbKO7G3kc-qOwhokUoU5n2tArwFCLybSqoE-aqfq-lAKCV0Y2xMkpZm-Vr3N5PN0VHiwsUfvLSidCzXUomFn9CPLGtW-emKlN5eJoYcqIt9U_wQlDRK_A/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/AVvXsEi4UOqtms31160g0XHu_iF4XsgbKO7G3kc-qOwhokUoU5n2tArwFCLybSqoE-aqfq-lAKCV0Y2xMkpZm-Vr3N5PN0VHiwsUfvLSidCzXUomFn9CPLGtW-emKlN5eJoYcqIt9U_wQlDRK_A/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> :
<script src='http://kangdadang.googlecode.com/files/jquery.easing.min.js' type='text/javascript'/>
<script src='http://kangdadang.googlecode.com/files/jquery-1.1.3.1.min.js' type='text/javascript'/>
<script src='http://kangdadang.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>
<script src='http://kangdadang.googlecode.com/files/jquery-1.1.3.1.min.js' type='text/javascript'/>
<script src='http://kangdadang.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>
5. Cari kode berikut (ctrl+F untuk mempermudah pencarian) :
<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>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>
6. jika sudah ketemu simpan kode beikut dibawah kode yang dicari tadi :
sebenarnya ini sesuai template kawan karena pasti ada kemungkinan perbedaan template...
Show
0 Comments
prev
next