Follo Molo (Become My Stalker And Ask Me To Stalk Back....I prefer a Yandere...)

Bored?You can play around with these line of colours for a while.....it is 100times better than PS4...because I dont have one....

09 Februari 2014

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

.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;}

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
$(&#39;div.jimgMenu ul li a&#39;).hover(function() {

// if the element is currently being animated (to a easeOut)...
if ($(this).is(&#39;:animated&#39;)) {
$(this).stop().animate({width: &quot;310px&quot;}, {duration: 450, easing:&quot;easeOutQuad&quot;});
} else {
// ease in quickly
$(this).stop().animate({width: &quot;310px&quot;}, {duration: 400, easing:&quot;easeOutQuad&quot;});
}
}, function () {
// on hovering out, ease the element out
if ($(this).is(&#39;:animated&#39;)) {
$(this).stop().animate({width: &quot;78px&quot;}, {duration: 400, easing:&quot;easeInOutQuad&quot;})
} else {
// ease out slowly
$(this).stop(&#39;animated:&#39;).animate({width: &quot;78px&quot;}, {duration: 450, easing:&quot;easeInOutQuad&quot;});
}
});
});
</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>

Post a Comment:

Nota: Hanya ahli blog ini sahaja yang boleh mencatat ulasan.

At the post page,this banner can be spin around ;)