Hi guys this another cool gadget for our blog, this gadjet work is cool,plus Size Image viewer automatically adds a caption beneath the images of your choice that when clicked on launches a "plus size" version of the image.the enlarged image can be a different image from the original, so the former is loaded only on demand when requested. FYI, this script is inspired by a similar image viewer seen on some pages. so if you want add this cool gadjet your blog ? please follow step by step below to do it.
How To Add Plus Size Image Viewer To Blogger

1.Log in to your dashboard--> Desing- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see </head> tag.

4.Now add below code before </head> tag.




<link rel="stylesheet" type="text/css" href="https://sites.google.com/site/bloggertricksandtoolz/plusimageviewer.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="https://sites.google.com/site/bloggertricksandtoolz/plusimageviewer.js">

/***********************************************
* Plus Size Image Viewer- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScriptKit at http://www.javascriptkit.com/ for full sourcecode
* Bloggerized by Sameera http://www.bloggertricksandtoolz.com/
***********************************************/

</script>




5. Save your template

6. Now please add below code your blog post or html javacript code box.


<img src="thumb.jpg" style="width:200px" data-plusimage="large.jpg" data-plussize="700,466" />




Note: Replace thumb.jpg, 200px your image-address and large.jpg, image-address.

Look at the example below:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO6tBPtUFcNfBHa3vc7ZZcIXLDfSjTLZZIQUXZitXxC6vRsewGkcHiTsnQL55J9NOHVLgjEguVe_wIy-GlNh3FmsBxslnbYjIy-YEZzeMvaQ8CwZV-9T8NnXDY9XU9h1zjZ08I60qSgmE/" style="width:200px" data-plusimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO6tBPtUFcNfBHa3vc7ZZcIXLDfSjTLZZIQUXZitXxC6vRsewGkcHiTsnQL55J9NOHVLgjEguVe_wIy-GlNh3FmsBxslnbYjIy-YEZzeMvaQ8CwZV-9T8NnXDY9XU9h1zjZ08I60qSgmE/" data-plussize="700,466" />
<br/ ><br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzJL4zHCYAdPU04va3ouzLVz2cxR6Gv95vg3ljV2xDgxMYe4oW79bwwsc8JsG7Hd_7uMkSzvXj6pqyAigHitbMs2HnmR1SPGRGUpMmHAiDuqpo1i4N5MW7bDorQmPKEeOG3kNdQ2YejVs/s912/namitha_1_1024.jpg" style="width:150px" data-plusimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzJL4zHCYAdPU04va3ouzLVz2cxR6Gv95vg3ljV2xDgxMYe4oW79bwwsc8JsG7Hd_7uMkSzvXj6pqyAigHitbMs2HnmR1SPGRGUpMmHAiDuqpo1i4N5MW7bDorQmPKEeOG3kNdQ2YejVs/s912/namitha_1_1024.jpg" data-plussize="600,450" />


7. Save your Html javascript you are done.