Blogger integration
Show big images on your blog with our choice of 5 different image zoom effects.
Reveal every detail in your images by hovering or clicking your images on mouseover with these popular JavaScript zoom effects.
Instructions
Choose which tool you wish to use:
Magic Zoom™
- Download Magic Zoom™ (demo version).
- Unzip the file on your computer and FTP magiczoom.css and magiczoom.js files to your website server. There is no facility to upload JS files to Blogger, so you must upload the 2 files to a server and reference them in your template <head> code. (If you do not have access to a server, internet search "free web space". There are lots of free hosting options available. You can even use Dropbox.)
- Also, FTP graphics folder to your website server. Images in this folder will automatically be displayed as part of the zoom tool.
- Go to your Blogger Admin Area > Template > Edit HTML (screenshot). Add the following code just below the <head> tag:
<link type="text/css" rel="stylesheet" href="http://www.example.com/magiczoom.css"/>
<script type="text/javascript" src="http://www.example.com/magiczoom.js"></script> - In the code above, replace the example.com URLs with the URLs of the location where you uploaded your JS and CSS files.
- Now you can use Magic Zoom™ on your images. Go to your Blogger Admin Area > New Post > HTML view > reference your small image and link it to your large image (screenshot). For example:
<a class="MagicZoom" href="http://www.example.com/largeimage.jpg"><img src="http://www.example.com/smallimage.jpg"/></a>
- To upgrade your version of Magic Zoom™ (which removes the "Please upgrade" text), buy Magic Zoom™ and overwrite the old http://www.example.com/magiczoom.js file on your server with the new file in your licensed version.
Magic Zoom Plus™
- Download Magic Zoom Plus™ (demo version).
- Unzip the file on your computer and FTP magiczoomplus.css and magiczoomplus.js files to your website server. There is no facility to upload JS files to Blogger, so you must upload the 2 files to a server and reference them in your template <head> code. (If you do not have access to a server, internet search "free web space". There are lots of free hosting options available. You can even use Dropbox.)
- Also, FTP graphics folder to your website server. Images in this folder will automatically be displayed as part of the zoom tool.
- Go to your Blogger Admin Area > Template > Edit HTML (screenshot). Add the following code just below the <head> tag:
<link type="text/css" rel="stylesheet" href="http://www.example.com/magiczoomplus.css"/>
<script type="text/javascript" src="http://www.example.com/magiczoomplus.js"></script> - In the code above, replace the example.com URLs with the URLs of the location where you uploaded your JS and CSS files.
- Now you can use Magic Zoom Plus™ on your images. Go to your Blogger Admin Area > New Post > HTML view > reference your small image and link it to your large image (screenshot). For example:
<a class="MagicZoomPlus" href="http://www.example.com/largeimage.jpg"><img src="http://www.example.com/smallimage.jpg"/></a>
- To upgrade your version of Magic Zoom Plus™ (which removes the "Please upgrade" text), buy Magic Zoom Plus™ and overwrite the old http://www.example.com/magiczoomplus.js file on your server with the new file in your licensed version.
Magic Thumb™
- Download Magic Thumb™ (demo version).
- Unzip the file on your computer and FTP magicthumb.css and magicthumb.js files to your website server. There is no facility to upload JS files to Blogger, so you must upload the 2 files to a server and reference them in your template <head> code. (If you do not have access to a server, internet search "free web space". There are lots of free hosting options available. You can even use Dropbox.)
- Also, FTP graphics folder to your website server. Images in this folder will automatically be displayed as part of the zoom tool.
- Go to your Blogger Admin Area > Template > Edit HTML (screenshot). Add the following code just below the <head> tag:
<link type="text/css" rel="stylesheet" href="http://www.example.com/magicthumb.css"/>
<script type="text/javascript" src="http://www.example.com/magicthumb.js"></script> - In the code above, replace the example.com URLs with the URLs of the location where you uploaded your JS and CSS files.
- Now you can use Magic Thumb™ on your images. Go to your Blogger Admin Area > New Post > HTML view > reference your small image and link it to your large image (screenshot). For example:
<a class="MagicThumb" href="http://www.example.com/largeimage.jpg"><img src="http://www.example.com/smallimage.jpg"/></a>
- To upgrade your version of Magic Thumb™ (which removes the "Please upgrade" text), buy Magic Thumb™ and overwrite the old http://www.example.com/magicthumb.js file on your server with the new file in your licensed version.
Magic Magnify Plus™
- Download Magic Magnify Plus™ (demo version).
- Unzip the file on your computer and FTP magicmagnifyplus.css, magicmagnifyplus.swf and magicmagnifyplus.js files to your website server. There is no facility to upload JS files to Blogger, so you must upload the 3 files to a server and reference them in your template <head> code. (If you do not have access to a server, internet search "free web space". There are lots of free hosting options available. You can even use Dropbox.)
- Also, FTP graphics folder to your website server. Images in this folder will automatically be displayed as part of the zoom tool.
- Go to your Blogger Admin Area > Template > Edit HTML (screenshot). Add the following code just below the <head> tag:
<link type="text/css" rel="stylesheet" href="http://www.example.com/magicmagnifyplus.css"/>
<script type="text/javascript" src="http://www.example.com/magicmagnifyplus.js"></script> - In the code above, replace the example.com URLs with the URLs of the location where you uploaded your SWF, JS and CSS files.
- Now you can use Magic Magnify Plus™ on your images. Go to your Blogger Admin Area > New Post > HTML view > reference your small image and link it to your large image (screenshot). For example:
<a class="MagicMagnifyPlus" href="http://www.example.com/largeimage.jpg"><img src="http://www.example.com/smallimage.jpg"/></a>
- To upgrade your version of Magic Magnify Plus™ (which removes the "Please upgrade" text), buy Magic Magnify Plus™ and overwrite the old http://www.example.com/magicmagnifyplus.js file on your server with the new file in your licensed version.
Magic Magnify™
- Download Magic Magnify™ (demo version).
- Unzip the file on your computer and FTP magicmagnify.swf, magicmagnify.js and loader.gif files to your website server. There is no facility to upload JS files to Blogger, so you must upload the 3 files to a server and reference them in your template <head> code. (If you do not have access to a server, internet search "free web space". There are lots of free hosting options available. You can even use Dropbox.)
- Go to your Blogger Admin Area > Template > Edit HTML (screenshot). Add the following code just below the <head> tag:
<script type="text/javascript" src="http://www.example.com/magicmagnify.js"></script>
- In the code above, replace the example.com URL with the URL of the location where you uploaded your JS and SWF files.
- Now you can use Magic Magnify™ on your images. Go to your Blogger Admin Area > New Post > HTML view > reference your small image and link it to your large image (screenshot). For example:
<a class="MagicMagnify" href="http://www.example.com/largeimage.jpg"><img src="http://www.example.com/smallimage.jpg"/></a>
- To upgrade your version of Magic Magnify™ (which removes the "Please upgrade" text), buy Magic Magnify™ and overwrite the old http://www.example.com/magicmagnify.js file on your server with the new file in your licensed version.
About
These instructions explain how to add powerful image zoom tools to your Blogger website.
Payment
Pay by credit card or bank transfer, then download your product.
100% Support
30 minutes free technical support.
Guarantee
30 day money-back guarantee.