Creating a Blur Effect All Photo In Blog With JQuery Effects

Creating a Blur Effect All Photo In Blog With J Query Effects

Creating a Blur Effect All Photo In Blog With JQuery Effects - In this post I will give you tricks blog blog how to create the effect of all the photos on the blog with JQuery effects, when you place your cursor over the picture. Then the blur effect that by itself appears. This time make the image blur can apply in your blog.

 Step 1
In your dashboard click 'Layout' > 'Edit Html'

Step 2
Find a piece of code </head> following in the Html
(Click Ctrl and F to the search bar to help find the code)

Step 3
Copy and paste the following code Directly Before / Above </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/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>

With the code in place you can now save your template and check out the cool new image effect on your blog.