Change Image Just with Scroll

Hi, friends! Now, I will post about a trick. That's Change Image Just with Scroll. The effect is when you put  your cursor on the picture and scroll the mousewheel, the picture will be change. Let's see the DEMO. Now if you want to try this trick, just follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Page Elements --> Add gadget
3. Choose "HTML/Java Script"

<img id="slideshow" src="PICTURE-1" />

<script type="text/javascript">
var myimages=[
"PICTURE-1",
"PICTURE-2",
"PICTURE-3",
"PICTURE-4",
"PICTURE-5"
]
var slideshow=document.getElementById("slideshow")
var nextslideindex=0
function rotateimage(e){
var evt=window.event || e
var delta=evt.detail? evt.detail*(-120) : evt.wheelDelta
nextslideindex=(delta<=-120)? nextslideindex+1 : nextslideindex-1
nextslideindex=(nextslideindex<0)? myimages.length-1 : (nextslideindex>myimages.length-1)? 0 : nextslideindex
slideshow.src=myimages[nextslideindex]
if (evt.preventDefault)
evt.preventDefault()
else
return false
}
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel"

if (slideshow.attachEvent)
slideshow.attachEvent("on"+mousewheelevt, rotateimage)
else if (slideshow.addEventListener)
slideshow.addEventListener(mousewheelevt, rotateimage, false)
</script>

=> You can replace the images that will be change
=> The image of PICTURE-1 must be same with PICTURE-1
4. Click SAVE

Read More

Animated Label with jQuery

Did you know, jQuery Link Nudging? Now we will add jQuery Link Nudging in Label. What is the effect? So, when you put your cursor on one of the label, the label will be move to the right. The  You can try in this page (Try on "Labels"). Looks nice right? Now, if you wanna try Animated Label with jQuery, just follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Copy the code below, and paste above </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
var dur = 450;
$(document).ready(function() {
$('a.linknudge, .Label ul li a').hover(function() {
$(this).animate({
paddingLeft: '20px'
}, dur);
}, function() {
$(this).animate({
paddingLeft: 0
}, dur);
});
});</script>

4. Click 

Read More

Add Floating Spoiler Menu

Hi, guys! Now, we will try to add floating spoiler menu. This spoiler menu is difference with others. We don't need to click the button to display the menu. Just put your cursor on this menu, and the menu wil be slide out. Want to see the DEMO? Now, if you wanna add floating spoiler menu into your blog, just follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Page Elements --> Add Gadget
3. Chose "HTML/Java Script"
4. Add the code below

<style text-type="CSS">
#bmenu{
position:fixed;
right:5px;
center:0px;
background-color:#000;
border-radius:10px;
-moz-border-radius:10px;
border:1px solid #FFF;
width:202px;
height:20px;
color:#FF0606;
transition:all .5s ease-in;-moz-transition:all .5s ease-in;-webkit-transition:all .5s ease-in;-o-transition:all .5s ease-in;z-index:3;overflow:hidden;padding:9px 15px 10px;}


#bmenu h3{
margin:0;
padding:0;
text-align:center;
cursor:pointer;}


#bmenu ul{
border-radius:10px;-moz-border-radius:10px;
border:2px solid #FFf;
background-color:#FF0606;
margin:15px 0;
padding:0 15px;}


#bmenu li{list-style:none;margin:0 0 5px;padding:0;} #bmenu li a{
color:#000;
text-decoration:none;
font-size:14px;}


#bmenu li a:hover{
color:#fff;}


#bmenu:hover{
z-index:5;
height:175px;
</style>


<div id="bmenu">
<h3>
TITLE</h3>
<ul>
<li><a href="#">FBT-1</a></li>
<li><a href="#">FBT-2</a></li>
<li><a href="#">FBT-3</a></li>
<li><a href="#">FBT-4</a></li>
<li><a href="#">FBT-5</a></li>
</ul>
</div>

Customize:
=> The position of floating spoiler menu
=> The title of this menu
=> The title and link location

5. Click SAVE

Read More