This is a cool trick. Using some jQuery code, you can tweak the look of the images in your blog or website. When you hover the mouse button over an image, the image fades out. This is simply a visual enhancement to your blog. To try this, follow these steps:
Step 1: Log in to your Blogger Dashboard and go to Templates>Edit HTML.
Step 2: Scroll down to where you see <head> or alternatively press Ctrl+f and enter <head> to the search box appeared.
Step 3: Copy below code and paste it just before the </head> tag .
<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 4: Save your Template. You are done. To check whether it is working or not, Open any post with images of your blog and see it yourself. Enjoy blogging!! :)
0 comments:
Post a Comment