This
quick tutorial explains how to add jQuery image hover fade effect to blogger
blog or website. This is very easy and you can do this less than a minute. But
this effect will add
some attractive appearance to your blog or web site. You
can look at the screenshot here
and follow the steps below to do this.
How to Add JQuery Fade
Effect to Images in Blogger Blog?
STEP #2: Go to Dashboard>Template
STEP #3: Click on Edit HTML>Proceed
STEP #4: Tick on Expanded Template Widget check box
STEP #5: Take a Backup your template
STEP #6: Find (Ctrl + f) for the code
below
</head>
STEP #7: Just above that paste the
following code.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'
type='text/javascript'/>
<script
type='text/javascript'>
$(document).ready(function(){
$(".post
img").fadeTo("slow",
1.0); // This
sets the opacity of the thumbs to fade down to 30% when the page loads
$(".post
img").hover(function(){
$(this).fadeTo("slow", 0.5); // This should set the
opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 1.0); // This should set the
opacity back to 30% on mouseout
});
});
</script>
<script
type='text/javascript'>
$(document).ready(function(){
$(".latest_img").fadeTo("slow",
1.0); // This sets the opacity of the thumbs to fade down to 30% when the page
loads
$(".latest_img").hover(function(){
$(this).fadeTo("slow",
0.5); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow",
1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>
STEP #8: Now click on Save and it’s done.
So execute steps correctly and you are done. Head
to your blog and check the trick executed. So don't forget us. We will only
survive with your generosity. Like, Share, Follow and Subscribe. If you are
facing any problem with implementing these codes just comment below for help.
Stay tuned for more posts.
{ 0 comments... read them below or add one }
Post a Comment