jQuery Image Menu
Demo di sini
Pada demo blog,gerakkan mouse ke gambar seperti disnapshot iini
Cara Pemasangan
Langkah 1: 'Log in' ke dalam 'Blogger dashboard' anda --> pergi ke 'Template' --> 'Edit HTML', dan gunakan Ctrl+F untuk mencari kod ]]></b:skin>
Langkah 2:Di atas kod ]]></b:skin> yang telah ditemui tersebut,'copy'
dan 'paste'
kod dibawah ini
Langkah 3:Sekali lagi gunakan Ctrl+F untuk memudahkan pencarian kod.Kod yang perlu dicari seterusnya ialah kod:</head>
Langkah 4:Di atas/sebelum kod </head> yang telah ditemui tersebut,'copy' dan 'paste' kod dibawah ini
Langkah 5:Klik 'Save Template'
Langkah 6:Sekarang pergi ke 'Layout' dan klik 'Add HTML/JavaScript' dengan meletakkan kod dibawah didalamnya:
Pada demo blog,gerakkan mouse ke gambar seperti disnapshot iini
Cara Pemasangan
Langkah 1: 'Log in' ke dalam 'Blogger dashboard' anda --> pergi ke 'Template' --> 'Edit HTML', dan gunakan Ctrl+F untuk mencari kod ]]></b:skin>
Langkah 2:Di atas kod ]]></b:skin> yang telah ditemui tersebut,'copy'
dan 'paste'
kod dibawah ini.jimgMenu {
position: relative;
width: 670px;
height: 200px;
overflow: hidden;
margin: 25px 0px 0px;
}
.jimgMenu ul {
list-style: none;
margin: 0px;
display: block;
height: 200px;
width: 1340px;
}
.jimgMenu ul li {
float: left;
}
.jimgMenu ul li a {
text-indent: -1000px;
background:#FFFFFF none repeat scroll 0%;
border-right: 2px solid #fff;
cursor:pointer;
display:block;
overflow:hidden;javascript:;
width:78px;
height: 200px;
}
.jimgMenu ul li.landscapes a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyDQjF0stnbTQO-YkmvG7VyaZyJdmde70WETymYuUGQHc4BmOKQmdj_WVFp5gxhoK9Cx6_TUGIki3jDYjF9KS5u7UcTp7Hu8skbhHWwgaqKs_sjJl8qhOFPzzRHVR17Wp3ttWWWTqnZew/s1600/Gaara.png) no-repeat scroll 0%;
}
.jimgMenu ul li.people a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirKeh53T1imezHwq2LVm0odqyLZXvergmpc_ePJhoKwk1Fx_nROwe5WNxexs1NenRleexbB3HRhL0pdpJ-yGu8dZiU-zbA8mL1YIlH3tTeaFHqvM_Vmt4zSbvdGbOlp_moZ6I7s2nQdHc/s1600/Sasuke.png) no-repeat scroll 0%;
}
.jimgMenu ul li.nature a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpfjKduLW-7yXEQQxVh1NDfXAy3db350Wm5yjKH44OzYCjJ8oB_PA3lr3mx6KZzyOtE5aW5CjyZl_wpl92xyPlfG5B275jvfVAabDc9B4Bm2BoCTp6dIFpSg0guUyWwKmR1rO07P5TVJc/s1600/naruto.png) no-repeat scroll 0%;
}
.jimgMenu ul li.abstract a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN6xwTlsNPCcvl99exF1OG30uoX8fQcAHpVQ1lH7V6qRac-ABcWnZDD9gkCZLmQmcvo-xgNmWGnhiy-jrmvNWyLT2EPe2QJv-HHzA8iVmXHdlhYAr04H3x0Cnpko339R2o715ysQAG2DM/s1600/Kakashi.png) no-repeat scroll 0%;
}
.jimgMenu ul li.urban a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghkcpyOG1ofZ6g0HgfpJ32Zn4Odc6LlBpjLLSqsydPmfsHdX7ni71pgfCH23ZDDeQu8RJvblq7IgnJvBuV9wEaW0z7VS9wqBBXdW7hJrUBmQxWp6d3OgRvHUrUrAkBN3puD-jfPq6PG8w/s1600/Shikamaru.png) no-repeat scroll 0%;
min-width:310px;
}
.clear {
clear: both;}
position: relative;
width: 670px;
height: 200px;
overflow: hidden;
margin: 25px 0px 0px;
}
.jimgMenu ul {
list-style: none;
margin: 0px;
display: block;
height: 200px;
width: 1340px;
}
.jimgMenu ul li {
float: left;
}
.jimgMenu ul li a {
text-indent: -1000px;
background:#FFFFFF none repeat scroll 0%;
border-right: 2px solid #fff;
cursor:pointer;
display:block;
overflow:hidden;javascript:;
width:78px;
height: 200px;
}
.jimgMenu ul li.landscapes a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyDQjF0stnbTQO-YkmvG7VyaZyJdmde70WETymYuUGQHc4BmOKQmdj_WVFp5gxhoK9Cx6_TUGIki3jDYjF9KS5u7UcTp7Hu8skbhHWwgaqKs_sjJl8qhOFPzzRHVR17Wp3ttWWWTqnZew/s1600/Gaara.png) no-repeat scroll 0%;
}
.jimgMenu ul li.people a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirKeh53T1imezHwq2LVm0odqyLZXvergmpc_ePJhoKwk1Fx_nROwe5WNxexs1NenRleexbB3HRhL0pdpJ-yGu8dZiU-zbA8mL1YIlH3tTeaFHqvM_Vmt4zSbvdGbOlp_moZ6I7s2nQdHc/s1600/Sasuke.png) no-repeat scroll 0%;
}
.jimgMenu ul li.nature a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpfjKduLW-7yXEQQxVh1NDfXAy3db350Wm5yjKH44OzYCjJ8oB_PA3lr3mx6KZzyOtE5aW5CjyZl_wpl92xyPlfG5B275jvfVAabDc9B4Bm2BoCTp6dIFpSg0guUyWwKmR1rO07P5TVJc/s1600/naruto.png) no-repeat scroll 0%;
}
.jimgMenu ul li.abstract a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN6xwTlsNPCcvl99exF1OG30uoX8fQcAHpVQ1lH7V6qRac-ABcWnZDD9gkCZLmQmcvo-xgNmWGnhiy-jrmvNWyLT2EPe2QJv-HHzA8iVmXHdlhYAr04H3x0Cnpko339R2o715ysQAG2DM/s1600/Kakashi.png) no-repeat scroll 0%;
}
.jimgMenu ul li.urban a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghkcpyOG1ofZ6g0HgfpJ32Zn4Odc6LlBpjLLSqsydPmfsHdX7ni71pgfCH23ZDDeQu8RJvblq7IgnJvBuV9wEaW0z7VS9wqBBXdW7hJrUBmQxWp6d3OgRvHUrUrAkBN3puD-jfPq6PG8w/s1600/Shikamaru.png) no-repeat scroll 0%;
min-width:310px;
}
.clear {
clear: both;}
Langkah 3:Sekali lagi gunakan Ctrl+F untuk memudahkan pencarian kod.Kod yang perlu dicari seterusnya ialah kod:</head>
Langkah 4:Di atas/sebelum kod </head> yang telah ditemui tersebut,'copy'
dan 'paste' kod dibawah ini<script src='http://bloggertrixcode.googlecode.com/files/jquery.js' type='text/javascript'/>
<script src='http://bloggertrixcode.googlecode.com/files/jquery-easing-1.3.pack.js' type='text/javascript'/>
<script src='http://bloggertrixcode.googlecode.com/files/jquery-easing-compatibility.1.2.pack.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function () {
// find the elements to be eased and hook the hover event
$('div.jimgMenu ul li a').hover(function() {
// if the element is currently being animated (to a easeOut)...
if ($(this).is(':animated')) {
$(this).stop().animate({width: "310px"}, {duration: 450, easing:"easeOutQuad"});
} else {
// ease in quickly
$(this).stop().animate({width: "310px"}, {duration: 400, easing:"easeOutQuad"});
}
}, function () {
// on hovering out, ease the element out
if ($(this).is(':animated')) {
$(this).stop().animate({width: "78px"}, {duration: 400, easing:"easeInOutQuad"})
} else {
// ease out slowly
$(this).stop('animated:').animate({width: "78px"}, {duration: 450, easing:"easeInOutQuad"});
}
});
});
</script>
<script src='http://bloggertrixcode.googlecode.com/files/jquery-easing-1.3.pack.js' type='text/javascript'/>
<script src='http://bloggertrixcode.googlecode.com/files/jquery-easing-compatibility.1.2.pack.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function () {
// find the elements to be eased and hook the hover event
$('div.jimgMenu ul li a').hover(function() {
// if the element is currently being animated (to a easeOut)...
if ($(this).is(':animated')) {
$(this).stop().animate({width: "310px"}, {duration: 450, easing:"easeOutQuad"});
} else {
// ease in quickly
$(this).stop().animate({width: "310px"}, {duration: 400, easing:"easeOutQuad"});
}
}, function () {
// on hovering out, ease the element out
if ($(this).is(':animated')) {
$(this).stop().animate({width: "78px"}, {duration: 400, easing:"easeInOutQuad"})
} else {
// ease out slowly
$(this).stop('animated:').animate({width: "78px"}, {duration: 450, easing:"easeInOutQuad"});
}
});
});
</script>
Langkah 5:Klik 'Save Template'
Langkah 6:Sekarang pergi ke 'Layout' dan klik 'Add HTML/JavaScript' dengan meletakkan kod dibawah didalamnya:
<div class="jimgMenu">
<ul>
<li class="landscapes"><a href="#nogo">Landscapes</a></li>
<li class="people"><a href="#nogo">People</a></li>
<li class="nature"><a href="#nogo">Nature</a></li>
<li class="abstract"><a href="#nogo">Abstract</a>
</li>
<li class="urban"><a href="#nogo">Urban</a></li>
</ul>
</div>
<ul>
<li class="landscapes"><a href="#nogo">Landscapes</a></li>
<li class="people"><a href="#nogo">People</a></li>
<li class="nature"><a href="#nogo">Nature</a></li>
<li class="abstract"><a href="#nogo">Abstract</a>
</li>
<li class="urban"><a href="#nogo">Urban</a></li>
</ul>
</div>
Post a Comment:
Nota: Hanya ahli blog ini sahaja yang boleh mencatat ulasan.