We all add images and photos in our blogs. And as we all say A picture is worth a thousand words.

Caution : This hack not working perfectly with blogger. so please wait until we find the best solution for this hack.

I Published Fixed Tutorial Here

blogspot by default enables us to add and display images in our posts, But what if we want to make our blogs photos looks more professional and stylish ?
The answer is to use this new amazing widget.
Please see this demo and click on the images to see how it is working.
It’s very easy to integrate this hack to your blog in only 1 step.

Caution : Please backup your template (Download Full Template) Before making any changes.

Go to you blogger account, and then navigate to Layout >> Edit Html
And Find the next Code.

</head>

And exactly before it add the following code.

<link  href='http://dl.getdropbox.com/u/1704149/js-depo/jquery.fancybox-1.2.1/js/jquery.fancybox.css'  media='screen' rel='stylesheet' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script  src='http://dl.getdropbox.com/u/1704149/js-depo/jquery.fancybox-1.2.1/js/jquery.easing.1.3.js'  type='text/javascript'/>
<script  src='http://dl.getdropbox.com/u/1704149/js-depo/jquery.fancybox-1.2.1/js/jquery.fancybox-1.2.1.pack.js'  type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&quot;a&quot;).fancybox();
});
</script>

Now Please Click Save Template .
And the widget will work now automatically with all your blog images.
Once you or your blog visitors click on any image on your blog the image will be displayed in a nice and elegant frame.

If you want to go for better customization with this blogger hack then you can display you images in groups Display next And previous Buttons, or you can make your links opens in a new frame without leaving your blog.

After adding an image to your blog post and before publishing it. change the editing more from Compose to Edit Html And now find the image code, it must be like the following code.

<a href="The Image URL"><img style="margin: 0px auto 10px; width: 178px; height: 133px;" src="The Image URL"/></a>

now we have to add rel Tag which put all images with the same rel tage in one group.
For example. if you have 6 images in your post, and added the tag rel=”groub1″ for 3 of your images, and the tag rel=”groub2″ for the another 3 of images. once you click on an image, it’ll be displayed in a frame with next and previous buttons, this buttons will take you to the other 2 images with the same rel tag.
Where to add the rel tag ?
This is the image code before adding the rel tag

<a href="The Image URL"><img style="margin: 0px auto 10px; width: 178px; height: 133px;" src="The Image URL"/></a>

And the next one is after adding the tag.

<a rel="group1" href="The Image URL"><img style="margin: 0px auto 10px; width: 178px; height: 133px;" src="The Image URL"/></a>

To add a title we have to add a tag for the image code. so we’ll have to locate the image code, see the previous step to know how to locate it
And now add the following tag. title=”Image Title”
And the code should be like this

<a rel="group1" title="Image Title" href="The Image URL"><img style="margin: 0px auto 10px; width: 178px; height: 133px;" src="The Image URL"/></a>

While typing a post you may add a link, and if you switched the typing more from Compose to Edit Html you’ll see the links look like this

<a href="http://www.allblogtools.com/">Blogger Templates </a> 

and we should add the following tags to it.
title=”Link Title ” class=”iframe”
so it will be

<a href="http://www.allblogtools.com/" title="Link Title " class="iframe">Blogger Templates</a>

thats it.

Click here to see demo. thanks for bloggergallery.com