Zoom into your blog images with Blogger (tutorial)

Zoom into your blog images with Blogger (tutorial)

In today’s tutorial i’m going to show you
how to install Magic Zoom in Blogger. You can use this video to install Magic Zoom
Plus, Magic Zoom, Magic Thumb, Magic Magnify Plus and Magic Magnify as the process is the
same. For today’s tutorial I’ll be installing Magic
Zoom. The example you can see is using the multiple
images option. It’s just one of many ways to customize Magic
Zoom. We’ll look at different customizing options
later in the video. First download the demo version of Magic Zoom,
and go to the folder it’s downloaded to on your computer. The file you’ve just download is a zip file,
so you need to extract the files before you begin. Next, you need to upload two files to your
website server. If you don’t have access to a server, search
the internet for free web space, there’s lots of free hosting options available. Okay, now look for a folder called magiczoom-trial. Open this until you come to the magiczoom
folder Within the magiczoom folder you’ll see two files. A CSS file and a JavaScript file. You need to upload both files to your server. I’m using FileZilla to do this and you can
see both files upload pretty quickly. Next, we’re going to reference the CSS and
JavaScript files in the head code of your Blogger template. To do this select Template and Edit HTML. You’ll be placing your head code just below
the ‘head’ tag. The code you need is on the Magic Zoom Integration
page. Choose Number 1 Installation and copy the
head code as shown, then paste it under the ‘head’ tag in your template. The code you’ve just pasted includes the magiczoom
folder reference which you need to delete. I’ll change the CSS file reference first. Instead of showing the magiczoom folder, type
in the url reference where the CSS file is located on your server. I’ll just copy the location and paste it into
my JavaScript reference. Because you’ve referenced the CSS and JavaScript
files in the ‘head’ section of your template, you can now add Magic Zoom to any post on
your website. To get started I’ll create a new Post. I’ll just enter a name for my Post and call
it Magic Zoom example. For Magic Zoom to work you’ll need two images. A large image which will act as the zoom,
and a small image which will be shown on your web page. I’ve entered my large image reference in Notepad
just to make things a bit easier so I can copy it rather than type it out in full in
a minute. So if we go back to the Post, the first thing
we need to do is insert the small image, and then link the small image to the large image. This is where having your large image reference
already typed out comes in really handy. Enter the large image reference in the Web
address field like so, and then the last step we need to do is add a class of MagicZoom
to the HTML code. Always make sure ‘Interpret Typed HTML’ is
selected under the Compose Mode option when working in the HTML view. So, you can see in the HTML code we have the
large image reference showing as the link, and the small image reference showing as the
image source. Now all we need to do is add the Magic Zoom
class. Make sure MagicZoom is one word and that you
use a capital M and capital Z. Save your changes and then if you view your
Blog now you’ll see Magic Zoom is working. The small image appears on your Post as planned
and the large image shows in the zoom area. Now that Magic Zoom’s installed let’s make
some changes. I’ve highlighted the Hint text which by default
says Zoom, but you can have any text you want here. So I’ll show you how to change that. I’ll also show you how to increase the area
size of your zoom. Go back to your Post and make sure you’re
in the HTML view. We’re going to paste some new code directly
into what we’ve already got. At the top of the Integration page you’ll
see an anchor link for Size and an anchor link for Hint. We’ll use both of these to make our changes. First click on Number 2 Size. By default the zoom size is 300 pixels. I’m going to change this to 400 pixels. So all I need to do is copy the rel attribute
as shown and paste it after the Magic Zoom class in my code. If you go back up to the top of the Integration
page and this time select Number 9 Hint. You can see the rel attribute hint-text which
is what we want. We’ve already got the rel in our code so just
copy from hint and finish with the exclamation mark. Once that’s done go back to your Post and
paste the new hint code after zoom-height 400 pixels, and update your changes and now
when you preview your blog you can see the Hint text has changed, and the zoom area size
is bigger. By default Magic Zoom gives an external zoom. It may be that you’d prefer to use an internal
zoom instead. You can do this by selecting Number 4 Internal
Zoom on the Integration page and this time copy the rel attribute zoom position inner
and paste it over your existing zoom-width zoom-height code which you just entered to
change the zoom size. Now when you preview your blog you’ll see
the internal zoom is working instead. This is great when you want to keep everything
contained in your Post rather than having a zoom area covering other parts of your page. All the HTML code you’ll need to make changes
is on the Integration page. Use the anchor links at the top to help you
navigate around the page easily. If you’re not sure how you want to display
your images, go to the Magic Zoom Examples page. Whether you want to use multiple images or
reverse opacity this page will give you some great ideas. At the top of each page on our website there’s
a Contact Us link. So if you have any questions about Magic Zoom
or any of our other tools, just get in touch. If we’re not online when you send your message
through, we’ll get back to you the very next day. And that brings us to the end of this tutorial. Thanks for watching.

One thought on “Zoom into your blog images with Blogger (tutorial)

  1. Missing step from original video:

    1:17 – When you upload the CSS and JS files to your server also upload the 'graphics' folder. Images in this folder will automatically be displayed as part of the zoom tool.

Leave a Reply

Your email address will not be published. Required fields are marked *