How To Add jQuery Image Zooming To Blogger

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see ]]> tag .

3.Copy below code and paste it just after the ]]> tag.

Important !!! : Download jquery.js and jquery.jqzoom.js as a zip file from here and host jquery.js and jquery.jqzoom.js yourself.

4.Now save your template.

5.Go to Layout-->Page Elements and click on "Add a gadget".

6.Select "html/java script" and add the code given below and click save.

LARGE-IMAGE-ADDRESS" src="SMALL-IMAGE-ADDRESS" class="jqzoom"/>

Look at the example below.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWzPthjX7tyuvb3pS1wVpUg2hOWmQVfxJC9ft4_jv-8Ccp4VXkw65FXYJpw6Pxwe8VbnJb-VWx1WXNNUYAjQPwp0AhyC-J1C5bnvJPnZwDfRQjpG5XCcWdcwD1CE85c0Z-owtwJ0SviZ8K/+Zoom+Image+big.jpeg" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX7gr5DzRSt8LItWYZprN1IyfZO9DJcqlqwz9YNyPQw_JzJfVwECxlMDpxe5BauhQkvej5eNEQI-bFJ6Q6UWZ6-bKyy_NG4Ugkr596TNariuc-qTqQtxSNJ8o9w3HxVKQSI7gLDv8cYz4O/+Zoom+Image+small.jpg" class="jqzoom"/>

You are done.

Demo